My-Website/light-mode.js at main · JdeZdev/My-Website · GitHub

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
document.addEventListener("DOMContentLoaded", () => {
  const hamburger = document.getElementById("hamburger-toggle");
  const navLinks = document.getElementById("nav-links");
  const lightToggle = document.getElementById("light-toggle");
  const root = document.documentElement; // <html>

  // --- NAV MENU TOGGLE ---
  if (hamburger && navLinks) {
    hamburger.addEventListener("click", () => {
      navLinks.classList.toggle("open");
      console.log("hamburger clicked");
    });
  }

  // --- THEME HELPERS ---
  function applyTheme(theme) {
    const isLight = theme === "light";

    // Toggle on <html> AND <body> so scrollbar + rest of site update
    root.classList.toggle("light-mode", isLight);
    document.body.classList.toggle("light-mode", isLight);

    localStorage.setItem("theme", isLight ? "light" : "dark");
  }

  // Apply saved theme on load
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme === "light" || savedTheme === "dark") {
    applyTheme(savedTheme);
  } else {
    applyTheme("dark"); // default
  }

  // --- THEME BUTTON ---
  if (lightToggle) {
    lightToggle.addEventListener("click", () => {
      const isCurrentlyLight = root.classList.contains("light-mode");
      applyTheme(isCurrentlyLight ? "dark" : "light");
    });
  }

  console.log("JS loaded");
});