1 
2<label class="theme-switch" for="checkbox" id="themeswitch">
3  <input type="checkbox" id="checkbox">
4  <div class="slider round"></div>
5    <span class="name"></span>
6  <div class="back"></div>
7</label>          

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