1 
2<label class="theme">
3  <input class="input" checked="checked" type="checkbox">
4  <svg width="24" viewBox="0 0 24 24" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" height="24" fill="none" class="icon icon-sun"><circle r="5" cy="12" cx="12"></circle><line y2="3" y1="1" x2="12" x1="12"></line><line y2="23" y1="21" x2="12" x1="12"></line><line y2="5.64" y1="4.22" x2="5.64" x1="4.22"></line><line y2="19.78" y1="18.36" x2="19.78" x1="18.36"></line><line y2="12" y1="12" x2="3" x1="1"></line><line y2="12" y1="12" x2="23" x1="21"></line><line y2="18.36" y1="19.78" x2="5.64" x1="4.22"></line><line y2="4.22" y1="5.64" x2="19.78" x1="18.36"></line></svg>
5  <svg viewBox="0 0 24 24" class="icon icon-moon"><path d="m12.3 4.9c.4-.2.6-.7.5-1.1s-.6-.8-1.1-.8c-4.9.1-8.7 4.1-8.7 9 0 5 4 9 9 9 3.8 0 7.1-2.4 8.4-5.9.2-.4 0-.9-.4-1.2s-.9-.2-1.2.1c-1 .9-2.3 1.4-3.7 1.4-3.1 0-5.7-2.5-5.7-5.7 0-1.9 1.1-3.8 2.9-4.8zm2.8 12.5c.5 0 1 0 1.4-.1-1.2 1.1-2.8 1.7-4.5 1.7-3.9 0-7-3.1-7-7 0-2.5 1.4-4.8 3.5-6-.7 1.1-1 2.4-1 3.8-.1 4.2 3.4 7.6 7.6 7.6z"></path></svg>
6</label>          

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