change framework

src/scripts/theme.js

@@ -0,0 +1,60 @@
+// Theme management
+const THEME_KEY = 'dfir-theme';
+
+// Get system preference
+function getSystemTheme() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+// Get stored theme or default to auto
+function getStoredTheme() {
+  return localStorage.getItem(THEME_KEY) || 'auto';
+}
+
+// Apply theme to document
+function applyTheme(theme) {
+  const effectiveTheme = theme === 'auto' ? getSystemTheme() : theme;
+  document.documentElement.setAttribute('data-theme', effectiveTheme);
+}
+
+// Initialize theme on page load
+function initTheme() {
+  const storedTheme = getStoredTheme();
+  applyTheme(storedTheme);
+  
+  // Update theme toggle buttons
+  document.querySelectorAll('[data-theme-toggle]').forEach(button => {
+    button.setAttribute('data-current-theme', storedTheme);
+  });
+}
+
+// Handle theme toggle
+function toggleTheme() {
+  const current = getStoredTheme();
+  const themes = ['light', 'dark', 'auto'];
+  const currentIndex = themes.indexOf(current);
+  const nextIndex = (currentIndex + 1) % themes.length;
+  const nextTheme = themes[nextIndex];
+  
+  localStorage.setItem(THEME_KEY, nextTheme);
+  applyTheme(nextTheme);
+  
+  // Update all theme toggle buttons
+  document.querySelectorAll('[data-theme-toggle]').forEach(button => {
+    button.setAttribute('data-current-theme', nextTheme);
+  });
+}
+
+// Listen for system theme changes
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+  if (getStoredTheme() === 'auto') {
+    applyTheme('auto');
+  }
+});
+
+// Export functions for use in Astro components
+window.themeUtils = {
+  initTheme,
+  toggleTheme,
+  getStoredTheme
+};