fix dark mode flicker (#272)

drewhammond · web-flow · commit 71e19355080f · 2023-11-22T13:48:42.000-05:00
diff --git a/ui/templates/layouts/master.html b/ui/templates/layouts/master.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-100" data-bs-theme="light">
+<html lang="en" class="h-100" data-bs-theme="auto">
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -22,9 +22,15 @@
 			}
 
 			const setTheme = theme => {
-				document.documentElement.setAttribute('data-bs-theme', theme)
+				if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+					document.documentElement.setAttribute('data-bs-theme', 'dark')
+				} else {
+					document.documentElement.setAttribute('data-bs-theme', theme)
+				}
 			}
 
+			setTheme(getPreferredTheme())
+
 			window.addEventListener('DOMContentLoaded', () => {
 				const toggle = document.querySelector('#enable-dark-mode')
 				const storedTheme = getStoredTheme()
