fix: improve theme selection code to avoid page flashes in dark mode

tphakala · Jan 13, 2025 · eb84b05 · eb84b05
1 parent 872ce03
commit eb84b05
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 17 deletions.
diff --git a/assets/custom.css b/assets/custom.css
@@ -512,3 +512,8 @@ thead.sticky-header {
     font-size: 0.875rem;
     margin-top: 0.25rem;
 }
+
+/* Theme toggle */
+.swap-rotate {
+    transition: transform 0.2s ease-in-out;
+}
diff --git a/views/elements/header.html b/views/elements/header.html
@@ -97,7 +97,7 @@
 		<!-- Theme toggle using daisyUI -->
 		<div class="relative group hidden md:block">
 			<label class="swap swap-rotate btn btn-ghost btn-sm p-1">
-				<input type="checkbox" class="theme-controller" value="dark" />
+				<input type="checkbox" class="theme-controller" value="dark" :checked="document.documentElement.getAttribute('data-theme-controller') === 'dark'" />
 				<svg class="swap-on fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
 				<svg class="swap-off fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
 			</label>

diff --git a/views/index.html b/views/index.html
@@ -6,6 +6,17 @@
 <head>
 	<meta charset="utf-8" />
 	<title>BirdNET-Go {{ .Title }}</title>
+	<script>
+		// Immediately set the theme before any content loads
+		if (localStorage.getItem('theme') === 'dark') {
+			document.documentElement.setAttribute('data-theme', 'dark');
+			// Pre-set the checkbox state
+			document.documentElement.setAttribute('data-theme-controller', 'dark');
+		} else {
+			document.documentElement.setAttribute('data-theme', 'light');
+			document.documentElement.setAttribute('data-theme-controller', 'light');
+		}
+	</script>
 	<meta name="viewport"
 		content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
 	<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
@@ -76,6 +87,7 @@
 		function setTheme(themeName) {
 			localStorage.setItem('theme', themeName);
 			document.documentElement.setAttribute('data-theme', themeName);
+			document.documentElement.setAttribute('data-theme-controller', themeName);
 		}
 
 		// Function to toggle theme
@@ -87,17 +99,6 @@
 			}
 		}
 
-		// Immediately invoked function to set the theme on initial load
-		(function () {
-			if (localStorage.getItem('theme') === 'dark') {
-				setTheme('dark');
-				document.querySelector('.theme-controller').checked = true;
-			} else {
-				setTheme('light');
-				document.querySelector('.theme-controller').checked = false;
-			}
-		})();
-
 		// Event listener for theme toggle
 		document.querySelector('.theme-controller').addEventListener('change', function () {
 			toggleTheme();

diff --git a/views/settings/filtersSettings.html b/views/settings/filtersSettings.html
@@ -195,7 +195,7 @@
                     Set how long to remember a detected dog bark
                 </div>
             </div>
-            
+
         </div>
 
         <!-- Dog Bark Species List -->

diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html
@@ -5,7 +5,7 @@
 
 <!-- First div - Include Species -->
 <div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
-x-data="{ 
+x-data="{
     speciesSettings: {
         Include: {{if .Settings.Realtime.Species.Include}}{{.Settings.Realtime.Species.Include | toJSON}}{{else}}[]{{end}},
     },
@@ -48,7 +48,8 @@
             .slice(0, 5);
     },
 }" 
-x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });">
+x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+x-cloak>
     <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
     <div class="collapse-title settings-section-header">
         <div class="flex items-center">
@@ -142,7 +143,8 @@
             .slice(0, 5);
     },
 }" 
-x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });">
+x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+x-cloak>
     <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
     <div class="collapse-title text-xl font-medium">
         <div class="flex items-center">
@@ -301,7 +303,8 @@
             .slice(0, 5);
     },
 }" 
-x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });">
+x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+x-cloak>
     <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
     <div class="collapse-title text-xl font-medium">
         <div class="flex items-center">
-Original file line number
+Diff line change
@@ Expand Up / @@ -195,7 +195,7 @@ @@
                         Set how long to remember a detected dog bark
                     </div>
                 </div>
             </div>
             <!-- Dog Bark Species List -->
@@ Expand Down @@