-
Notifications
You must be signed in to change notification settings - Fork 0
/
darkModeBtn.js
41 lines (40 loc) · 1.33 KB
/
darkModeBtn.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
document.body.style="background-color: var(--bs-dark);transition: 0.5s;"
const sun = "https://www.uplooder.net/img/image/55/7aa9993fc291bc170abea048589896cf/sun.svg";
const moon = "https://www.uplooder.net/img/image/2/addf703a24a12d030968858e0879b11e/moon.svg"
var theme = "dark";
const root = document.querySelector(":root");
const container = document.getElementsByClassName("theme-container")[0];
const themeIcon = document.getElementById("theme-icon");
container.addEventListener("click", setTheme);
function setTheme() {
switch (theme) {
case "dark":
setLight();
theme = "light";
break;
case "light":
setDark();
theme = "dark";
break;
}
}
function setLight() {
root.style.setProperty("--bs-dark","#f5f5f5");
container.classList.remove("shadow-dark");
setTimeout(() => {
container.classList.add("shadow-light");
themeIcon.classList.remove("change");
}, 300);
themeIcon.classList.add("change");
themeIcon.src = sun;
}
function setDark() {
root.style.setProperty("--bs-dark", "#212529");
container.classList.remove("shadow-light");
setTimeout(() => {
container.classList.add("shadow-dark");
themeIcon.classList.remove("change");
}, 300);
themeIcon.classList.add("change");
themeIcon.src = moon;
}