{"html":"

\n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".theme-switch {\n position: relative;\n display: flex;\n justify-content: center;\n direction: rtl;\n}\n\n#theme-checkbox {\n display: none;\n}\n\n#theme-checkbox + label {\n /* change the font-size below to change the size of the switch button*/\n font-size: 2rem;\n height: 1em;\n width: 2.5em;\n border-radius: 0.25em;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n background-color: #cecece;\n position: relative;\n}\n\n#theme-checkbox:checked + label {\n background-color: #3a3a3a;\n}\n\n#theme-checkbox + label:active {\n transform: scale(0.85);\n transition: transform 0.2s;\n}\n\n#theme-checkbox + label div {\n width: 0.8em;\n height: 0.8em;\n border-radius: inherit;\n position: absolute;\n top: 0.1em;\n left: 0.1em;\n z-index: 10;\n transition: 0.5s cubic-bezier(1, 0.33, 0.11, 1.34);\n background-color: #f2f2f2;\n}\n\n#theme-checkbox:checked + label div {\n /* left: calc(2.5em - .8em - .1em); */\n left: 1.6em;\n background-color: #212121;\n}\n\n#theme-checkbox + label span {\n display: flex;\n}\n\n#theme-checkbox + label svg {\n display: inline-block;\n height: 1em;\n width: 1em;\n padding: 0.15em;\n box-sizing: border-box;\n}\n\n#theme-checkbox + label span:first-of-type {\n color: #3a3a3a;\n}\n\n#theme-checkbox + label span:last-of-type {\n color: #cecece;\n}\n"}

strong-skunk-73

👁 实时预览

📝 源代码