46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
"use strict";
|
|
|
|
const btn = document.querySelector(".dark-theme");
|
|
const darkIcon = document.querySelector(".fa-moon");
|
|
const lightIcon = document.querySelector(".fa-sun");
|
|
|
|
const addDarkMode = () => {
|
|
document.documentElement.classList.add("dark");
|
|
|
|
darkIcon.classList.remove("hidden");
|
|
lightIcon.classList.add("hidden");
|
|
};
|
|
|
|
const removeDarkMode = () => {
|
|
document.documentElement.classList.remove("dark");
|
|
|
|
darkIcon.classList.add("hidden");
|
|
lightIcon.classList.remove("hidden");
|
|
};
|
|
|
|
if (localStorage.getItem("color-theme") === "dark") {
|
|
addDarkMode();
|
|
} else if (localStorage.getItem("color-theme") === "light") {
|
|
removeDarkMode();
|
|
} else {
|
|
if (
|
|
window.matchMedia &&
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
) {
|
|
addDarkMode();
|
|
} else {
|
|
removeDarkMode();
|
|
}
|
|
}
|
|
|
|
btn.addEventListener("click", () => {
|
|
if (document.documentElement.classList.contains("dark")) {
|
|
localStorage.setItem("color-theme", "light");
|
|
|
|
removeDarkMode();
|
|
} else {
|
|
localStorage.setItem("color-theme", "dark");
|
|
|
|
addDarkMode();
|
|
}
|
|
});
|