1/* The switch - the box around the slider */
2.switch {
3  display: block;
4  --width-of-switch: 3.5em;
5  --height-of-switch: 2em;
6  /* size of sliding icon -- sun and moon */
7  --size-of-icon: 1.4em;
8  /* it is like a inline-padding of switch */
9  --slider-offset: 0.3em;
10  position: relative;
11  width: var(--width-of-switch);
12  height: var(--height-of-switch);
13}
14
15/* Hide default HTML checkbox */
16.switch input {
17  opacity: 0;
18  width: 0;
19  height: 0;
20}
21
22/* The slider */
23.slider {
24  position: absolute;
25  cursor: pointer;
26  top: 0;
27  left: 0;
28  right: 0;
29  bottom: 0;
30  background-color: #f4f4f5;
31  transition: .4s;
32  border-radius: 30px;
33}
34
35.slider:before {
36  position: absolute;
37  content: "";
38  height: var(--size-of-icon,1.4em);
39  width: var(--size-of-icon,1.4em);
40  border-radius: 20px;
41  left: var(--slider-offset,0.3em);
42  top: 50%;
43  transform: translateY(-50%);
44  background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
45  ;
46 transition: .4s;
47}
48
49input:checked + .slider {
50  background-color: #303136;
51}
52
53input:checked + .slider:before {
54  left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em)));
55  background: #303136;
56  /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
57  box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
58}