Create FALLBACK_SETTINGS on demand so we don't call createThemeStore() eagerly and thus set <html class="dark"> unintentional

techniq · techniq · commit 84bea840cad3 · 2024-02-27T08:27:14.000-05:00
diff --git a/.changeset/giant-camels-lie.md b/.changeset/giant-camels-lie.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+Create `FALLBACK_SETTINGS` on demand so we don't call `createThemeStore()` eagerly and thus set `<html class="dark">` unintentional
diff --git a/packages/svelte-ux/src/lib/components/settings.ts b/packages/svelte-ux/src/lib/components/settings.ts
@@ -118,19 +118,23 @@ export function settings(settings: SettingsInput): Settings {
   });
 }
 
-const FALLBACK_CONTEXT: Settings = {
-  currentTheme: createThemeStore({ light: ['light'], dark: ['dark'] }),
-  componentSettingsCache: {},
-  ...createLocaleStores({}),
-};
+let FALLBACK_SETTINGS: Settings | null = null;
+
+function getFallbackSettings() {
+  FALLBACK_SETTINGS = FALLBACK_SETTINGS ?? {
+    currentTheme: createThemeStore({ light: ['light'], dark: ['dark'] }),
+    componentSettingsCache: {},
+    ...createLocaleStores({}),
+  };
+  return FALLBACK_SETTINGS;
+}
 
 export function getSettings(): Settings {
   // in a try/catch to be able to test w/o svelte components
-
   try {
-    return getContext<Settings>(settingsKey) ?? FALLBACK_CONTEXT;
+    return getContext<Settings>(settingsKey) ?? getFallbackSettings();
   } catch (error) {
-    return FALLBACK_CONTEXT;
+    return getFallbackSettings();
   }
 }
 
