{"html":"

\n\n\t\n\t\n\t\n\tDark Mode\n\n

","css":":root {\n --hue: 223;\n --bg: hsl(var(--hue),10%,90%);\n --fg: hsl(var(--hue),10%,10%);\n --primary: hsl(var(--hue),90%,50%);\n --trans-dur: 0.3s;\n --trans-timing: cubic-bezier(0.76,0.05,0.24,0.95);\n --trans-timing-in: cubic-bezier(0.76,0.05,0.86,0.06);\n --trans-timing-out: cubic-bezier(0.05,0.76,0.06,0.86);\n font-size: calc(40px + (80 - 40) * (100px - 320px) / (2560 - 320));\n}\n\n.container,\n.switch__input {\n color: var(--fg);\n font: 1em/1.5 sans-serif;\n}\n\n.container {\n background-color: var(--bg);\n display: flex;\n height: 100%;\n transition: background-color var(--trans-dur),\n\t\tcolor var(--trans-dur);\n}\n\n.container:has(.switch__input:checked) {\n background-color: var(--fg);\n color: var(--bg);\n}\n\n.switch {\n margin: auto;\n position: relative;\n}\n\n.switch__icon,\n.switch__input {\n display: block;\n}\n\n.switch__icon {\n position: absolute;\n top: 0.375em;\n right: 0.375em;\n width: 0.75em;\n height: 0.75em;\n transition: opacity calc(var(--trans-dur) / 2),\n\t\ttransform calc(var(--trans-dur) / 2);\n}\n\n.switch__icon polyline {\n transition: stroke-dashoffset calc(var(--trans-dur) / 2);\n}\n\n.switch__icon--light,\n.switch__icon--light polyline {\n transition-delay: calc(var(--trans-dur) / 2);\n transition-timing-function: var(--trans-timing-out);\n}\n\n.switch__icon--dark {\n opacity: 0;\n transform: translateX(-0.75em) rotate(30deg) scale(0.75);\n transition-timing-function: var(--trans-timing-in);\n}\n\n.switch__input {\n background-color: hsl(210,90%,70%);\n border-radius: 0.75em;\n box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0),\n\t\t0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2);\n outline: transparent;\n position: relative;\n width: 3em;\n height: 1.5em;\n -webkit-appearance: none;\n appearance: none;\n -webkit-tap-highlight-color: transparent;\n transition: background-color var(--trans-dur) var(--trans-timing),\n\t\tbox-shadow 0.15s linear;\n}\n\n.switch__input:focus-visible {\n box-shadow: 0 0 0 0.125em hsl(var(--hue),90%,50%),\n\t\t0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2);\n}\n\n.switch__input:before,\n.switch__input:after {\n content: \"\";\n display: block;\n position: absolute;\n}\n\n.switch__input:before {\n background-color: hsl(50,90%,50%);\n border-radius: inherit;\n mask-image: linear-gradient(120deg,hsl(0,0%,0%) 20%,hsla(0,0%,0%,0) 80%);\n -webkit-mask-image: linear-gradient(120deg,hsl(0,0%,0%) 20%,hsla(0,0%,0%,0) 80%);\n inset: 0;\n transition: background-color var(--trans-dur) var(--trans-timing);\n}\n\n.switch__input:after {\n background-color: hsl(0,0%,100%);\n border-radius: 50%;\n box-shadow: 0.05em 0.05em 0.05em hsla(var(--hue),90%,10%,0.1);\n top: 0.125em;\n left: 0.125em;\n width: 1.25em;\n height: 1.25em;\n transition: background-color var(--trans-dur) var(--trans-timing),\n\t\ttransform var(--trans-dur) var(--trans-timing);\n z-index: 1;\n}\n\n.switch__input:checked {\n background-color: hsl(290,90%,40%);\n}\n\n.switch__input:checked:before {\n background-color: hsl(220,90%,40%);\n}\n\n.switch__input:checked:after {\n background-color: hsl(0,0%,0%);\n transform: translateX(1.5em);\n}\n\n.switch__input:checked ~ .switch__icon--light,\n.switch__input:checked ~ .switch__icon--light polyline {\n transition-delay: 0s;\n transition-timing-function: var(--trans-timing-in);\n}\n\n.switch__input:checked ~ .switch__icon--light {\n opacity: 0;\n transform: translateX(-0.75em) rotate(-30deg) scale(0.75);\n}\n\n.switch__input:checked ~ .switch__icon--light polyline {\n stroke-dashoffset: 1.5;\n}\n\n.switch__input:checked ~ .switch__icon--dark {\n opacity: 1;\n transform: translateX(-1.5em);\n transition-delay: calc(var(--trans-dur) / 2);\n transition-timing-function: var(--trans-timing-out);\n}\n\n.switch__sr {\n overflow: hidden;\n position: absolute;\n width: 1px;\n height: 1px;\n}\n"}

curly-parrot-90

👁 实时预览

📝 源代码