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