fix: eliminate theme flicker on page refresh

- Add critical theme detection script in head.html
- Apply theme immediately before CSS renders
- Prevent Flash of Unstyled Content (FOUC)
- Update JavaScript initialization to sync with pre-applied theme
- Maintain theme persistence across page refreshes
- Improve perceived performance and user experience

Author: TechDufus

_includes/head.html

@@ -76,6 +76,30 @@
 
   {% include syntax-highlight.html %}
 
+  <!-- Critical Theme Detection Script - Prevents FOUC -->
+  <script>
+    // CRITICAL: This script must run IMMEDIATELY to prevent theme flicker
+    (function() {
+      try {
+        // Get stored theme preference
+        const storedTheme = localStorage.getItem('theme');
+        const preferredTheme = storedTheme || 'dark';
+        
+        // Apply theme immediately before any CSS renders
+        document.documentElement.setAttribute('data-theme', preferredTheme);
+        document.body.setAttribute('data-theme', preferredTheme);
+        
+        // Store the detected theme for later JavaScript access
+        window.initialTheme = preferredTheme;
+      } catch (e) {
+        // Fallback if localStorage is not available
+        document.documentElement.setAttribute('data-theme', 'dark');
+        document.body.setAttribute('data-theme', 'dark');
+        window.initialTheme = 'dark';
+      }
+    })();
+  </script>
+
 </head>
 
 <!-- HEAD End -->

_includes/js.html

@@ -1,5 +1,5 @@
 
-<!-- Javascript Start -->
+<!-- Javascript Start - Theme Flicker Fix v1 -->
 
 <!-- jQuery -->
 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
@@ -27,7 +27,8 @@
     // State management
     this.isScrolled = false;
     this.isMobileMenuOpen = false;
-    this.currentTheme = localStorage.getItem('theme') || 'dark';
+    // Use pre-applied theme from critical script, fallback to localStorage or dark
+    this.currentTheme = window.initialTheme || localStorage.getItem('theme') || 'dark';
 
     // Performance optimization
     this.scrollTicking = false;
@@ -144,32 +145,40 @@
 
   // 🌓 Theme Management
   initializeTheme() {
-    this.setTheme(this.currentTheme, false);
+    // Theme was already applied in head.html critical script
+    // Just sync the toggle button state with the current theme
+    this.syncThemeToggleState();
   }
 
   toggleTheme() {
     const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
     this.setTheme(newTheme, true);
   }
 
-  setTheme(theme, animate = true) {
-    this.currentTheme = theme;
-    
-    // Update DOM
-    document.body.setAttribute('data-theme', theme);
-    
-    // Update theme toggle button
+  syncThemeToggleState() {
+    // Only update the toggle button state - theme is already applied
     if (this.themeToggle) {
-      this.themeToggle.setAttribute('aria-pressed', theme === 'light' ? 'true' : 'false');
+      this.themeToggle.setAttribute('aria-pressed', this.currentTheme === 'light' ? 'true' : 'false');
 
       // Update icon in the handle
       const toggleIcon = this.themeToggle.querySelector('.toggle-icon');
       if (toggleIcon) {
-        toggleIcon.className = theme === 'light' ? 
+        toggleIcon.className = this.currentTheme === 'light' ? 
           'toggle-icon fa fa-sun' : 
           'toggle-icon fa fa-moon';
       }
     }
+  }
+
+  setTheme(theme, animate = true) {
+    this.currentTheme = theme;
+    
+    // Update DOM (both html and body for maximum compatibility)
+    document.documentElement.setAttribute('data-theme', theme);
+    document.body.setAttribute('data-theme', theme);
+    
+    // Update theme toggle button
+    this.syncThemeToggleState();
 
     // Store preference
     localStorage.setItem('theme', theme);