.theme-li { height: 50px; padding: 15px 8px; &:hover { background-color: rgba(0, 0, 0, 0.02); } } body.darktheme .theme-li { &:hover { background-color: #262626; } } .theme-toggle { --ease-3: cubic-bezier(.25, 0, .3, 1); --ease-out-5: cubic-bezier(0, 0, 0, 1); --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25); --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25); --size: 2rem; --icon-fill: #abb3ba; --icon-fill-hover: #e2e6e9; -webkit-tap-highlight-color: transparent; aspect-ratio: 1; background: none; block-size: var(--size); border: none; border-radius: 50%; cursor: pointer; inline-size: var(--size); outline-offset: 5px; padding: 0; touch-action: manipulation; > svg { stroke-linecap: round; block-size: 100%; inline-size: 100%; } } [data-mode=dark].theme-toggle { --icon-fill: #454d54; --icon-fill-hover: #22262a; } @media (hover: none) { .theme-toggle { --size: 48px; } } @media (max-width: 767px) { .theme-toggle { --size: 24px; } [data-mode=dark].theme-toggle { --icon-fill: #abb3ba; --icon-fill-hover: #e2e6e9; } } .sun-and-moon { > .moon, > .sun, > .sun-beams { transform-origin: center center; } > .moon, > .sun { fill: var(--icon-fill); } > .sun-beams { stroke: var(--icon-fill); stroke-width: 2px; } } .theme-toggle:hover > .sun-and-moon { > .moon, > .sun { fill: var(--icon-fill-hover); } > .sun-beams { stroke: var(--icon-fill-hover); } } .theme-toggle:focus-visible > .sun-and-moon { > .moon, > .sun { fill: var(--icon-fill-hover); } > .sun-beams { stroke: var(--icon-fill-hover); } } [data-mode=light] .sun-and-moon { > .sun { transform: scale(1.75); } > .sun-beams { opacity: 0; } > .moon > circle { transform: translate(-7px); } } @supports (cx:1) { [data-mode=light] .sun-and-moon > .moon > circle { cx: 17; transform: translate(0); } } @media (prefers-reduced-motion: no-preference) { .sun-and-moon { > .sun { transition: transform .5s var(--ease-elastic-3); } > .sun-beams { transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3); } .moon > circle { transition: transform .25s var(--ease-out-5); } } @supports (cx:1) { .sun-and-moon .moon > circle { transition: cx .25s var(--ease-out-5); } } [data-mode=light] .sun-and-moon { > .sun { transform: scale(1.75); transition-duration: .25s; transition-timing-function: var(--ease-3); } > .sun-beams { transform: rotate(-25deg); transition-duration: .15s; } > .moon > circle { transition-delay: .25s; transition-duration: .5s; } } }