Refactor theme handling in header to simplify logic and improve performance

Author: devnomadic

_includes/header.html

@@ -21,49 +21,37 @@
 </div>
 
 <script type="text/javascript">
-const theme = localStorage.getItem('theme');
-
-if (theme === "light") {
-    document.documentElement.setAttribute('data-theme', 'light');
-} else {
-    document.documentElement.setAttribute('data-theme', 'dark');
-}
-const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
+// Get theme from localStorage, default to dark if not set
+const theme = localStorage.getItem('theme') || 'dark';
 
 function activateDarkTheme() {
-    document.getElementById('theme-toggle').checked = true;
     document.documentElement.setAttribute('data-theme', 'dark');
     document.documentElement.classList.add('theme--dark');
     document.documentElement.classList.remove('theme--light');
-	document.getElementById("theme-toggle").className = 'light';
-	window.localStorage.setItem('theme', 'dark');
+    window.localStorage.setItem('theme', 'dark');
 }
 
 function activateLightTheme() {
-    document.getElementById('theme-toggle').checked = false;
     document.documentElement.setAttribute('data-theme', 'light');
     document.documentElement.classList.add('theme--light');
     document.documentElement.classList.remove('theme--dark');
-	document.getElementById("theme-toggle").className = 'dark';
-	window.localStorage.setItem('theme', 'light');
+    window.localStorage.setItem('theme', 'light');
 }
 
-if (theme === "dark") {
-    activateDarkTheme();
-} else if (theme === "light") {
+// Apply theme immediately to prevent flash
+if (theme === "light") {
     activateLightTheme();
-} else if  (userPrefers === "light") {
-    activateDarkTheme();
 } else {
+    // Default to dark theme
     activateDarkTheme();
 }
 
 function modeSwitcher() {
-	let currentMode = document.documentElement.getAttribute('data-theme');
-	if (currentMode === "dark") {
-	    activateLightTheme();
-	} else {
-	    activateDarkTheme();
-	}
+    let currentMode = document.documentElement.getAttribute('data-theme');
+    if (currentMode === "dark") {
+        activateLightTheme();
+    } else {
+        activateDarkTheme();
+    }
 }
 </script>