This post is saved as a draft.
#212121
1/* a clone from joshwcomeau.com 2 * but this version runs on pure CSS 3 */ 4 5.themeToggle { 6 color: #bbb; 7 width: 3em; 8} 9 10.st-sunMoonThemeToggleBtn { 11 position: relative; 12 cursor: pointer; 13} 14 15.st-sunMoonThemeToggleBtn .themeToggleInput { 16 opacity: 0; 17 width: 100%; 18 aspect-ratio: 1; 19} 20 21.st-sunMoonThemeToggleBtn svg { 22 position: absolute; 23 left: 0; 24 width: 100%; 25 height: 100%; 26 transition: transform 0.4s ease; 27 transform: rotate(40deg); 28} 29 30.st-sunMoonThemeToggleBtn svg .sunMoon { 31 transform-origin: center center; 32 transition: inherit; 33 transform: scale(1); 34} 35 36.st-sunMoonThemeToggleBtn svg .sunRay { 37 transform-origin: center center; 38 transform: scale(0); 39} 40 41.st-sunMoonThemeToggleBtn svg mask > circle { 42 transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575); 43 transform: translate(0px, 0px); 44} 45 46.st-sunMoonThemeToggleBtn svg .sunRay2 { 47 animation-delay: 0.05s !important; 48} 49.st-sunMoonThemeToggleBtn svg .sunRay3 { 50 animation-delay: 0.1s !important; 51} 52.st-sunMoonThemeToggleBtn svg .sunRay4 { 53 animation-delay: 0.17s !important; 54} 55.st-sunMoonThemeToggleBtn svg .sunRay5 { 56 animation-delay: 0.25s !important; 57} 58.st-sunMoonThemeToggleBtn svg .sunRay5 { 59 animation-delay: 0.29s !important; 60} 61 62.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg { 63 transform: rotate(90deg); 64} 65.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg mask > circle { 66 transform: translate(16px, -3px); 67} 68.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunMoon { 69 transform: scale(0.55); 70} 71.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunRay { 72 animation: showRay1832 0.4s ease 0s 1 forwards; 73} 74 75@keyframes showRay1832 { 76 0% { 77 transform: scale(0); 78 } 79 100% { 80 transform: scale(1); 81 } 82} 83
Variation of aswitch
Variation of aswitch