{"html":"\n\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n","css":"/* Default */\n.theme {\n display: flex;\n align-items: center;\n -webkit-tap-highlight-color: transparent;\n}\n\n.theme__fill,\n.theme__icon {\n transition: 0.3s;\n}\n\n.theme__fill {\n background-color: var(--bg);\n display: block;\n mix-blend-mode: difference;\n position: fixed;\n inset: 0;\n height: 100%;\n transform: translateX(-100%);\n}\n\n.theme__icon,\n.theme__toggle {\n z-index: 1;\n}\n\n.theme__icon,\n.theme__icon-part {\n position: absolute;\n}\n\n.theme__icon {\n display: block;\n top: 0.5em;\n left: 0.5em;\n width: 1.5em;\n height: 1.5em;\n}\n\n.theme__icon-part {\n border-radius: 50%;\n box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n width: 1em;\n height: 1em;\n transition: box-shadow var(--transDur) ease-in-out,\n\t\topacity var(--transDur) ease-in-out,\n\t\ttransform var(--transDur) ease-in-out;\n transform: scale(0.5);\n}\n\n.theme__icon-part ~ .theme__icon-part {\n background-color: hsl(0,0%,100%);\n border-radius: 0.05em;\n top: 50%;\n left: calc(50% - 0.05em);\n transform: rotate(0deg) translateY(0.5em);\n transform-origin: 50% 0;\n width: 0.1em;\n height: 0.2em;\n}\n\n.theme__icon-part:nth-child(3) {\n transform: rotate(45deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(4) {\n transform: rotate(90deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(5) {\n transform: rotate(135deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(6) {\n transform: rotate(180deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(7) {\n transform: rotate(225deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(8) {\n transform: rotate(270deg) translateY(0.5em);\n}\n\n.theme__icon-part:nth-child(9) {\n transform: rotate(315deg) translateY(0.5em);\n}\n\n.theme__label,\n.theme__toggle,\n.theme__toggle-wrap {\n position: relative;\n}\n\n.theme__toggle,\n.theme__toggle:before {\n display: block;\n}\n\n.theme__toggle {\n background-color: hsl(48,90%,85%);\n border-radius: 25% / 50%;\n box-shadow: 0 0 0 0.125em var(--primaryT);\n padding: 0.25em;\n width: 6em;\n height: 3em;\n -webkit-appearance: none;\n appearance: none;\n transition: background-color var(--transDur) ease-in-out,\n\t\tbox-shadow 0.15s ease-in-out,\n\t\ttransform var(--transDur) ease-in-out;\n}\n\n.theme__toggle:before {\n background-color: hsl(48,90%,55%);\n border-radius: 50%;\n content: \"\";\n width: 2.5em;\n height: 2.5em;\n transition: 0.3s;\n}\n\n.theme__toggle:focus {\n box-shadow: 0 0 0 0.125em var(--primary);\n outline: transparent;\n}\n\n/* Checked */\n.theme__toggle:checked {\n background-color: hsl(198,90%,15%);\n}\n\n.theme__toggle:checked:before,\n.theme__toggle:checked ~ .theme__icon {\n transform: translateX(3em);\n}\n\n.theme__toggle:checked:before {\n background-color: hsl(198,90%,55%);\n}\n\n.theme__toggle:checked ~ .theme__fill {\n transform: translateX(0);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) {\n box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;\n transform: scale(1);\n top: 0.2em;\n left: -0.2em;\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part {\n opacity: 0;\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) {\n transform: rotate(45deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) {\n transform: rotate(90deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) {\n transform: rotate(135deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) {\n transform: rotate(180deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) {\n transform: rotate(225deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) {\n transform: rotate(270deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) {\n transform: rotate(315deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) {\n transform: rotate(360deg) translateY(0.8em);\n}\n\n.theme__toggle-wrap {\n margin: 0 0.75em;\n}\n\n@supports selector(:focus-visible) {\n .theme__toggle:focus {\n box-shadow: 0 0 0 0.125em var(--primaryT);\n }\n\n .theme__toggle:focus-visible {\n box-shadow: 0 0 0 0.125em var(--primary);\n }\n}"}

old-falcon-20

👁 实时预览

📝 源代码