forked from apu52/Travel_Website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Theme.js
47 lines (37 loc) · 1.43 KB
/
Theme.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
42
43
44
45
46
// const themebtn = document.getElementById("toggle");
// themebtn.onclick = () => {
// document.body.classList.toggle("dark-theme");
// if (document.body.classList.contains("dark-theme")) {
// themebtn.innerHTML = '<i class="fa fa-sun-o" aria-hidden="true"></i>';
// console.log("Dark theme");
// } else {
// themebtn.innerHTML = '<i class="fa fa-moon-o" aria-hidden="true"></i>';
// console.log("Light theme");
// }
// };
const themeToggle = document.getElementById("themeToggle");
const themeLabel = document.querySelector(".toggle-label");
function applyTheme(theme) {
if (theme === "dark") {
document.body.classList.add("dark-theme");
document.body.classList.remove("light-theme");
// themeLabel.style.background = "var(--primary-color)";
themeToggle.setAttribute('title','Switch to Light mode');
themeToggle.checked = true;
} else {
document.body.classList.add("light-theme");
document.body.classList.remove("dark-theme");
// themeLabel.style.background = "fff";
themeToggle.setAttribute('title','Switch to Dark mode');
themeToggle.checked = false;
}
}
document.addEventListener("DOMContentLoaded", () => {
const savedTheme = localStorage.getItem("theme") || "light";
applyTheme(savedTheme);
});
themeToggle.addEventListener("change", () => {
const theme = themeToggle.checked ? "dark" : "light";
localStorage.setItem("theme", theme);
applyTheme(theme);
});