src/scripts/darktheme.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

// Get the theme toggle input
const currentTheme = localStorage.getItem("theme"); // If the current local storage item can be found

if (window.matchMedia
    && window.matchMedia("(prefers-color-scheme: dark)").matches
    && !localStorage.getItem("theme")) {
    localStorage.setItem("theme", "dark");
}

// Function that will switch the theme based on the if the theme toggle is checked or not
function switchTheme() {
    if (document.body.classList.contains('dark-mode')) {
        document.body.classList.remove("dark-mode");
        localStorage.setItem("theme", "light");
    } else {
        document.body.classList.add("dark-mode");
        localStorage.setItem("theme", "dark");
    }
}
// Get the current theme from local storage
if (currentTheme === "dark") {
    document.body.classList.add("dark-mode");
    localStorage.setItem("theme", "dark");
} else {
    document.body.classList.remove("dark-mode");
    localStorage.setItem("theme", "light");
}