#212121
1.darkThemeBtn * { 2 transition: all 0.3s; 3} 4 5.darkThemeBtn input { 6 width: 0; 7 height: 0; 8 visibility: hidden; 9} 10 11.darkThemeBtn label { 12 border: 1px solid #efefef; 13 background: rgba(239, 239, 239, 0.5); 14 border-radius: 10px; 15 height: 46px; 16 width: 46px; 17 margin: auto; 18 display: flex; 19 justify-content: center; 20 align-items: center; 21 position: relative; 22 cursor: pointer; 23} 24 25.darkThemeBtn label:active { 26 border-radius: 5px; 27} 28 29.darkThemeBtn label svg { 30 position: absolute; 31 width: 16px; 32 transition: 0.3s; 33 z-index: 1; 34 fill: #000; 35} 36 37.darkThemeBtn label svg.sun { 38 width: 20px; 39 opacity: 0; 40 fill: #fff; 41} 42 43.darkThemeBtn label svg.moon { 44 opacity: 1; 45} 46 47.darkThemeBtn input:checked + label { 48 background: #4a6cf7; 49} 50 51.darkThemeBtn input:checked + label svg.sun { 52 opacity: 1; 53} 54 55.darkThemeBtn input:checked + label svg.moon { 56 opacity: 0; 57} 58 59.darkThemeBtn input:checked ~ span { 60 background-color: #16174b; 61}
261 views
261 views
Comments
MIT License