chore: replace with extracted danix.xyz-hacker theme (danix2-hugo-theme)

1 files changed, 41 insertions, 75 deletions

diff --git a/assets/js/theme-toggle.js b/assets/js/theme-toggle.js
index e03fce7..bb95b2a 100644
--- a/assets/js/theme-toggle.js
+++ b/assets/js/theme-toggle.js
@@ -1,87 +1,53 @@
-// theme-toggle.js
-(function() {
-  const STORAGE_KEY = 'danix-theme';
-  const DARK_CLASS = 'theme-dark';
-  const LIGHT_CLASS = 'theme-light';
-
-  // Initialize theme on page load
-  function init() {
-    const saved = localStorage.getItem(STORAGE_KEY);
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const isDark = saved === null ? prefersDark : saved === 'dark';
-
-    applyTheme(isDark ? 'dark' : 'light');
+document.addEventListener('DOMContentLoaded', function() {
+  const themeToggle = document.getElementById('theme-toggle');
+  const sunIcon = document.getElementById('theme-icon-sun');
+  const moonIcon = document.getElementById('theme-icon-moon');
+
+  function updateThemeIcon() {
+    const isDark = document.documentElement.classList.contains('theme-dark');
+    if (sunIcon && moonIcon) {
+      if (isDark) {
+        sunIcon.style.display = 'block';
+        moonIcon.style.display = 'none';
+      } else {
+        sunIcon.style.display = 'none';
+        moonIcon.style.display = 'block';
+      }
+    }
   }
 
-  // Apply theme to document
-  function applyTheme(theme) {
-    const html = document.documentElement;
-
-    html.classList.remove(DARK_CLASS, LIGHT_CLASS);
-
-    if (theme === 'dark') {
-      html.classList.remove(LIGHT_CLASS);
-      localStorage.setItem(STORAGE_KEY, 'dark');
-    } else {
-      html.classList.add(LIGHT_CLASS);
-      localStorage.setItem(STORAGE_KEY, 'light');
-    }
+  // Update icon on initial load
+  if (sunIcon && moonIcon) {
+    updateThemeIcon();
   }
 
-  // Get current theme
-  function getCurrentTheme() {
-    return document.documentElement.classList.contains(LIGHT_CLASS) ? 'light' : 'dark';
+  if (!themeToggle) {
+    return;
   }
 
-  // Toggle theme
-  function toggleTheme() {
-    const current = getCurrentTheme();
-    const next = current === 'dark' ? 'light' : 'dark';
-    applyTheme(next);
+  themeToggle.addEventListener('click', function(e) {
+    e.preventDefault();
 
-    // Dispatch custom event for other scripts to listen
-    window.dispatchEvent(new CustomEvent('theme-changed', { detail: { theme: next } }));
-  }
+    // Get current theme from html element
+    const htmlElement = document.documentElement;
+    const isDark = htmlElement.classList.contains('theme-dark');
+    const newTheme = isDark ? 'light' : 'dark';
 
-  // Setup toggle button
-  function setupToggleButton() {
-    const btn = document.getElementById('theme-switch');
-    if (btn) {
-      btn.addEventListener('click', toggleTheme);
-      updateToggleButtonUI();
+    // Remove both theme classes
+    htmlElement.classList.remove('theme-light', 'theme-dark');
 
-      // Listen for theme changes to update button UI
-      window.addEventListener('theme-changed', updateToggleButtonUI);
-    }
-  }
+    // Add the new theme class
+    htmlElement.classList.add(`theme-${newTheme}`);
 
-  function updateToggleButtonUI() {
-    const btn = document.getElementById('theme-switch');
-    if (btn) {
-      const current = getCurrentTheme();
-      if (current === 'light') {
-        btn.classList.add('light');
-      } else {
-        btn.classList.remove('light');
-      }
-    }
-  }
+    // Persist to localStorage
+    localStorage.setItem('theme', newTheme);
 
-  // Initialize on DOMContentLoaded
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', function() {
-      init();
-      setupToggleButton();
-    });
-  } else {
-    init();
-    setupToggleButton();
-  }
+    // Update icon display
+    updateThemeIcon();
 
-  // Expose to global scope for testing
-  window.ThemeToggle = {
-    toggle: toggleTheme,
-    set: applyTheme,
-    get: getCurrentTheme,
-  };
-})();
+    // Update Feather Icons if available
+    if (window.feather) {
+      window.feather.replace();
+    }
+  });
+});