the home site for me: also iteration 3 or 4 of my site
dunkirk.sh
1const toggleButton = document.getElementById("theme-toggle");
2const themeIcon = document
3 .getElementById("theme-toggle-label")
4 .querySelector("i");
5const themeSound = document.getElementById("theme-sound");
6
7// Function to update the theme icon based on the current theme
8const updateThemeIcon = (isDarkMode) => {
9 themeIcon.style.setProperty(
10 "--icon-toggle",
11 isDarkMode ? "var(--icon-dark)" : "var(--icon-light)",
12 );
13};
14
15// Function to update the theme based on the current mode
16const updateTheme = (isDarkMode) => {
17 const theme = isDarkMode ? "dark" : "light";
18 document.documentElement.setAttribute("data-theme", theme);
19 updateThemeIcon(isDarkMode);
20};
21
22// Function to toggle the theme
23const toggleTheme = () => {
24 const isDarkMode = toggleButton.checked;
25 updateTheme(isDarkMode);
26 themeSound.currentTime = 0;
27 themeSound.play();
28 localStorage.setItem("theme", isDarkMode ? "dark" : "light");
29};
30
31// Event listener for theme toggle
32toggleButton.addEventListener("change", toggleTheme);
33
34// Function to initialize the theme based on the stored preference
35const initializeTheme = () => {
36 const storedTheme = localStorage.getItem("theme");
37 const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
38 const isDarkMode = storedTheme === "dark" || (!storedTheme && prefersDark);
39 toggleButton.checked = isDarkMode;
40 updateTheme(isDarkMode);
41};
42
43// Initialize the theme
44initializeTheme();
45
46// Listen for changes in system preference
47window
48 .matchMedia("(prefers-color-scheme: dark)")
49 .addEventListener("change", initializeTheme);