@fibery/ui-kit 2.0.1 → 2.1.0

package/src/theme-provider.test.tsx

@@ -10,17 +10,20 @@ import {
   useThemePreference,
   useThemeStyles,
 } from "./theme-provider";
-import {defaultDarkTheme, defaultLightTheme, defaultLightThemeStyles} from "./theme-styles";
-import {createInlineStyles, getThemeColors, themeVars} from "./design-system";
-import {makeDefaultPalette} from "./palette-generator";
+import {locateThemeBundle} from "./theme-styles";
+import {stylesFromTheme, themeFromPalette, themeVars} from "./design-system";
 
-const palette = makeDefaultPalette();
+const {
+  palette,
+  themes: [coolLightTheme, coolDarkTheme],
+  styles: [coolLightThemeStyles],
+} = locateThemeBundle(false);
 
 function ThemeDisplay({testId = "theme-display"}: {testId?: string}) {
   const theme = useTheme();
   const mode = useThemeMode();
   return (
-    <div data-testid={testId} data-mode={mode} data-primary={theme.primary}>
+    <div data-testid={testId} data-mode={mode} data-primary={theme.colors.colorAccent}>
       {theme.key}
     </div>
   );
@@ -30,7 +33,7 @@ describe("ThemeProvider", () => {
   describe("basic rendering", () => {
     it("renders children", () => {
       render(
-        <ThemeProvider theme={defaultLightTheme}>
+        <ThemeProvider theme={coolLightTheme}>
           <div data-testid="child">Hello</div>
         </ThemeProvider>
       );
@@ -39,7 +42,7 @@ describe("ThemeProvider", () => {
 
     it("provides theme via useTheme", () => {
       render(
-        <ThemeProvider theme={defaultLightTheme}>
+        <ThemeProvider theme={coolLightTheme}>
           <ThemeDisplay />
         </ThemeProvider>
       );
@@ -48,7 +51,7 @@ describe("ThemeProvider", () => {
 
     it("provides dark theme correctly", () => {
       render(
-        <ThemeProvider theme={defaultDarkTheme}>
+        <ThemeProvider theme={coolDarkTheme}>
           <ThemeDisplay />
         </ThemeProvider>
       );
@@ -59,8 +62,8 @@ describe("ThemeProvider", () => {
   describe("diff behavior", () => {
     it("when theme equals parent, applies no styles", () => {
       const {container} = render(
-        <ThemeProvider theme={defaultLightTheme}>
-          <ThemeProvider theme={defaultLightTheme}>
+        <ThemeProvider theme={coolLightTheme}>
+          <ThemeProvider theme={coolLightTheme}>
             <ThemeDisplay />
           </ThemeProvider>
         </ThemeProvider>
@@ -72,12 +75,12 @@ describe("ThemeProvider", () => {
     });
 
     it("nested provider only sets properties that differ from parent", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const lightTheme = themeFromPalette(palette, "light");
+      const darkTheme = themeFromPalette(palette, "dark");
 
       // Compare full inline themes to verify they differ
-      const lightStyles = createInlineStyles(lightTheme);
-      const darkStyles = createInlineStyles(darkTheme);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
 
       // Count how many properties differ between light and dark
       let diffCount = 0;
@@ -109,13 +112,13 @@ describe("ThemeProvider", () => {
     });
 
     it("deeply nested providers accumulate only diffs", () => {
-      const theme1 = getThemeColors(null, "light", palette);
-      const theme2 = getThemeColors(null, "dark", palette);
-      const theme3 = getThemeColors(null, "light", palette); // back to light
+      const theme1 = themeFromPalette(palette, "light");
+      const theme2 = themeFromPalette(palette, "dark");
+      const theme3 = themeFromPalette(palette, "light"); // back to light
 
       // Verify themes differ
-      const styles1 = createInlineStyles(theme1);
-      const styles2 = createInlineStyles(theme2);
+      const styles1 = stylesFromTheme(theme1);
+      const styles2 = stylesFromTheme(theme2);
 
       let diffCount = 0;
       for (const key in styles2) {
@@ -147,7 +150,7 @@ describe("ThemeProvider", () => {
 
   describe("context-based diff", () => {
     it("diffs against parent context value", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
+      const lightTheme = themeFromPalette(palette, "light");
 
       // When parent context has same theme, diff should be empty
       const {container} = render(
@@ -173,8 +176,8 @@ describe("ThemeProvider", () => {
       // Outer ThemeProvider sets context to dark theme
       // Inner ThemeProvider with same theme should have empty diff
       const {container} = render(
-        <ThemeProvider theme={defaultDarkTheme}>
-          <ThemeProvider theme={defaultDarkTheme}>
+        <ThemeProvider theme={coolDarkTheme}>
+          <ThemeProvider theme={coolDarkTheme}>
             <ThemeDisplay />
           </ThemeProvider>
         </ThemeProvider>
@@ -193,11 +196,11 @@ describe("ThemeProvider", () => {
 
   describe("rejectKeys", () => {
     it("by default, all properties are included in diff", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const lightTheme = themeFromPalette(palette, "light");
+      const darkTheme = themeFromPalette(palette, "dark");
 
-      const lightStyles = createInlineStyles(lightTheme);
-      const darkStyles = createInlineStyles(darkTheme);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
 
       let diffCount = 0;
       for (const key in darkStyles) {
@@ -224,10 +227,10 @@ describe("ThemeProvider", () => {
     });
 
     it("without rejectKeys, uses default reject keys (fewer properties)", () => {
-      const theme = getThemeColors(null, "dark", palette);
+      const theme = themeFromPalette(palette, "dark");
 
       const {container: withEmptyReject} = render(
-        <ThemeProvider theme={defaultLightTheme}>
+        <ThemeProvider theme={coolLightTheme}>
           <ThemeProvider theme={theme}>
             <ThemeDisplay testId="with-empty" />
           </ThemeProvider>
@@ -235,7 +238,7 @@ describe("ThemeProvider", () => {
       );
 
       const {container: withDefaultReject} = render(
-        <ThemeProvider theme={defaultLightTheme}>
+        <ThemeProvider theme={coolLightTheme}>
           <ThemeProvider theme={theme}>
             <ThemeDisplay testId="with-default" />
           </ThemeProvider>
@@ -258,8 +261,8 @@ describe("ThemeProvider", () => {
 
   describe("useTheme and useThemeMode", () => {
     it("useTheme returns current theme in nested context", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const lightTheme = themeFromPalette(palette, "light");
+      const darkTheme = themeFromPalette(palette, "dark");
 
       render(
         <ThemeProvider theme={lightTheme}>
@@ -325,7 +328,7 @@ describe("ThemeProvider", () => {
 
   describe("style optimization verification", () => {
     it("same theme nested produces no inline styles", () => {
-      const theme = getThemeColors(null, "light", palette);
+      const theme = themeFromPalette(palette, "light");
 
       const {container} = render(
         <ThemeProvider theme={theme}>
@@ -353,11 +356,11 @@ describe("ThemeProvider", () => {
     });
 
     it("switching light→dark→light produces symmetric diffs", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const lightTheme = themeFromPalette(palette, "light");
+      const darkTheme = themeFromPalette(palette, "dark");
 
-      const lightStyles = createInlineStyles(lightTheme);
-      const darkStyles = createInlineStyles(darkTheme);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
 
       // Calculate light→dark diff
       const lightToDarkDiff: Record<string, string> = {};
@@ -380,14 +383,14 @@ describe("ThemeProvider", () => {
     });
 
     it("diff count is significantly less than full theme count", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const lightTheme = themeFromPalette(palette, "light");
+      const darkTheme = themeFromPalette(palette, "dark");
 
-      const fullStyles = createInlineStyles(darkTheme);
+      const fullStyles = stylesFromTheme(darkTheme);
       const fullCount = Object.keys(fullStyles).length;
 
       // Calculate diff
-      const lightStyles = createInlineStyles(lightTheme);
+      const lightStyles = stylesFromTheme(lightTheme);
       let diffCount = 0;
       for (const key in fullStyles) {
         if (fullStyles[key] !== lightStyles[key]) {
@@ -404,8 +407,8 @@ describe("ThemeProvider", () => {
 
   describe("style helpers verification", () => {
     it("getStyleCount returns correct number of CSS properties", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const lightTheme = themeFromPalette(palette, "light");
+      const darkTheme = themeFromPalette(palette, "dark");
 
       // Same theme nested = inner div has no style attribute (empty diff)
       const {container: sameContainer} = render(
@@ -439,10 +442,10 @@ describe("ThemeProvider", () => {
     });
 
     it("getStyleObject returns parseable CSS properties", () => {
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const darkTheme = themeFromPalette(palette, "dark");
 
       const {container} = render(
-        <ThemeProvider theme={defaultLightTheme}>
+        <ThemeProvider theme={coolLightTheme}>
           <ThemeProvider theme={darkTheme}>
             <span>content</span>
           </ThemeProvider>
@@ -473,7 +476,7 @@ describe("ThemeProvider", () => {
     });
 
     it("nested providers have decreasing style counts", () => {
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const darkTheme = themeFromPalette(palette, "dark");
 
       // Outer: diff from context default
       // Inner: only diff from outer (which should be 0 since same theme)
@@ -502,10 +505,10 @@ describe("ThemeProvider", () => {
     });
 
     it("getStyleObject can verify specific CSS variable values", () => {
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const darkTheme = themeFromPalette(palette, "dark");
 
       const {container} = render(
-        <ThemeProvider theme={defaultLightTheme}>
+        <ThemeProvider theme={coolLightTheme}>
           <ThemeProvider theme={darkTheme}>
             <span>content</span>
           </ThemeProvider>
@@ -541,7 +544,7 @@ describe("ThemeProvider", () => {
 
     it("returns computed styles from context", () => {
       render(
-        <ThemeProvider theme={defaultLightTheme}>
+        <ThemeProvider theme={coolLightTheme}>
           <StylesDisplay />
         </ThemeProvider>
       );
@@ -552,14 +555,14 @@ describe("ThemeProvider", () => {
     it("returns default styles outside ThemeProvider", () => {
       render(<StylesDisplay />);
       const count = Number(screen.getByTestId("styles").getAttribute("data-style-count"));
-      expect(count).toBe(Object.keys(defaultLightThemeStyles).length);
+      expect(count).toBe(Object.keys(coolLightThemeStyles).length);
     });
 
     it("nested provider updates styles context", () => {
       render(
-        <ThemeProvider theme={defaultLightTheme}>
+        <ThemeProvider theme={coolLightTheme}>
           <StylesDisplay testId="outer" />
-          <ThemeProvider theme={defaultDarkTheme}>
+          <ThemeProvider theme={coolDarkTheme}>
             <StylesDisplay testId="inner" />
           </ThemeProvider>
         </ThemeProvider>
@@ -624,7 +627,7 @@ describe("ThemeProvider", () => {
     }
 
     it("diffs against root styles, not parent context", () => {
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const darkTheme = themeFromPalette(palette, "dark");
 
       // Non-portal dark inside dark parent: diffs against parent (same) → 0 styles
       const {container: normalContainer} = renderWithRoot(
@@ -660,7 +663,7 @@ describe("ThemeProvider", () => {
     });
 
     it("when theme matches root, produces no inline styles", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
+      const lightTheme = themeFromPalette(palette, "light");
 
       const {container} = renderWithRoot(
         <ThemeProvider theme={lightTheme} portal>
@@ -675,11 +678,11 @@ describe("ThemeProvider", () => {
     });
 
     it("when theme differs from root, emits diff against root", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const lightTheme = themeFromPalette(palette, "light");
+      const darkTheme = themeFromPalette(palette, "dark");
 
-      const lightStyles = createInlineStyles(lightTheme);
-      const darkStyles = createInlineStyles(darkTheme);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
       let expectedDiffCount = 0;
       for (const key in darkStyles) {
         if (darkStyles[key] !== lightStyles[key]) {
@@ -699,8 +702,8 @@ describe("ThemeProvider", () => {
     });
 
     it("portal ignores intermediate parent overrides for diff base", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const lightTheme = themeFromPalette(palette, "light");
+      const darkTheme = themeFromPalette(palette, "dark");
 
       // root(light) > dark > portal(light)
       // Portal diffs against root(light), not dark parent
@@ -719,11 +722,11 @@ describe("ThemeProvider", () => {
     });
 
     it("portal with dark mode emits overrides vs light root", () => {
-      const lightTheme = getThemeColors(null, "light", palette);
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const lightTheme = themeFromPalette(palette, "light");
+      const darkTheme = themeFromPalette(palette, "dark");
 
-      const lightStyles = createInlineStyles(lightTheme);
-      const darkStyles = createInlineStyles(darkTheme);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
       let expectedDiffCount = 0;
       for (const key in darkStyles) {
         if (darkStyles[key] !== lightStyles[key]) {
@@ -744,7 +747,7 @@ describe("ThemeProvider", () => {
     });
 
     it("non-portal still diffs against parent context", () => {
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const darkTheme = themeFromPalette(palette, "dark");
 
       // Non-portal nested with same theme as parent: empty diff
       const {container} = renderWithRoot(
@@ -761,7 +764,7 @@ describe("ThemeProvider", () => {
     });
 
     it("provides correct theme context regardless of portal flag", () => {
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const darkTheme = themeFromPalette(palette, "dark");
 
       renderWithRoot(
         <ThemeProvider theme={darkTheme} portal>
@@ -773,11 +776,11 @@ describe("ThemeProvider", () => {
     });
 
     it("provides correct ThemeStylesContext inside portal", () => {
-      const darkTheme = getThemeColors(null, "dark", palette);
+      const darkTheme = themeFromPalette(palette, "dark");
 
       function StylesCheck() {
         const styles = useThemeStyles();
-        const expected = createInlineStyles(darkTheme);
+        const expected = stylesFromTheme(darkTheme);
         const match = Object.keys(expected).every((k) => styles[k] === expected[k]);
         return <div data-testid="styles-match" data-match={String(match)} />;
       }

package/src/theme-provider.tsx

@@ -1,11 +1,5 @@
 import invariant from "invariant";
-import {
-  chooseGlobalStyles,
-  defaultLightTheme,
-  defaultLightThemeStyles,
-  defaultPalette,
-  selectGlobalThemePair,
-} from "./theme-styles";
+import {chooseGlobalStyles, locateThemeBundle} from "./theme-styles";
 import {layoutStyles} from "./layout-styles";
 import {
   createContext,
@@ -18,7 +12,7 @@ import {
   useMemo,
   useState,
 } from "react";
-import {createInlineStyles, getThemeColors, ThemeColors, ThemeStyles} from "./design-system";
+import {Styles, stylesFromTheme, Theme, themeFromPalette} from "./design-system";
 import {selectPalette, ThemePalette} from "./palette-generator";
 import {
   subscribeOnThemeMenuPreferenceChange,
@@ -47,10 +41,15 @@ export function useThemeMenuPreference(): ThemeMenuPreference {
   return themeMenuPreference;
 }
 
-const ThemeColorsContext = createContext<ThemeColors>(defaultLightTheme);
+const {
+  palette,
+  themes: [coolLightTheme],
+  styles: [coolLightThemeStyles],
+} = locateThemeBundle(false);
+const ThemeContext = createContext<Theme>(coolLightTheme);
 
-export function useTheme(): ThemeColors {
-  return useContext(ThemeColorsContext);
+export function useTheme(): Theme {
+  return useContext(ThemeContext);
 }
 
 export function useThemeMode(): ThemeMode {
@@ -58,14 +57,22 @@ export function useThemeMode(): ThemeMode {
   return theme.mode;
 }
 
-const RootThemeStylesContext = createContext<ThemeStyles>(defaultLightThemeStyles);
-const ThemeStylesContext = createContext<ThemeStyles>(defaultLightThemeStyles);
+/** @deprecated Use `useThemedColor` instead */
+export const useNeutralColor = useThemedColor;
+
+export function useThemedColor(color: string) {
+  const theme = useTheme();
+  return theme.fns.deneutralize(color);
+}
+
+const RootThemeStylesContext = createContext<Styles>(coolLightThemeStyles);
+const ThemeStylesContext = createContext<Styles>(coolLightThemeStyles);
 
-export function useThemeStyles(): ThemeStyles {
+export function useThemeStyles(): Styles {
   return useContext(ThemeStylesContext);
 }
 
-const ThemePaletteContext = createContext<ThemePalette>(defaultPalette);
+const ThemePaletteContext = createContext<ThemePalette>(palette);
 
 export function useThemePalette(): ThemePalette {
   return useContext(ThemePaletteContext);
@@ -77,7 +84,7 @@ type ThematicContextValue = {
 };
 
 const ThematicContext = createContext<ThematicContextValue>({
-  palette: defaultPalette,
+  palette,
   setPalette: () => {},
 });
 
@@ -87,30 +94,25 @@ export function useThematic(): ThematicContextValue {
 
 export function ThemeProvider({
   theme: themeOverride,
-  color: colorOverride,
   mode: modeOverride,
   portal,
   children,
 }: PropsWithChildren<
-  {portal?: true} & (
-    | {theme: ThemeColors; color?: never; mode?: never}
-    | {color?: string; theme?: never; mode?: ThemeMode}
-  )
+  {portal?: true} & ({theme: Theme; color?: never; mode?: never} | {color?: string; theme?: never; mode?: ThemeMode})
 >) {
   const palette = useContext(ThemePaletteContext);
-  const parentTheme = useContext(ThemeColorsContext);
+  const parentTheme = useContext(ThemeContext);
 
   const mode = modeOverride ?? parentTheme.mode;
-  const color = colorOverride ?? parentTheme.primary;
-  const theme = themeOverride ?? getThemeColors(color, mode, palette);
+  const theme = themeOverride ?? themeFromPalette(palette, mode);
 
   const parentStyles = useContext(portal ? RootThemeStylesContext : ThemeStylesContext);
-  const styles = createInlineStyles(theme);
+  const styles = stylesFromTheme(theme);
   const stylesDiff = useMemo(() => {
     if (styles === parentStyles) {
       return undefined;
     }
-    const diff: ThemeStyles = {};
+    const diff: Styles = {};
     for (const key of Object.keys(styles)) {
       if (styles[key] !== parentStyles[key]) {
         diff[key] = styles[key];
@@ -120,7 +122,7 @@ export function ThemeProvider({
   }, [styles, parentStyles]);
 
   return (
-    <ThemeColorsContext.Provider value={theme}>
+    <ThemeContext.Provider value={theme}>
       <ThemeStylesContext.Provider value={styles}>
         <div
           style={stylesDiff}
@@ -131,7 +133,7 @@ export function ThemeProvider({
           {children}
         </div>
       </ThemeStylesContext.Provider>
-    </ThemeColorsContext.Provider>
+    </ThemeContext.Provider>
   );
 }
 
@@ -156,13 +158,13 @@ export function MenuThemeProvider({children}: {children: ReactNode}) {
   return <ThemeProvider mode={mode}>{children}</ThemeProvider>;
 }
 
-function useUpdateBrowserThemeColor(light: ThemeColors, dark: ThemeColors) {
+function useUpdateBrowserThemeColor(light: Theme, dark: Theme) {
   useEffect(() => {
     const lightEl = document.querySelector('meta[name="theme-color"][media*="light"]');
     const darkEl = document.querySelector('meta[name="theme-color"][media*="dark"]');
-    lightEl?.setAttribute("content", light.mainBg);
-    darkEl?.setAttribute("content", dark.mainBg);
-  }, [light.mainBg, dark.mainBg]);
+    lightEl?.setAttribute("content", light.colors.mainBg);
+    darkEl?.setAttribute("content", dark.colors.mainBg);
+  }, [light.colors.mainBg, dark.colors.mainBg]);
 }
 
 export function RootThemeProvider({
@@ -178,11 +180,11 @@ export function RootThemeProvider({
   isArchitect?: boolean;
   children: ReactNode;
 }): JSX.Element {
-  const [themeMode, setThemeMode] = useState<ThemeMode>(initialThemeMode);
-  useEffect(() => subscribeOnThemeModeChange(setThemeMode), []);
+  const [mode, setMode] = useState<ThemeMode>(initialThemeMode);
+  useEffect(() => subscribeOnThemeModeChange(setMode), []);
 
   const [warm] = useWarmPreference();
-  useEffect(() => chooseGlobalStyles(themeMode, warm), [themeMode, warm]);
+  useEffect(() => chooseGlobalStyles(mode, warm), [mode, warm]);
 
   const [paletteOverride, setPaletteOverride] = useState<ThemePalette | null>(null);
 
@@ -190,15 +192,18 @@ export function RootThemeProvider({
     return paletteOverride ?? selectPalette({warmLook: warm, isArchitect});
   }, [paletteOverride, warm, isArchitect]);
 
-  let res = <ThemeProvider theme={getThemeColors(null, themeMode, palette)}>{children}</ThemeProvider>;
+  let res = <ThemeProvider theme={themeFromPalette(palette, mode)}>{children}</ThemeProvider>;
 
   // Set base context to what global CSS has, so ThemeProvider diffs against it
-  const [[lightThemeColors, lightThemeStyles], [darkThemeColors, darkThemeStyles]] = selectGlobalThemePair(warm);
+  const {
+    themes: [lightThemeColors, darkThemeColors],
+    styles: [lightThemeStyles, darkThemeStyles],
+  } = locateThemeBundle(warm);
   const [cssThemeColors, cssThemeStyles] =
-    themeMode === "dark" ? [darkThemeColors, darkThemeStyles] : [lightThemeColors, lightThemeStyles];
+    mode === "dark" ? [darkThemeColors, darkThemeStyles] : [lightThemeColors, lightThemeStyles];
   res = <ThemeStylesContext.Provider value={cssThemeStyles}>{res}</ThemeStylesContext.Provider>;
   res = <RootThemeStylesContext.Provider value={cssThemeStyles}>{res}</RootThemeStylesContext.Provider>;
-  res = <ThemeColorsContext.Provider value={cssThemeColors}>{res}</ThemeColorsContext.Provider>;
+  res = <ThemeContext.Provider value={cssThemeColors}>{res}</ThemeContext.Provider>;
   useUpdateBrowserThemeColor(lightThemeColors, darkThemeColors);
 
   res = <ThemePaletteContext.Provider value={palette}>{res}</ThemePaletteContext.Provider>;

package/src/theme-settings.ts

@@ -1,5 +1,6 @@
 import {useEffect, useState} from "react";
 import {getMediaQueryList, subscribeOnChange as subscribeOnMediaQueryChange} from "./media-query-utils";
+import {createPreferenceSetting} from "./preference-setting";
 
 const listenersThemeMode = new Map();
 const listenersThemePreference = new Map();
@@ -170,50 +171,17 @@ export function subscribeOnThemeModeChange(cb: (themeMode: ThemeMode) => void):
   };
 }
 
-const warmKey = "warm";
-const warmListeners = new Set<(warm: boolean) => void>();
-
-export function hasWarmPreference(): boolean {
-  try {
-    return localStorage.getItem(warmKey) !== null;
-  } catch {
-    return false;
-  }
-}
-
-export function loadWarmPreference(): boolean {
-  try {
-    return localStorage.getItem(warmKey) === "true";
-  } catch {
-    return false;
-  }
-}
-
-export function storeWarmPreference(warm: boolean) {
-  try {
-    localStorage.setItem(warmKey, JSON.stringify(warm));
-  } catch {
-    // ignore
-  }
-  warmListeners.forEach((cb) => cb(warm));
-}
-
-export function subscribeOnWarmPreferenceChange(cb: (warm: boolean) => void): () => void {
-  warmListeners.add(cb);
-  let prev = loadWarmPreference();
-  const storageListener = () => {
-    const next = loadWarmPreference();
-    if (prev !== next) {
-      prev = next;
-      cb(next);
-    }
-  };
-  window.addEventListener("storage", storageListener);
-  return () => {
-    warmListeners.delete(cb);
-    window.removeEventListener("storage", storageListener);
-  };
-}
+export const {
+  has: hasWarmPreference,
+  load: loadWarmPreference,
+  store: storeWarmPreference,
+  subscribe: subscribeOnWarmPreferenceChange,
+} = createPreferenceSetting({
+  key: "warm",
+  parse: (raw) => (raw === "true" ? true : raw === "false" ? false : undefined),
+  stringify: (v: boolean) => JSON.stringify(v),
+  defaultValue: false,
+});
 
 export function useWarmPreference() {
   const [warm, setWarm] = useState(loadWarmPreference);