headless css + cleaner javascript

static/js/script.js

@@ -1,21 +1,49 @@
-const setTheme = (theme) => {
-  document.documentElement.className = theme;
-  localStorage.setItem('theme', theme);
-}
+const toggleButton = document.getElementById('theme-toggle');
+const themeIcon = document.getElementById('theme-icon');
+const themeSound = document.getElementById('theme-sound');
 
-const hasCodeRun = localStorage.getItem('hasCodeRun');
+// Function to update the theme icon based on the current theme
+const updateThemeIcon = (isDarkMode) => {
+    const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
+    const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
+    themeIcon.querySelector('use').setAttribute('href', iconPath);
+};
 
-if (!hasCodeRun) {
-  const defaultTheme = "{{ config.extra.default_theme }}";
-  setTheme(defaultTheme);
-  localStorage.setItem('hasCodeRun', 'true');
-}
+// Function to update the theme based on the current mode
+const updateTheme = (isDarkMode) => {
+    const theme = isDarkMode ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', theme);
+    updateThemeIcon(isDarkMode);
+};
 
-const getTheme = () => {
-  const theme = localStorage.getItem('theme');
-  if (theme) {
-    setTheme(theme);
-  }
-}
+// Function to toggle the theme
+const toggleTheme = () => {
+    const isDarkMode = toggleButton.checked;
+    updateTheme(isDarkMode);
+    themeSound.play();
+    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
 
-getTheme();
+    // Add transition class to body for smooth transition
+    document.body.classList.add('theme-transition');
+    setTimeout(() => {
+        document.body.classList.remove('theme-transition');
+    }, 300);
+};
+
+// Event listener for theme toggle
+toggleButton.addEventListener('change', toggleTheme);
+
+// Function to initialize the theme based on the stored preference
+const initializeTheme = () => {
+    const storedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isDarkMode = storedTheme === 'dark' || (!storedTheme && prefersDark);
+    toggleButton.checked = isDarkMode;
+    updateTheme(isDarkMode);
+};
+
+// Initialize the theme
+initializeTheme();
+
+// Listen for changes in system preference
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme);