1// Check for user preference
 2document.addEventListener("DOMContentLoaded", () => {
 3  // Check for saved theme preference or use system preference
 4  const savedTheme = localStorage.getItem("theme");
 5  if (savedTheme) {
 6    document.documentElement.setAttribute("data-theme", savedTheme);
 7    updateThemeToggle(savedTheme);
 8  } else if (
 9    window.matchMedia &&
10    window.matchMedia("(prefers-color-scheme: dark)").matches
11  ) {
12    document.documentElement.setAttribute("data-theme", "dark");
13    updateThemeToggle("dark");
14  }
15
16  // Listen for system preference changes
17  window
18    .matchMedia("(prefers-color-scheme: dark)")
19    .addEventListener("change", (e) => {
20      const newTheme = e.matches ? "dark" : "light";
21      if (!localStorage.getItem("theme")) {
22        document.documentElement.setAttribute("data-theme", newTheme);
23        updateThemeToggle(newTheme);
24      }
25    });
26
27  // Theme toggle button
28  const themeToggle = document.getElementById("themeToggle");
29  themeToggle.addEventListener("click", () => {
30    const currentTheme =
31      document.documentElement.getAttribute("data-theme") || "light";
32    const newTheme = currentTheme === "light" ? "dark" : "light";
33
34    document.documentElement.setAttribute("data-theme", newTheme);
35    localStorage.setItem("theme", newTheme);
36    updateThemeToggle(newTheme);
37  });
38
39  setTimeout(() => {
40    for (item of document.getElementsByClassName("loading")) {
41      console.log(item);
42      item.classList.remove("loading");
43    }
44  }, 500);
45});
46
47function updateThemeToggle(theme) {
48  const themeToggle = document.getElementById("themeToggle");
49  themeToggle.textContent = theme === "dark" ? "☀️" : "🌑";
50}