From af66cc3ddc1c72e7b162b43eaf513d5740d86f7d Mon Sep 17 00:00:00 2001
From: binwiederhier <phil@heckel.io>
Date: Thu, 25 Jun 2026 22:40:34 -0400
Subject: [PATCH] Undo theme weirdness

---
 web/src/components/Preferences.jsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/web/src/components/Preferences.jsx b/web/src/components/Preferences.jsx
index f057ed31..e617deed 100644
--- a/web/src/components/Preferences.jsx
+++ b/web/src/components/Preferences.jsx
@@ -43,7 +43,7 @@ import accountApi, { Permission, Role } from "../app/AccountApi";
 import { Pref, PrefGroup } from "./Pref";
 import AccountContext from "./AccountContext";
 import { Paragraph } from "./styles";
-import prefs, { THEME, THEME_LOCALSTORAGE_KEY } from "../app/Prefs";
+import prefs, { THEME } from "../app/Prefs";
 import { PermissionDenyAll, PermissionRead, PermissionReadWrite, PermissionWrite } from "./ReserveIcons";
 import { ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog } from "./ReserveDialogs";
 import { UnauthorizedError } from "../app/errors";
@@ -230,10 +230,7 @@ const DeleteAfter = () => {
 const Theme = () => {
   const { t } = useTranslation();
   const labelId = "prefTheme";
-  // Reuse the same localStorage key Prefs already mirrors for the splash (THEME_LOCALSTORAGE_KEY),
-  // rather than a second cache key, so the value isn't stored twice. The cached value renders the
-  // dropdown instantly; the live query then confirms it from IndexedDB.
-  const theme = useLiveQuery(() => prefs.theme()) ?? localStorage.getItem(THEME_LOCALSTORAGE_KEY) ?? THEME.SYSTEM;
+  const theme = useCachedPref(() => prefs.theme(), "pref.theme", THEME.SYSTEM);
   const handleChange = async (ev) => {
     await prefs.setTheme(ev.target.value);
   };