fix(site): switch theme live when system preference changes (#2328)

Listen for prefers-color-scheme changes in ThemeProvider and expose resolvedTheme so the login border color follows the active theme without a hard refresh.

internal/site/src/components/login/login.tsx

@@ -15,7 +15,7 @@ export default function () {
 	const page = useStore($router)
 	const [isFirstRun, setFirstRun] = useState(false)
 	const [authMethods, setAuthMethods] = useState<AuthMethodsList>()
-	const { theme } = useTheme()
+	const { resolvedTheme } = useTheme()
 
 	useEffect(() => {
 		document.title = t`Login` + " / Beszel"
@@ -54,7 +54,7 @@ export default function () {
 			<div
 				className="grid gap-5 w-full px-4 mx-auto"
 				// @ts-expect-error
-				style={{ maxWidth: "21.5em", "--border": theme == "light" ? "hsl(30, 8%, 70%)" : "hsl(220, 3%, 25%)" }}
+				style={{ maxWidth: "21.5em", "--border": resolvedTheme == "light" ? "hsl(30, 8%, 70%)" : "hsl(220, 3%, 25%)" }}
 			>
 				<div className="absolute top-3 right-3">
 					<ModeToggle />

internal/site/src/components/routes/system/use-system-data.ts

@@ -171,6 +171,7 @@ export function useSystemData(id: string) {
 	// get stats when system "changes." (Not just system to system,
 	// also when new info comes in via systemManager realtime connection, indicating an update)
 	useEffect(() => {
+		const requestId = ++statsRequestId.current
 		if (!system.id || !chartTime || chartTime === "1m") {
 			return
 		}
@@ -179,7 +180,6 @@ export function useSystemData(id: string) {
 		const { expectedInterval } = chartTimeData[chartTime]
 		const ss_cache_key = `${systemId}_${chartTime}_system_stats`
 		const cs_cache_key = `${systemId}_${chartTime}_container_stats`
-		const requestId = ++statsRequestId.current
 
 		const cachedSystemStats = cache.get(ss_cache_key) as SystemStatsRecord[] | undefined
 		const cachedContainerData = cache.get(cs_cache_key) as ChartData["containerData"] | undefined
@@ -203,7 +203,7 @@ export function useSystemData(id: string) {
 			getStats<SystemStatsRecord>("system_stats", systemId, chartTime),
 			getStats<ContainerStatsRecord>("container_stats", systemId, chartTime),
 		]).then(([systemStats, containerStats]) => {
-			// If another request has been made since this one, ignore the results
+			// Ignore responses for a previous system or chart time
 			if (requestId !== statsRequestId.current) {
 				return
 			}

internal/site/src/components/theme-provider.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useEffect, useState } from "react"
 
 type Theme = "dark" | "light" | "system"
+type ResolvedTheme = "dark" | "light"
 
 type ThemeProviderProps = {
 	children: React.ReactNode
@@ -10,11 +11,13 @@ type ThemeProviderProps = {
 
 type ThemeProviderState = {
 	theme: Theme
+	resolvedTheme: ResolvedTheme
 	setTheme: (theme: Theme) => void
 }
 
 const initialState: ThemeProviderState = {
 	theme: "system",
+	resolvedTheme: "light",
 	setTheme: () => null,
 }
 
@@ -27,24 +30,28 @@ export function ThemeProvider({
 	...props
 }: ThemeProviderProps) {
 	const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme)
+	const [systemDark, setSystemDark] = useState(() => window.matchMedia("(prefers-color-scheme: dark)").matches)
+
+	useEffect(() => {
+		const media = window.matchMedia("(prefers-color-scheme: dark)")
+		const onChange = (event: MediaQueryListEvent) => setSystemDark(event.matches)
+
+		media.addEventListener("change", onChange)
+		return () => media.removeEventListener("change", onChange)
+	}, [])
+
+	const resolvedTheme = theme === "system" ? (systemDark ? "dark" : "light") : theme
 
 	useEffect(() => {
 		const root = window.document.documentElement
 
 		root.classList.remove("light", "dark")
-
-		if (theme === "system") {
-			const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-
-			root.classList.add(systemTheme)
-			return
-		}
-
-		root.classList.add(theme)
-	}, [theme])
+		root.classList.add(resolvedTheme)
+	}, [resolvedTheme])
 
 	const value = {
 		theme,
+		resolvedTheme,
 		setTheme: (theme: Theme) => {
 			localStorage.setItem(storageKey, theme)
 			setTheme(theme)