├── README.md
├── cloud_1.svg
├── cloud_2.svg
├── cloud_3.svg
├── cloud_4.svg
├── index.html
├── preview.gif
├── stars.svg
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Dark-Light-Mode-Switch
2 | ## [Watch it on youtube](https://youtu.be/xyrrKj4mJSo)
3 | ### How to Create a Dark/Light Mode Switch using HTML and CSS
4 |
5 | 💙 Join the channel to see more videos like this. [Open Source Coding](https://www.youtube.com/@opensourcecoding)
6 |
7 | 
8 |
--------------------------------------------------------------------------------
/cloud_1.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/cloud_2.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/cloud_3.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/cloud_4.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dark/Light Mode Switch
8 |
9 |
10 |
24 |
25 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opensource-coding/Dark-Light-Mode-Switch/1b60be4dbbd6e2e513d746c8e3e4412d23f1eff2/preview.gif
--------------------------------------------------------------------------------
/stars.svg:
--------------------------------------------------------------------------------
1 |
48 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --bg-color: #cde7ff;
3 | --switch-width: 150px;
4 | --switch-height: 65px;
5 | --switch-round: 50px;
6 | --switch-padding-x: 5px;
7 | --switch-bg: linear-gradient(to bottom, #73bbff, #a2d1fd);
8 | --switch-dark-bg: linear-gradient(to top, #2b3347, #181d27);
9 | --border-width: 2px;
10 | --border-gradient: linear-gradient(to bottom, #a2d1fd, #cde7ff);
11 | --border-dark-gradient: linear-gradient(to bottom, #000000, #6c7384);
12 | --sunmoon-size: 55px;
13 | --transition: all 0.5s ease;
14 | }
15 |
16 | * {
17 | margin: 0;
18 | padding: 0;
19 | box-sizing: border-box;
20 | user-select: none;
21 | }
22 |
23 | body {
24 | min-height: 100vh;
25 | display: flex;
26 | align-items: center;
27 | justify-content: center;
28 | background-color: var(--bg-color);
29 | transition: background-color 0.5s ease;
30 | }
31 |
32 | body.dark {
33 | --bg-color: #535c72;
34 | }
35 |
36 | .switch {
37 | position: relative;
38 | display: flex;
39 | align-items: center;
40 | justify-content: center;
41 | width: var(--switch-width);
42 | height: var(--switch-height);
43 | border-radius: var(--switch-round);
44 | cursor: pointer;
45 | transition: var(--transition);
46 | background: var(--switch-bg);
47 | }
48 |
49 | .switch::before {
50 | content: '';
51 | position: absolute;
52 | width: 100%;
53 | height: 100%;
54 | border-radius: var(--switch-round);
55 | opacity: 0;
56 | background: var(--switch-dark-bg);
57 | transition: var(--transition);
58 | }
59 |
60 | body.dark .switch::before {
61 | opacity: 1;
62 | }
63 |
64 | .switch .border {
65 | position: absolute;
66 | top: calc(var(--border-width) * -1);
67 | left: calc(var(--border-width) * -1);
68 | width: calc(100% + var(--border-width) * 2);
69 | height: calc(100% + var(--border-width) * 2);
70 | border-radius: var(--switch-round);
71 | background: var(--border-gradient);
72 | z-index: -1;
73 | transition: var(--transition);
74 | }
75 |
76 | .switch .border::after {
77 | content: '';
78 | position: absolute;
79 | top: 0;
80 | left: 0;
81 | width: 100%;
82 | height: 100%;
83 | border-radius: var(--switch-round);
84 | background: var(--border-dark-gradient);
85 | opacity: 0;
86 | transition: var(--transition);
87 | }
88 |
89 | body.dark .switch .border::after {
90 | opacity: 1;
91 | }
92 |
93 | .switch input {
94 | display: none;
95 | }
96 |
97 | .sunmoon {
98 | position: absolute;
99 | width: var(--sunmoon-size);
100 | height: var(--sunmoon-size);
101 | border-radius: 50%;
102 | transition: var(--transition);
103 | left: var(--switch-padding-x);
104 | z-index: 1;
105 | background-color: #FFC187;
106 | box-shadow: 0px 0px 11.7px 0px #FFC187, 0px 0px 20px 0px #ffc18768, -2px -2px 5px 0px #ffab5c inset;
107 | }
108 |
109 | body.dark .sunmoon {
110 | left: calc(100% - var(--sunmoon-size) - var(--switch-padding-x));
111 | background-color: #dee5f3;
112 | box-shadow: 0px 0px 51.7px 0px #dee5f3;
113 | }
114 |
115 | .darkside {
116 | position: absolute;
117 | top: 2px;
118 | left: 2px;
119 | width: 75%;
120 | height: 75%;
121 | border-radius: 50%;
122 | background-color: #FFC187;
123 | transition: var(--transition);
124 | }
125 |
126 | body.dark .darkside {
127 | background-color: #565c6b;
128 | }
129 |
130 | .clouds {
131 | border-radius: var(--switch-round);
132 | position: relative;
133 | height: 100%;
134 | width: 100%;
135 | overflow: hidden;
136 | }
137 |
138 | .cloud {
139 | position: absolute;
140 | width: 60%;
141 | transition: var(--transition);
142 | }
143 |
144 | .cloud-1 {
145 | bottom: -55%;
146 | left: 0;
147 | }
148 |
149 | .cloud-2 {
150 | bottom: -45%;
151 | left: 25px;
152 | }
153 |
154 | .cloud-3 {
155 | bottom: -40%;
156 | right: 0px;
157 | }
158 |
159 | .cloud-4 {
160 | bottom: -16%;
161 | right: -25px;
162 | }
163 |
164 |
165 | body.dark .cloud-1 {
166 | bottom: -35%;
167 | left: -110px;
168 | }
169 |
170 | body.dark .cloud-2 {
171 | bottom: -15%;
172 | left: -110px;
173 | transition: all 0.7s ease;
174 | }
175 |
176 | body.dark .cloud-3 {
177 | bottom: -15%;
178 | right: -110px;
179 | }
180 |
181 | body.dark .cloud-4 {
182 | bottom: -5%;
183 | right: -110px;
184 | transition: all 0.7s ease;
185 | }
186 |
187 | .stars {
188 | position: absolute;
189 | top: 150%;
190 | left: 0;
191 | transform: translateY(-50%);
192 | pointer-events: none;
193 | transition: var(--transition);
194 | }
195 |
196 | body.dark .stars {
197 | top: 50%;
198 | }
--------------------------------------------------------------------------------