added the theme toggle. but still work needs to be done

rohitdavas · Nov 30, 2024 · 792b815 · 792b815
1 parent ee99851
commit 792b815
Showing 1 changed file with 71 additions and 25 deletions.
diff --git a/js/theme.js b/js/theme.js
@@ -1,47 +1,93 @@
 // Theme handling
 class ThemeManager {
     constructor() {
-        this.themeToggleBtn = document.getElementById('theme-toggle-btn');
+        // Initialize properties
         this.moonIcon = '<i class="fas fa-moon"></i>';
         this.sunIcon = '<i class="fas fa-sun"></i>';
 
-        // Initialize theme from localStorage or system preference
-        this.initializeTheme();
-
-        // Add event listener for theme toggle
-        this.themeToggleBtn?.addEventListener('click', () => this.toggleTheme());
+        // Wait for components to load before initializing
+        this.initializeWhenReady();
     }
 
-    initializeTheme() {
-        // Check localStorage first
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme) {
-            this.setTheme(savedTheme);
-            return;
+    initializeWhenReady() {
+        // Check if button exists, if not wait for components to load
+        const checkButton = () => {
+            const button = document.getElementById('theme-toggle-btn');
+            if (button) {
+                this.themeToggleBtn = button;
+                this.initialize();
+            } else {
+                // Check again in 100ms
+                setTimeout(checkButton, 100);
+            }
+        };
+        checkButton();
+    }
+
+    initialize() {
+        try {
+            // Initialize theme from localStorage or system preference
+            this.initializeTheme();
+
+            // Add event listener for theme toggle
+            this.themeToggleBtn?.addEventListener('click', () => this.toggleTheme());
+
+            // Listen for system theme changes
+            window.matchMedia('(prefers-color-scheme: dark)')
+                .addEventListener('change', e => {
+                    if (!localStorage.getItem('theme')) {
+                        this.setTheme(e.matches ? 'dark' : 'light');
+                    }
+                });
+        } catch (error) {
+            console.error('Error initializing theme:', error);
         }
+    }
 
-        // Check system preference
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            this.setTheme('dark');
-        } else {
+    initializeTheme() {
+        try {
+            // Check localStorage first
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme) {
+                this.setTheme(savedTheme);
+                return;
+            }
+
+            // Check system preference
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                this.setTheme('dark');
+            } else {
+                this.setTheme('light');
+            }
+        } catch (error) {
+            console.error('Error in initializeTheme:', error);
+            // Default to light theme if there's an error
             this.setTheme('light');
         }
     }
 
     setTheme(theme) {
-        document.documentElement.setAttribute('data-theme', theme);
-        localStorage.setItem('theme', theme);
-
-        // Update button icon
-        if (this.themeToggleBtn) {
-            this.themeToggleBtn.innerHTML = theme === 'dark' ? this.sunIcon : this.moonIcon;
+        try {
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem('theme', theme);
+
+            // Update button icon
+            if (this.themeToggleBtn) {
+                this.themeToggleBtn.innerHTML = theme === 'dark' ? this.sunIcon : this.moonIcon;
+            }
+        } catch (error) {
+            console.error('Error setting theme:', error);
         }
     }
 
     toggleTheme() {
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-        this.setTheme(newTheme);
+        try {
+            const currentTheme = localStorage.getItem('theme') || 'light';
+            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+            this.setTheme(newTheme);
+        } catch (error) {
+            console.error('Error toggling theme:', error);
+        }
     }
 }