1.theme {
2  --bg-color: #111;
3  --main-color: #fefefe;
4  position: relative;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  width: 40px;
9  height: 40px;
10  background-color: var(--bg-color);
11  border-radius: 100%;
12  border: 2px solid var(--main-color);
13  box-shadow: 4px 4px var(--main-color);
14}
15
16.input {
17  cursor: pointer;
18  position: absolute;
19  width: 100%;
20  height: 100%;
21  z-index: 10;
22  opacity: 0;
23}
24
25.icon {
26  position: absolute;
27  top: calc(50% -13px);
28  left: calc(50% -13px);
29  width: 26px;
30  height: 26px;
31}
32
33.icon.icon-moon {
34  fill: var(--main-color);
35}
36
37.icon.icon-sun {
38  stroke: var(--main-color);
39  display: none;
40}
41
42.input:checked ~ .icon.icon-sun {
43  display: block;
44}
45
46.input:checked ~ .icon.icon-moon {
47  display: none;
48}
49
50.theme:active {
51  box-shadow: 0px 0px var(--main-color);
52  transform: translate(3px, 3px);
53}