├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # sunMoonToggle
2 |
3 | 
4 |
5 | 
6 |
7 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | sunMoonToggle
8 |
9 |
10 |
11 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | .custom-checkbox-wrapper input[type="checkbox"] {
2 | visibility: hidden;
3 | display: none;
4 | }
5 |
6 | .custom-checkbox-wrapper *,
7 | .custom-checkbox-wrapper ::after,
8 | .custom-checkbox-wrapper ::before {
9 | box-sizing: border-box;
10 | }
11 |
12 | /* The switch - the box around the slider */
13 | .custom-checkbox-wrapper .custom-switch {
14 | --width-of-switch: 3.5em;
15 | --height-of-switch: 2em;
16 | /* size of sliding icon -- sun and moon */
17 | --size-of-icon: 1.4em;
18 | /* it is like a inline-padding of switch */
19 | --slider-offset: 0.3em;
20 | position: relative;
21 | width: var(--width-of-switch);
22 | height: var(--height-of-switch);
23 | display: inline-block;
24 | }
25 |
26 | /* The slider */
27 | .custom-checkbox-wrapper .custom-slider {
28 | position: absolute;
29 | cursor: pointer;
30 | top: 0;
31 | left: 0;
32 | right: 0;
33 | bottom: 0;
34 | background-color: #f4f4f5;
35 | transition: 0.4s;
36 | border-radius: 30px;
37 | }
38 |
39 | .custom-checkbox-wrapper .custom-slider:before {
40 | position: absolute;
41 | content: "";
42 | height: var(--size-of-icon, 1.4em);
43 | width: var(--size-of-icon, 1.4em);
44 | border-radius: 20px;
45 | left: var(--slider-offset, 0.3em);
46 | top: 50%;
47 | transform: translateY(-50%);
48 | background: linear-gradient(40deg, #ff8c00, #ff0000 70%);
49 | transition: 0.4s;
50 | }
51 |
52 | .custom-checkbox-wrapper input:checked + .custom-slider {
53 | background-color: #303136;
54 | }
55 |
56 | .custom-checkbox-wrapper input:checked + .custom-slider:before {
57 | left: calc(100% - (var(--size-of-icon, 1.4em) + var(--slider-offset, 0.3em)));
58 | background: #303136;
59 | /* change the value of second inset in box-shadow to change the angle and direction of the moon */
60 | box-shadow: inset -3px -2px 5px -2px #f7ce89, inset -10px -4px 0 0 #fbdaa3;
61 | }
62 |
--------------------------------------------------------------------------------