#e8e8e8
1.theme-switch { 2 display: flex; 3 flex-direction: row; 4 align-items: center; 5 justify-content: center; 6 cursor: pointer; 7 width: 9em; 8 height: 2.5em; 9 font-size: 20px; 10 font-family: Montserrat; 11 font-weight: 600; 12 color: black; 13 background-color: white; 14 padding: 0.5em; 15 border: 1px solid black; 16 box-shadow: 6px 6px 0px black; 17 transition: .4s; 18 z-index: 1; 19} 20 21.name::before { 22 color: black; 23 content: "Dark Mode"; 24 margin-right: 2em; 25 transition: .2s ease-in-out; 26} 27 28.name::after { 29 color: black; 30 content: "Light Mode"; 31 margin-right: 1.7em; 32 transition: .2s ease-in-out; 33 display: none; 34} 35 36.theme-switch .slider { 37 position: absolute; 38 background-color: #222; 39 margin-left: 6.2em; 40 width: 25px; 41 height: 25px; 42 border-radius: 50%; 43 border: 4px solid #222; 44 transform: rotate(-120deg); 45 box-shadow: inset 0px 6px #999, inset 0px 6px 1px 1px #999; 46 -moz-box-shadow: inset 0px 6px #999, inset 0px 6px 1px 1px #999; 47} 48 49.theme-switch:hover { 50 color: white; 51 cursor: pointer; 52 box-shadow: none; 53 transform: translateX(6px) translateY(6px); 54 background-color: black; 55 border: none; 56} 57 58.theme-switch:hover .name::before { 59 color: white; 60} 61 62.theme-switch:hover .name::after { 63 color: white; 64} 65 66.theme-switch input[type=checkbox]:checked + .slider { 67 transform: rotate(360deg); 68 box-shadow: none; 69 border: 4px solid #F28C38; 70 background-color: #F28C38; 71} 72 73.theme-switch input[type=checkbox]:checked ~ .name::before { 74 display: none; 75} 76 77.theme-switch input[type=checkbox]:checked ~ .name::after { 78 display: block; 79} 80 81.theme-switch input[type=checkbox] { 82 position: absolute; 83 visibility: hidden; 84} 85 86.slider { 87 transition: 300ms ease; 88}
Comments
MIT License