Switch by ami-hp

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}