@sigx/lynx-daisyui 0.4.2 → 0.4.4

package/README.md

@@ -83,10 +83,88 @@ layout role. For multi-class compositions (color + modifier),
 `theme.set('daisy-light daisy-rounded')` works — the class string is
 applied verbatim to the host view.
 
+### Two layers: content vs. OS chrome
+
+A theme drives two different things, and they scope differently:
+
+1. **In-app content** — the `--color-*` / radius variables and icon
+   tints. These live on a host view and inherit down a subtree, so they
+   are genuinely *scopable*.
+2. **OS chrome** — the status- and navigation-bar tint (pushed by
+   `<StatusBarSync>`). This is a global OS singleton; it can only reflect
+   one theme at a time.
+
+The rule:
+
+> `useTheme()` is the theme for the **content you render** — the nearest
+> `<ThemeProvider>`, or the app-global theme at the root / in headless
+> code. **System chrome always follows the global theme.** `StatusBarSync`
+> binds to the global controller, so a nested provider can't hijack the
+> bars.
+>
+> *Scopes recolor pixels you draw; only the global theme touches the OS.*
+
+This mirrors Flutter, where `Theme` nests freely for content while system
+chrome goes through a separate channel (`AnnotatedRegion`/`SystemChrome`).
+
+### Headless control (no provider required)
+
+The active theme lives in a module-level singleton, so you can read and
+set it from anywhere — a store, a service, app-boot logic, an effect —
+without a mounted `<ThemeProvider>` ancestor. `useTheme()` resolves to
+this same controller when no provider is in scope (it never throws).
+
+```tsx
+import { themeController } from '@sigx/lynx-daisyui';
+
+// From any non-component module:
+themeController.set('daisy-dark');
+themeController.toggle();
+themeController.followSystem();
+themeController.name;            // current selection
+```
+
+A mounted root `<ThemeProvider>` binds this singleton, so headless
+mutations render and the OS bars follow.
+
+### Per-screen themes
+
+Different screens can use different themes — and the status-bar icons
+follow the active screen so they stay legible. Because this drives the
+**global** theme, the bars update automatically:
+
+```tsx
+import { useScreenTheme } from '@sigx/lynx-daisyui';
+
+const Gallery = component(() => {
+    useScreenTheme('daisy-dark'); // dark (incl. status bar) while focused; restored on blur
+    return () => <view>…</view>;
+});
+```
+
+`useScreenTheme` is built on `@sigx/lynx-navigation`'s `useFocusEffect`
+(an optional peer) and must be called from a routed screen.
+
+### Scoped sub-overrides
+
+To recolor just a **region** without touching the OS bars, nest a
+`<ThemeProvider>`. Its subtree (content + icons) re-themes; the status
+bar stays on the global theme.
+
+```tsx
+<ThemeProvider initial="daisy-light">
+    <App />
+    {/* this card renders synthwave; the status bar stays light */}
+    <ThemeProvider initial="daisy-synthwave">
+        <PreviewCard />
+    </ThemeProvider>
+</ThemeProvider>
+```
+
 ## Navigation chrome
 
 Two daisy-themed components that pair with
-[`@sigx/lynx-navigation`](../lynx-navigation). Both read state via the
+[`@sigx/lynx-navigation`](https://github.com/signalxjs/lynx/tree/main/packages/lynx-navigation). Both read state via the
 navigation package's hooks (no internal-module imports), so swapping
 in custom designs later is a one-component change.
 
@@ -146,7 +224,7 @@ one consumer of that hook.
 ### `<SwiperIndicator>`
 
 Themed wrapper around the headless `useSwiperDot*` hooks from
-[`@sigx/lynx-gestures`](../lynx-gestures#swiper-and-headless-dot-hooks).
+[`@sigx/lynx-gestures`](https://github.com/signalxjs/lynx/tree/main/packages/lynx-gestures#swiper-and-headless-dot-hooks).
 Reads colours from the active daisy theme so the indicator follows light
 / dark mode automatically.
 

package/dist/index.d.ts

@@ -54,10 +54,12 @@ export { NavDrawer } from './navigation/NavDrawer.js';
 export type { NavDrawerProps, NavDrawerSide, } from './navigation/NavDrawer.js';
 export { SwiperIndicator } from './navigation/SwiperIndicator.js';
 export type { SwiperIndicatorProps, SwiperIndicatorVariant, SwiperIndicatorSize, } from './navigation/SwiperIndicator.js';
-export { ThemeProvider, useTheme, listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './theme/ThemeProvider.js';
-export type { DaisyTheme, ThemeController, ThemeProviderProps, Theme, ThemePalette, ThemeRadius, ThemeVariant, } from './theme/ThemeProvider.js';
+export { ThemeProvider, useTheme, listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, sizesOf, } from './theme/ThemeProvider.js';
+export type { DaisyTheme, ThemeController, ThemeProviderProps, Theme, ThemePalette, ThemeRadius, ThemeSizes, ThemeVariant, } from './theme/ThemeProvider.js';
 export { StatusBarSync } from './theme/StatusBarSync.js';
 export type { StatusBarSyncProps } from './theme/StatusBarSync.js';
+export { themeController } from './theme/theme-state.js';
+export { useScreenTheme } from './theme/use-screen-theme.js';
 export { Avatar } from './data/Avatar.js';
 export type { AvatarProps, AvatarSize } from './data/Avatar.js';
 export { Text } from './typography/Text.js';

package/dist/index.js

@@ -32,8 +32,15 @@ export { NavHeader } from './navigation/NavHeader.js';
 export { NavDrawer } from './navigation/NavDrawer.js';
 export { SwiperIndicator } from './navigation/SwiperIndicator.js';
 // Theme
-export { ThemeProvider, useTheme, listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './theme/ThemeProvider.js';
+export { ThemeProvider, useTheme, listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, sizesOf, } from './theme/ThemeProvider.js';
 export { StatusBarSync } from './theme/StatusBarSync.js';
+// Headless theme handle (issue #113): import and call from anywhere — stores,
+// services, effects, app-boot — with no `<ThemeProvider>` ancestor required.
+// `useTheme()` resolves to this when no provider is in scope.
+export { themeController } from './theme/theme-state.js';
+// Per-screen theming: pin the global theme while a navigation screen is focused
+// (requires the optional `@sigx/lynx-navigation` peer).
+export { useScreenTheme } from './theme/use-screen-theme.js';
 // Data
 export { Avatar } from './data/Avatar.js';
 // Typography

package/dist/styles/components/alert.css

@@ -5,7 +5,7 @@
   flex-direction: row;
   align-items: center;
   padding: var(--padding-box);
-  border-radius: var(--rounded-box);
+  border-radius: var(--radius-box);
   gap: 12px;
   background-color: var(--color-base-200);
   color: var(--color-base-content);

package/dist/styles/components/badge.css

@@ -7,7 +7,7 @@
   height: var(--badge-md);
   padding-left: 10px;
   padding-right: 10px;
-  border-radius: var(--rounded-badge);
+  border-radius: var(--radius-selector);
   font-size: var(--font-md);
   font-weight: 600;
   background-color: var(--color-base-200);

package/dist/styles/components/button.css

@@ -8,7 +8,7 @@
   min-height: var(--size-md);
   padding-left: var(--padding-btn-md);
   padding-right: var(--padding-btn-md);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
   font-size: var(--font-md);
   font-weight: 600;
   line-height: 1;

package/dist/styles/components/card.css

@@ -3,7 +3,7 @@
 .card {
   background-color: var(--color-base-200);
   color: var(--color-base-content);
-  border-radius: var(--rounded-box);
+  border-radius: var(--radius-box);
   overflow: hidden;
 }
 

package/dist/styles/components/checkbox.css

@@ -3,7 +3,7 @@
 .checkbox {
   width: var(--checkbox-md);
   height: var(--checkbox-md);
-  border-radius: var(--rounded-selector);
+  border-radius: var(--radius-selector);
   border-width: 1px;
   border-color: var(--color-base-300);
   background-color: transparent;

package/dist/styles/components/input.css

@@ -4,7 +4,7 @@
   height: var(--size-md);
   padding-left: var(--padding-btn-md);
   padding-right: var(--padding-btn-md);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
   font-size: var(--font-md);
   background-color: var(--color-base-100);
   color: var(--color-base-content);

package/dist/styles/components/modal.css

@@ -15,7 +15,7 @@
 .modal-box {
   max-width: var(--modal-max-width);
   width: 90%;
-  border-radius: var(--rounded-box);
+  border-radius: var(--radius-box);
   background-color: var(--color-base-200);
   padding: 0;
   overflow: hidden;

package/dist/styles/components/select.css

@@ -7,7 +7,7 @@
   height: var(--size-md);
   padding-left: var(--padding-btn-md);
   padding-right: var(--padding-btn-md);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
   font-size: var(--font-md);
   background-color: var(--color-base-100);
   color: var(--color-base-content);
@@ -38,7 +38,7 @@
   background-color: var(--color-base-100);
   border-width: var(--border-btn);
   border-color: var(--color-base-300);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
   overflow: hidden;
 }
 

package/dist/styles/components/skeleton.css

@@ -2,5 +2,5 @@
 
 .skeleton {
   background-color: var(--color-base-300);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
 }

package/dist/styles/components/textarea.css

@@ -4,7 +4,7 @@
   padding: 12px;
   padding-left: var(--padding-btn-md);
   padding-right: var(--padding-btn-md);
-  border-radius: var(--rounded-btn);
+  border-radius: var(--radius-field);
   font-size: var(--font-md);
   background-color: var(--color-base-100);
   color: var(--color-base-content);

package/dist/styles/components/toggle.css

@@ -8,10 +8,10 @@
 }
 
 /* Size variants — track dimensions */
-.toggle-xs { width: var(--toggle-width-xs); height: var(--toggle-height-xs); border-radius: var(--rounded-toggle); }
-.toggle-sm { width: var(--toggle-width-sm); height: var(--toggle-height-sm); border-radius: var(--rounded-toggle); }
-.toggle-md { width: var(--toggle-width-md); height: var(--toggle-height-md); border-radius: var(--rounded-toggle); }
-.toggle-lg { width: var(--toggle-width-lg); height: var(--toggle-height-lg); border-radius: var(--rounded-toggle); }
+.toggle-xs { width: var(--toggle-width-xs); height: var(--toggle-height-xs); border-radius: var(--radius-selector); }
+.toggle-sm { width: var(--toggle-width-sm); height: var(--toggle-height-sm); border-radius: var(--radius-selector); }
+.toggle-md { width: var(--toggle-width-md); height: var(--toggle-height-md); border-radius: var(--radius-selector); }
+.toggle-lg { width: var(--toggle-width-lg); height: var(--toggle-height-lg); border-radius: var(--radius-selector); }
 
 /* Thumb */
 .toggle-thumb {

package/dist/styles/index.css

@@ -8,6 +8,11 @@
 /* Structural design tokens (.daisy) + composable shape modifiers */
 @import './themes/tokens.css';
 @import './themes/shapes.css';
+/* Per-theme color tokens for the built-in themes — generated from the theme
+ * registry at build time (scripts/gen-theme-css.mjs). Declared as CSS rules so
+ * `var(--color-*)` resolves on the first paint; the runtime `setProperty` path
+ * can't set inheritable custom properties before descendants have painted. */
+@import './themes/builtins.generated.css';
 
 /* Base reset */
 @import './base.css';

package/dist/styles/themes/builtins.generated.css

@@ -0,0 +1,140 @@
+/* AUTO-GENERATED from src/theme/registry.ts — do not edit.
+ * Regenerated by scripts/gen-theme-css.mjs on every build. */
+
+.daisy-light {
+  --color-primary: #491dff;
+  --color-primary-content: #d3dbff;
+  --color-secondary: #ff20cc;
+  --color-secondary-content: #fff8fc;
+  --color-accent: #00cfbd;
+  --color-accent-content: #00100d;
+  --color-neutral: #2b3440;
+  --color-neutral-content: #d7dde4;
+  --color-base-100: #ffffff;
+  --color-base-200: #f2f2f2;
+  --color-base-300: #e5e6e6;
+  --color-base-content: #1f2937;
+  --color-info: #00b4fa;
+  --color-info-content: #000000;
+  --color-success: #00a96e;
+  --color-success-content: #000000;
+  --color-warning: #ffc100;
+  --color-warning-content: #000000;
+  --color-error: #ff676a;
+  --color-error-content: #000000;
+}
+
+.daisy-cupcake {
+  --color-primary: #65c3c8;
+  --color-primary-content: #052124;
+  --color-secondary: #ef9fbc;
+  --color-secondary-content: #2d0a16;
+  --color-accent: #eeaf3a;
+  --color-accent-content: #2d1c00;
+  --color-neutral: #291334;
+  --color-neutral-content: #f5f1f8;
+  --color-base-100: #faf7f5;
+  --color-base-200: #efeae6;
+  --color-base-300: #e7e2df;
+  --color-base-content: #291334;
+  --color-info: #00b4fa;
+  --color-info-content: #000000;
+  --color-success: #00a96e;
+  --color-success-content: #000000;
+  --color-warning: #ffc100;
+  --color-warning-content: #000000;
+  --color-error: #ff676a;
+  --color-error-content: #000000;
+}
+
+.daisy-emerald {
+  --color-primary: #66cc8a;
+  --color-primary-content: #06200f;
+  --color-secondary: #377cfb;
+  --color-secondary-content: #02112d;
+  --color-accent: #f68067;
+  --color-accent-content: #2d0a02;
+  --color-neutral: #333c4d;
+  --color-neutral-content: #e9eaed;
+  --color-base-100: #ffffff;
+  --color-base-200: #f3f4f6;
+  --color-base-300: #e5e7eb;
+  --color-base-content: #333c4d;
+  --color-info: #1c92f2;
+  --color-info-content: #000a14;
+  --color-success: #00a96e;
+  --color-success-content: #000a05;
+  --color-warning: #ff9900;
+  --color-warning-content: #261600;
+  --color-error: #ff5724;
+  --color-error-content: #000000;
+}
+
+.daisy-dark {
+  --color-primary: #7582ff;
+  --color-primary-content: #050617;
+  --color-secondary: #ff71cf;
+  --color-secondary-content: #190211;
+  --color-accent: #00e7d0;
+  --color-accent-content: #001210;
+  --color-neutral: #2a323c;
+  --color-neutral-content: #a6adbb;
+  --color-base-100: #1d232a;
+  --color-base-200: #191e24;
+  --color-base-300: #343b46;
+  --color-base-content: #a6adbb;
+  --color-info: #00b4fa;
+  --color-info-content: #000000;
+  --color-success: #00a96e;
+  --color-success-content: #000000;
+  --color-warning: #ffc100;
+  --color-warning-content: #000000;
+  --color-error: #ff676a;
+  --color-error-content: #000000;
+}
+
+.daisy-synthwave {
+  --color-primary: #e779c1;
+  --color-primary-content: #2a0a1f;
+  --color-secondary: #58c7f3;
+  --color-secondary-content: #02141d;
+  --color-accent: #f3cc30;
+  --color-accent-content: #2a1f00;
+  --color-neutral: #20134e;
+  --color-neutral-content: #e3e0f5;
+  --color-base-100: #2d1b69;
+  --color-base-200: #261159;
+  --color-base-300: #1f0f4a;
+  --color-base-content: #f9f7fd;
+  --color-info: #53c0f3;
+  --color-info-content: #02151e;
+  --color-success: #71ead2;
+  --color-success-content: #002721;
+  --color-warning: #f3cc30;
+  --color-warning-content: #2a1f00;
+  --color-error: #e24056;
+  --color-error-content: #ffffff;
+}
+
+.daisy-dracula {
+  --color-primary: #ff79c6;
+  --color-primary-content: #2d0414;
+  --color-secondary: #bd93f9;
+  --color-secondary-content: #160226;
+  --color-accent: #50fa7b;
+  --color-accent-content: #002a0e;
+  --color-neutral: #414558;
+  --color-neutral-content: #f8f8f2;
+  --color-base-100: #282a36;
+  --color-base-200: #21222c;
+  --color-base-300: #181920;
+  --color-base-content: #f8f8f2;
+  --color-info: #8be9fd;
+  --color-info-content: #002a31;
+  --color-success: #50fa7b;
+  --color-success-content: #002a0e;
+  --color-warning: #f1fa8c;
+  --color-warning-content: #2a2900;
+  --color-error: #ff5555;
+  --color-error-content: #2a0000;
+}

package/dist/styles/themes/shapes.css

@@ -3,19 +3,13 @@
    <ThemeProvider class="daisy-rounded"> → host class="daisy daisy-rounded" */
 
 .daisy-flat {
-  --rounded-box: 0px;
-  --rounded-btn: 0px;
-  --rounded-badge: 0px;
-  --rounded-tab: 0px;
-  --rounded-selector: 0px;
-  --rounded-toggle: 0px;
+  --radius-selector: 0px;
+  --radius-field: 0px;
+  --radius-box: 0px;
 }
 
 .daisy-rounded {
-  --rounded-box: 24px;
-  --rounded-btn: 9999px;
-  --rounded-badge: 9999px;
-  --rounded-tab: 9999px;
-  --rounded-selector: 9999px;
-  --rounded-toggle: 9999px;
+  --radius-selector: 9999px;
+  --radius-field: 9999px;
+  --radius-box: 24px;
 }

package/dist/styles/themes/tokens.css

@@ -8,15 +8,20 @@
  * may still override roundness via its `radius` field. */
 
 .daisy {
-  /* ── Roundness ── */
-  --rounded-box: 16px;
-  --rounded-btn: 8px;
-  --rounded-badge: 9999px;
-  --rounded-tab: 8px;
-  --rounded-selector: 8px;
-  --rounded-toggle: 9999px;
+  /* ── Roundness (DaisyUI v5 contract) ── */
+  --radius-selector: 8px;
+  --radius-field: 8px;
+  --radius-box: 16px;
 
-  /* ── Sizing scale ── */
+  /* ── Base size units (DaisyUI v5 contract) ──
+   * A theme's `sizes` ({ field, selector }) overrides these; <ThemeProvider>
+   * re-derives the component dimensions below from them in JS. We deliberately
+   * do NOT use `calc(var() * n)` in CSS — it's unproven in Lynx's runtime CSS
+   * engine. Defaults below are base 4px × the per-token multiples shown. */
+  --size-selector: 4px;
+  --size-field: 4px;
+
+  /* ── Field sizing scale (button / input / select) — field × 6/8/12/16 ── */
   --size-xs: 24px;
   --size-sm: 32px;
   --size-md: 48px;
@@ -41,27 +46,28 @@
   --border-btn: 1px;
   --border-card: 1px;
 
-  /* ── Component-specific sizes ── */
-  --checkbox-xs: 16px;
-  --checkbox-sm: 20px;
-  --checkbox-md: 24px;
-  --checkbox-lg: 32px;
-  --toggle-width-xs: 32px;
-  --toggle-width-sm: 40px;
-  --toggle-width-md: 48px;
-  --toggle-width-lg: 56px;
-  --toggle-height-xs: 22px;
-  --toggle-height-sm: 24px;
-  --toggle-height-md: 28px;
-  --toggle-height-lg: 32px;
-  --toggle-thumb-xs: 14px;
-  --toggle-thumb-sm: 16px;
-  --toggle-thumb-md: 20px;
-  --toggle-thumb-lg: 24px;
-  --badge-xs: 16px;
-  --badge-sm: 20px;
-  --badge-md: 24px;
-  --badge-lg: 32px;
+  /* ── Selector-driven sizes (checkbox / toggle / badge) — selector × the
+   * multiples shown; <ThemeProvider> re-derives these from `sizes.selector`. ── */
+  --checkbox-xs: 16px; /* ×4 */
+  --checkbox-sm: 20px; /* ×5 */
+  --checkbox-md: 24px; /* ×6 */
+  --checkbox-lg: 32px; /* ×8 */
+  --toggle-width-xs: 32px; /* ×8 */
+  --toggle-width-sm: 40px; /* ×10 */
+  --toggle-width-md: 48px; /* ×12 */
+  --toggle-width-lg: 56px; /* ×14 */
+  --toggle-height-xs: 24px; /* ×6 */
+  --toggle-height-sm: 24px; /* ×6 */
+  --toggle-height-md: 28px; /* ×7 */
+  --toggle-height-lg: 32px; /* ×8 */
+  --toggle-thumb-xs: 16px; /* ×4 */
+  --toggle-thumb-sm: 16px; /* ×4 */
+  --toggle-thumb-md: 20px; /* ×5 */
+  --toggle-thumb-lg: 24px; /* ×6 */
+  --badge-xs: 16px; /* ×4 */
+  --badge-sm: 20px; /* ×5 */
+  --badge-md: 24px; /* ×6 */
+  --badge-lg: 32px; /* ×8 */
   --step-indicator: 32px;
   --progress-height: 8px;
   --modal-max-width: 400px;

package/dist/theme/StatusBarSync.js

@@ -28,10 +28,13 @@ import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
  */
 import { component, effect, onMounted, onUnmounted } from '@sigx/lynx';
 import { isAvailable, setSystemBarsStyle } from '@sigx/lynx-appearance';
-import { useTheme } from './ThemeProvider.js';
+import { themeController } from './theme-state.js';
 import { variantOf } from './registry.js';
 export const StatusBarSync = component(({ props }) => {
-    const theme = useTheme();
+    // Bind to the *global* theme — not `useTheme()` — so the OS bars always
+    // track the app/screen theme and can't be hijacked by a content sub-scope
+    // (a nested `<ThemeProvider>` recolors its subtree but leaves the bars put).
+    const theme = themeController;
     let lastApplied = null;
     let runner;
     function apply(name) {

package/dist/theme/ThemeProvider.d.ts

@@ -90,8 +90,12 @@ export interface ThemeController {
     followSystem(): void;
 }
 /**
- * Access the enclosing daisyui theme controller. Throws when used
- * outside `<ThemeProvider>` — install a provider at your app root.
+ * Access the active daisyui theme controller. Resolves to the nearest
+ * `<ThemeProvider>`'s controller (a content sub-scope), or — at the app root
+ * and in *headless* code with no provider mounted — the global controller
+ * (`themeController`). Never throws: theme control is reachable from anywhere
+ * (issue #113). For control that must always target the app/OS theme
+ * regardless of scope (e.g. a status-bar sync), import `themeController`.
  */
 export declare const useTheme: import("@sigx/runtime-core").InjectableFunction<ThemeController>;
 export type ThemeProviderProps = 
@@ -134,5 +138,5 @@ Define.Prop<'initial', DaisyTheme, false>
 export declare const ThemeProvider: import("@sigx/runtime-core").ComponentFactory<ThemeProviderProps, void, {
     default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
 }>;
-export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './registry.js';
-export type { Theme, ThemePalette, ThemeRadius, ThemeVariant } from './registry.js';
+export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, sizesOf, } from './registry.js';
+export type { Theme, ThemePalette, ThemeRadius, ThemeSizes, ThemeVariant, } from './registry.js';

package/dist/theme/ThemeProvider.js

@@ -35,17 +35,94 @@ import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
  * <ThemeProvider light="daisy-cupcake" dark="daisy-synthwave">…</ThemeProvider>
  * ```
  */
-import { component, defineInjectable, defineProvide, onMounted, onUnmounted, signal, } from '@sigx/lynx';
+import { component, defineInjectable, defineProvide, effect, onMounted, onUnmounted, signal, untrack, } from '@sigx/lynx';
 import { useIconColorResolver } from '@sigx/lynx-icons';
 import { useSystemColorScheme } from '@sigx/lynx-appearance';
-import { colorsOf, pairOf, pickThemeFor, radiusOf } from './registry.js';
+import { colorsOf, isBuiltInTheme, pickThemeFor, radiusOf, sizesOf, variantOf, } from './registry.js';
+import { globalThemeState, makeThemeController, themeController, } from './theme-state.js';
+// DaisyUI v5 expresses control dimensions as multiples of two base units
+// (`--size-field`, `--size-selector`). Lynx's runtime CSS engine is unproven
+// for `calc(var() * n)`, so when a theme overrides a base unit we do the
+// multiplication here and emit literal px. Bases must be px (engine-safe, like
+// colors); a non-px base sets only the base var and leaves the `.daisy`
+// defaults in place. Multiples mirror the defaults in `styles/themes/tokens.css`.
+const FIELD_STEPS = { xs: 6, sm: 8, md: 12, lg: 16 };
+const SELECTOR_STEPS = {
+    'checkbox-xs': 4, 'checkbox-sm': 5, 'checkbox-md': 6, 'checkbox-lg': 8,
+    'toggle-width-xs': 8, 'toggle-width-sm': 10, 'toggle-width-md': 12, 'toggle-width-lg': 14,
+    'toggle-height-xs': 6, 'toggle-height-sm': 6, 'toggle-height-md': 7, 'toggle-height-lg': 8,
+    'toggle-thumb-xs': 4, 'toggle-thumb-sm': 4, 'toggle-thumb-md': 5, 'toggle-thumb-lg': 6,
+    'badge-xs': 4, 'badge-sm': 5, 'badge-md': 6, 'badge-lg': 8,
+};
+const pxValue = (v) => {
+    const m = /^\s*(\d+(?:\.\d+)?)px\s*$/.exec(v);
+    return m ? Number(m[1]) : undefined;
+};
+/** Emit a theme's `sizes` overrides as literal-px CSS custom properties. */
+function applySizeVars(style, sizes) {
+    if (sizes.field) {
+        style['--size-field'] = sizes.field;
+        const base = pxValue(sizes.field);
+        if (base !== undefined) {
+            for (const k in FIELD_STEPS)
+                style[`--size-${k}`] = `${base * FIELD_STEPS[k]}px`;
+        }
+    }
+    if (sizes.selector) {
+        style['--size-selector'] = sizes.selector;
+        const base = pxValue(sizes.selector);
+        if (base !== undefined) {
+            for (const k in SELECTOR_STEPS)
+                style[`--${k}`] = `${base * SELECTOR_STEPS[k]}px`;
+        }
+    }
+}
 /**
- * Access the enclosing daisyui theme controller. Throws when used
- * outside `<ThemeProvider>` — install a provider at your app root.
+ * The full custom-property set for a theme — colors plus any radius/size
+ * overrides. Applied at runtime via the Lynx `setProperty` API (see
+ * `<ThemeProvider>`), NOT the inline `style` attribute: Lynx does not honor
+ * custom properties declared inline in this toolchain, but `setProperty`
+ * registers real, inheritable ones — the documented way to theme via CSS
+ * variables (https://lynxjs.org/guide/styling/custom-theming).
  */
-export const useTheme = defineInjectable(() => {
-    throw new Error('[lynx-daisyui] useTheme() called outside <ThemeProvider>. Wrap your app root with `<ThemeProvider>…</ThemeProvider>`.');
-});
+function buildThemeVars(name) {
+    const palette = colorsOf(name) ?? colorsOf('daisy-light');
+    const radius = radiusOf(name);
+    const sizes = sizesOf(name);
+    const vars = {};
+    for (const key in palette)
+        vars[`--color-${key}`] = palette[key];
+    if (radius) {
+        if (radius.selector)
+            vars['--radius-selector'] = radius.selector;
+        if (radius.field)
+            vars['--radius-field'] = radius.field;
+        if (radius.box)
+            vars['--radius-box'] = radius.box;
+    }
+    if (sizes)
+        applySizeVars(vars, sizes);
+    return vars;
+}
+/** Unique host id per provider instance so `getElementById` targets its own subtree. */
+let themeIdSeq = 0;
+/**
+ * Access the active daisyui theme controller. Resolves to the nearest
+ * `<ThemeProvider>`'s controller (a content sub-scope), or — at the app root
+ * and in *headless* code with no provider mounted — the global controller
+ * (`themeController`). Never throws: theme control is reachable from anywhere
+ * (issue #113). For control that must always target the app/OS theme
+ * regardless of scope (e.g. a status-bar sync), import `themeController`.
+ */
+export const useTheme = defineInjectable(() => themeController);
+/**
+ * Nesting-depth marker. The outermost `<ThemeProvider>` sees depth 0 and binds
+ * the global singleton (so headless `themeController` mutations render and the
+ * OS bars track it); a nested provider sees >= 1 and creates its own local
+ * state — a content sub-scope that recolors its subtree without touching the
+ * global theme or the system bars.
+ */
+const useThemeDepth = defineInjectable(() => 0);
 /**
  * Wraps children in a `<view class={theme}>` so the daisyui CSS variables
  * defined inside the theme class inherit down to every descendant.
@@ -64,44 +141,45 @@ export const ThemeProvider = component(({ props, slots }) => {
     // The underlying signal widens to PrimitiveSignal<string> via Widen<T>;
     // cast at read sites to keep the narrow union throughout the component.
     const readScheme = () => systemScheme.value;
-    // Seed: pin to `initial` if set, otherwise follow system.
-    const initialState = props.initial
-        ? { name: props.initial, following: false }
-        : {
-            name: readScheme() === 'dark'
+    // Root vs. nested. The outermost provider (depth 0) binds the global
+    // singleton — so headless `themeController` mutations render here and the OS
+    // bars (via StatusBarSync) follow this theme. A nested provider gets its own
+    // local state: a content sub-scope that overrides its subtree only.
+    const depth = useThemeDepth();
+    const isRoot = depth === 0;
+    defineProvide(useThemeDepth, () => depth + 1);
+    // Stable id for the host view so the runtime `setProperty` call (below) can
+    // target it. Unique per instance so nested providers theme their own subtree.
+    const hostId = `daisy-theme-${++themeIdSeq}`;
+    const state = isRoot
+        ? globalThemeState
+        : signal(props.initial
+            ? { name: props.initial, following: false }
+            : {
+                name: readScheme() === 'dark'
+                    ? (props.dark ?? pickThemeFor('dark'))
+                    : (props.light ?? pickThemeFor('light')),
+                following: true,
+            });
+    // Seed the root from props/system. An explicit `initial` pin is author
+    // intent and wins. With no `initial`, reflect the current system scheme into
+    // the first render — but only while `following`, so a theme a headless
+    // caller set before this mounted is respected, not clobbered. The follow
+    // effect below keeps it in sync afterwards.
+    if (isRoot) {
+        if (props.initial) {
+            state.name = props.initial;
+            state.following = false;
+        }
+        else if (state.following) {
+            state.name = readScheme() === 'dark'
                 ? (props.dark ?? pickThemeFor('dark'))
-                : (props.light ?? pickThemeFor('light')),
-            following: true,
-        };
-    const state = signal(initialState);
-    // Guard against re-applying the same theme on stray re-fires.
-    let lastApplied = state.following ? readScheme() : null;
-    function applySystem(scheme, force = false) {
-        if (!state.following)
-            return;
-        if (!force && lastApplied === scheme)
-            return;
-        lastApplied = scheme;
-        state.name = scheme === 'dark'
-            ? (props.dark ?? pickThemeFor('dark'))
-            : (props.light ?? pickThemeFor('light'));
+                : (props.light ?? pickThemeFor('light'));
+        }
     }
-    const controller = {
-        get name() { return state.name; },
-        get followingSystem() { return state.following; },
-        set(next) {
-            state.name = next;
-            state.following = false;
-        },
-        toggle() {
-            state.name = pairOf(state.name);
-            state.following = false;
-        },
-        followSystem() {
-            state.following = true;
-            applySystem(readScheme(), /* force */ true);
-        },
-    };
+    const controller = isRoot
+        ? themeController
+        : makeThemeController(state);
     defineProvide(useTheme, () => controller);
     // Wire the daisy color resolver into `@sigx/lynx-icons`'s injectable
     // so any `<Icon variant="primary">` rendered inside this subtree gets
@@ -118,35 +196,65 @@ export const ThemeProvider = component(({ props, slots }) => {
         return palette?.[variant];
     };
     defineProvide(useIconColorResolver, () => resolver);
-    // Subscribe to system color-scheme changes. Both PrimitiveSignal and
-    // Computed expose `.subscribe(fn)` returning an unsubscribe handle —
-    // we lean on the structural shape so this file doesn't pull
-    // @sigx/reactivity into its imports.
-    let unsubscribe;
+    // Follow the system color scheme while `following`. Reactive: re-runs when
+    // `following` flips true (e.g. `controller.followSystem()`, including the
+    // headless `themeController`) or when the OS scheme changes, and writes the
+    // matching theme. Reading `state.following` and `systemScheme.value` tracks
+    // them; the `name` write is `untrack`ed so it can't re-trigger the effect.
+    // Created on mount (the native publisher may populate the scheme between
+    // setup and mount) and torn down on unmount.
+    let follow;
+    let applyVars;
     onMounted(() => {
-        // Re-seed once mounted — covers the case where the native publisher
-        // populated `__globalProps` between setup and mount.
-        applySystem(readScheme());
-        const sig = systemScheme;
-        if (typeof sig.subscribe === 'function') {
-            unsubscribe = sig.subscribe(() => applySystem(readScheme()));
-        }
+        follow = effect(() => {
+            const following = state.following;
+            const scheme = readScheme();
+            if (!following)
+                return;
+            const next = scheme === 'dark'
+                ? (props.dark ?? pickThemeFor('dark'))
+                : (props.light ?? pickThemeFor('light'));
+            untrack(() => {
+                if (state.name !== next)
+                    state.name = next;
+            });
+        });
+        // Built-in themes are themed by their generated CSS class (applied on
+        // the host below), which resolves on the very first frame. This
+        // `setProperty` path additionally serves runtime-registered themes
+        // (`registerTheme`, no shipped CSS class) — applied once they're
+        // selected post-mount, where it lands reliably. Reading `state.name`
+        // (via buildThemeVars) tracks it, so this re-runs on every theme change.
+        applyVars = effect(() => {
+            const vars = buildThemeVars(state.name);
+            if (typeof lynx !== 'undefined') {
+                lynx.getElementById(hostId)?.setProperty(vars);
+            }
+        });
     });
     onUnmounted(() => {
-        unsubscribe?.();
-        unsubscribe = undefined;
+        follow?.stop();
+        follow = undefined;
+        applyVars?.stop();
+        applyVars = undefined;
     });
     return () => {
-        // Every theme is data. Apply its color tokens as inline CSS custom
-        // properties — Lynx inherits custom properties to descendants, so
-        // component classes resolve `var(--color-*)` against these (the same
-        // mechanism SafeAreaProvider uses for `--sat`/`--sal`). The `daisy`
-        // base class supplies theme-agnostic structural tokens (radius,
-        // sizing); a theme may override roundness via `radius`. The root
-        // background/text are painted from the palette literals (inline
-        // `var()` values don't resolve in Lynx).
+        // Theme COLORS and any radius/size overrides are applied as real,
+        // inheritable CSS custom properties via the Lynx `setProperty` runtime
+        // API (see the `applyVars` effect above) — Lynx does NOT honor custom
+        // properties declared through the inline `style` attribute in this
+        // toolchain. The root background/text are painted here from palette
+        // literals (real properties, not custom props) so the surface is themed
+        // on first paint; descendants resolve `var(--color-*)` once setProperty
+        // has run. The `daisy` base class supplies structural token defaults.
         const palette = colorsOf(state.name) ?? colorsOf('daisy-light');
-        const radius = radiusOf(state.name);
+        // Built-ins ship a generated CSS class, so `state.name` alone paints on
+        // the first frame. A runtime-registered theme has no class — fall back
+        // to its variant's built-in class for the first frame; the `setProperty`
+        // effect above then swaps in its exact palette post-mount.
+        const themeClass = isBuiltInTheme(state.name)
+            ? state.name
+            : `${pickThemeFor(variantOf(state.name) ?? 'light')} ${state.name}`;
         const style = {
             flexGrow: 1,
             flexShrink: 1,
@@ -157,27 +265,10 @@ export const ThemeProvider = component(({ props, slots }) => {
             backgroundColor: palette['base-100'],
             color: palette['base-content'],
         };
-        for (const key in palette) {
-            style[`--color-${key}`] = palette[key];
-        }
-        if (radius) {
-            if (radius.box)
-                style['--rounded-box'] = radius.box;
-            if (radius.btn)
-                style['--rounded-btn'] = radius.btn;
-            if (radius.badge)
-                style['--rounded-badge'] = radius.badge;
-            if (radius.tab)
-                style['--rounded-tab'] = radius.tab;
-            if (radius.selector)
-                style['--rounded-selector'] = radius.selector;
-            if (radius.toggle)
-                style['--rounded-toggle'] = radius.toggle;
-        }
         if (props.style)
             Object.assign(style, props.style);
-        return (_jsx("view", { class: `daisy${props.class ? ' ' + props.class : ''}`, style: style, children: slots.default?.() }));
+        return (_jsx("view", { id: hostId, class: `daisy ${themeClass}${props.class ? ' ' + props.class : ''}`, style: style, children: slots.default?.() }));
     };
 });
 // Re-export registry helpers so consumers only need `@sigx/lynx-daisyui`.
-export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, } from './registry.js';
+export { listThemes, registerTheme, extendTheme, pickThemeFor, pairOf, variantOf, colorsOf, radiusOf, sizesOf, } from './registry.js';

package/dist/theme/registry.d.ts

@@ -17,7 +17,7 @@
  *
  * Structural tokens (radius, sizing, component dimensions) are theme-agnostic
  * and ship once in the bundled `.daisy` base class (`styles/themes/tokens.css`);
- * a theme may override roundness via `radius`.
+ * a theme may override roundness via `radius` and base size units via `sizes`.
  *
  * Colors are engine-safe strings — hex or `rgb()`. Lynx's CSS engine does not
  * parse `oklch()`, so convert before registering.
@@ -26,14 +26,29 @@ import type { DaisyColor } from '../shared/styles.js';
 export type ThemeVariant = 'light' | 'dark';
 /** Full daisy color palette — every semantic token, no holes. */
 export type ThemePalette = Record<DaisyColor, string>;
-/** Roundness token overrides. Defaults live in the bundled `.daisy` base. */
+/**
+ * Roundness token overrides (DaisyUI v5 contract). Emitted as
+ * `--radius-selector` / `--radius-field` / `--radius-box`. Defaults live in
+ * the bundled `.daisy` base.
+ */
 export interface ThemeRadius {
+    /** Small selectable controls — checkbox, toggle, badge. */
+    selector?: string;
+    /** Fields — button, input, select, textarea. */
+    field?: string;
+    /** Boxes — card, modal, alert. */
     box?: string;
-    btn?: string;
-    badge?: string;
-    tab?: string;
+}
+/**
+ * Base size-unit overrides (DaisyUI v5 contract). Emitted as
+ * `--size-selector` / `--size-field`; component dimensions are integer
+ * multiples of these. Defaults live in the bundled `.daisy` base.
+ */
+export interface ThemeSizes {
+    /** Base unit for selector controls (checkbox, toggle, badge). */
     selector?: string;
-    toggle?: string;
+    /** Base unit for fields (button, input, select). */
+    field?: string;
 }
 export interface Theme {
     /** Unique id — also the value of `theme.name`. */
@@ -49,7 +64,16 @@ export interface Theme {
     pair?: string;
     /** Optional roundness overrides; unspecified tokens fall back to `.daisy`. */
     radius?: ThemeRadius;
+    /** Optional base size-unit overrides; unspecified tokens fall back to `.daisy`. */
+    sizes?: ThemeSizes;
 }
+/**
+ * Whether `name` is a built-in theme that ships a CSS class — i.e. it paints
+ * correctly on the first frame. Runtime-registered themes return `false`;
+ * `<ThemeProvider>` falls back to their variant's built-in class for first
+ * paint and swaps in the exact palette via `setProperty`.
+ */
+export declare function isBuiltInTheme(name: string | undefined): boolean;
 /**
  * All registered themes in insertion order. Returns a shallow copy so callers
  * can't mutate the internal registry — re-registration goes through
@@ -80,6 +104,7 @@ export declare function extendTheme(base: string, patch: {
     pair?: string;
     colors?: Partial<ThemePalette>;
     radius?: ThemeRadius;
+    sizes?: ThemeSizes;
 }): Theme;
 /** The variant of a registered theme, or `undefined` if not registered. */
 export declare function variantOf(name: string | undefined): ThemeVariant | undefined;
@@ -87,6 +112,8 @@ export declare function variantOf(name: string | undefined): ThemeVariant | unde
 export declare function colorsOf(name: string | undefined): ThemePalette | undefined;
 /** The roundness overrides of a registered theme, if any. */
 export declare function radiusOf(name: string | undefined): ThemeRadius | undefined;
+/** The base size-unit overrides of a registered theme, if any. */
+export declare function sizesOf(name: string | undefined): ThemeSizes | undefined;
 /**
  * Pick a default theme for a given system color scheme — the first registered
  * theme of that variant (`daisy-light` / `daisy-dark` under the seeded

package/dist/theme/registry.js

@@ -89,6 +89,23 @@ const registry = [
         },
     },
 ];
+/**
+ * Names of the themes seeded at module load — the built-ins that ship a
+ * generated CSS class (`scripts/gen-theme-css.mjs`). Captured before any
+ * runtime `registerTheme()`, so it distinguishes "has a first-paint CSS class"
+ * from runtime-registered themes (which only have their palette as data and
+ * apply via `setProperty` post-mount).
+ */
+const BUILTIN_NAMES = new Set(registry.map((t) => t.name));
+/**
+ * Whether `name` is a built-in theme that ships a CSS class — i.e. it paints
+ * correctly on the first frame. Runtime-registered themes return `false`;
+ * `<ThemeProvider>` falls back to their variant's built-in class for first
+ * paint and swaps in the exact palette via `setProperty`.
+ */
+export function isBuiltInTheme(name) {
+    return name != null && BUILTIN_NAMES.has(name);
+}
 /**
  * Resolve a `theme.name` to its registered `Theme`. Supports multi-class names
  * like `'daisy-light daisy-rounded'` by matching the first registered id found.
@@ -147,6 +164,7 @@ export function extendTheme(base, patch) {
         pair: patch.pair ?? src.pair,
         colors: { ...src.colors, ...patch.colors },
         radius: patch.radius ?? src.radius,
+        sizes: patch.sizes ?? src.sizes,
     };
 }
 /** The variant of a registered theme, or `undefined` if not registered. */
@@ -161,6 +179,10 @@ export function colorsOf(name) {
 export function radiusOf(name) {
     return findTheme(name)?.radius;
 }
+/** The base size-unit overrides of a registered theme, if any. */
+export function sizesOf(name) {
+    return findTheme(name)?.sizes;
+}
 /**
  * Pick a default theme for a given system color scheme — the first registered
  * theme of that variant (`daisy-light` / `daisy-dark` under the seeded

package/dist/theme/theme-state.d.ts

@@ -0,0 +1,28 @@
+import type { DaisyTheme, ThemeController } from './ThemeProvider.js';
+/** The mutable selection a `ThemeController` reads from and writes to. */
+export interface ThemeState {
+    name: DaisyTheme;
+    following: boolean;
+}
+/**
+ * Build a `ThemeController` over a given state object. Used for both the global
+ * singleton (below) and each nested `<ThemeProvider>`'s local state — same
+ * behaviour, different backing store. `followSystem()` only flips the flag; the
+ * owning provider's follow effect performs the re-apply.
+ */
+export declare function makeThemeController(state: ThemeState): ThemeController;
+/**
+ * The backing signal for the global theme. Read/written by the root
+ * `<ThemeProvider>` and shared with `themeController`; not part of the public
+ * API.
+ * @internal
+ */
+export declare const globalThemeState: import("@sigx/reactivity").Signal<ThemeState>;
+/**
+ * The global theme controller — the headless handle for issue #113. Import and
+ * call from anywhere (no `<ThemeProvider>` ancestor required); `useTheme()`'s
+ * default factory returns this same instance, and the root `<ThemeProvider>`
+ * provides it to its subtree. `StatusBarSync` binds to it so the OS bars always
+ * follow the global/screen theme, never a content sub-scope.
+ */
+export declare const themeController: ThemeController;

package/dist/theme/theme-state.js

@@ -0,0 +1,72 @@
+/**
+ * Global theme state — the headless DI singleton behind `useTheme()`.
+ *
+ * The active selection (current theme name + follow-system flag) lives here as
+ * a module-level signal, mirroring how `./registry.ts` is already a global
+ * module singleton. This is what makes theme control reachable from *headless*
+ * code — a store, a service, app-boot logic, an effect — not just from a
+ * component mounted under `<ThemeProvider>`.
+ *
+ * The root `<ThemeProvider>` (depth 0) binds to this state: it renders its host
+ * view from it, owns the system-color-scheme follow effect that writes to it
+ * while `following`, and seeds an `initial` prop into it. Nested providers
+ * (depth >= 1) build their own local state via `makeThemeController` so a
+ * subtree can be overridden without touching the global — see
+ * `./ThemeProvider.tsx`.
+ *
+ * `followSystem()` here only flips the flag; the actual re-apply on an OS color
+ * scheme change is driven by the root provider's follow effect (which has the
+ * appearance signal in scope).
+ */
+import { signal } from '@sigx/lynx';
+import { pairOf, pickThemeFor } from './registry.js';
+/**
+ * Build a `ThemeController` over a given state object. Used for both the global
+ * singleton (below) and each nested `<ThemeProvider>`'s local state — same
+ * behaviour, different backing store. `followSystem()` only flips the flag; the
+ * owning provider's follow effect performs the re-apply.
+ */
+export function makeThemeController(state) {
+    return {
+        get name() {
+            return state.name;
+        },
+        get followingSystem() {
+            return state.following;
+        },
+        set(next) {
+            state.name = next;
+            state.following = false;
+        },
+        toggle() {
+            state.name = pairOf(state.name);
+            state.following = false;
+        },
+        followSystem() {
+            state.following = true;
+        },
+    };
+}
+// Object signal (not primitive) so the `DaisyTheme` literal union survives —
+// `signal<T>` widens primitive literals to plain `string` via `Widen<T>`.
+// Seeded to a sane default; the root <ThemeProvider> re-seeds from the system
+// color scheme + its props on mount.
+const state = signal({
+    name: pickThemeFor('light'),
+    following: true,
+});
+/**
+ * The backing signal for the global theme. Read/written by the root
+ * `<ThemeProvider>` and shared with `themeController`; not part of the public
+ * API.
+ * @internal
+ */
+export const globalThemeState = state;
+/**
+ * The global theme controller — the headless handle for issue #113. Import and
+ * call from anywhere (no `<ThemeProvider>` ancestor required); `useTheme()`'s
+ * default factory returns this same instance, and the root `<ThemeProvider>`
+ * provides it to its subtree. `StatusBarSync` binds to it so the OS bars always
+ * follow the global/screen theme, never a content sub-scope.
+ */
+export const themeController = makeThemeController(state);

package/dist/theme/use-screen-theme.d.ts

@@ -0,0 +1,3 @@
+import type { DaisyTheme } from './ThemeProvider.js';
+/** Pin the global theme to `name` while this screen is focused; restore on blur. */
+export declare function useScreenTheme(name: DaisyTheme): void;

package/dist/theme/use-screen-theme.js

@@ -0,0 +1,42 @@
+/**
+ * `useScreenTheme(name)` — pin the **global** daisy theme while a navigation
+ * screen is focused, restoring the previous selection when it blurs.
+ *
+ * This is the right tool for *per-screen* theming — "this screen is dark, that
+ * one is light." Because it drives the global theme (not a content sub-scope),
+ * the OS status/navigation bars follow automatically via `<StatusBarSync>`, so
+ * the bar icons stay legible against each screen's background. For recoloring a
+ * *region within* a screen without touching the bars, nest a `<ThemeProvider>`
+ * instead.
+ *
+ * Built on `useFocusEffect` from `@sigx/lynx-navigation` (an optional peer
+ * dependency): it must be called from inside a component rendered as a route by
+ * `<Stack>` / `<Tabs>` — the same constraint as `useFocusEffect`/`useIsFocused`.
+ *
+ * Save/restore composes with the stack (LIFO focus/blur): pushing a themed
+ * screen saves whatever was live, applies its own theme, and restores on pop —
+ * including resuming follow-system if that's what was active.
+ *
+ * ```tsx
+ * const Gallery = component(() => {
+ *     useScreenTheme('daisy-dark'); // dark while this screen is on top
+ *     return () => <view>…</view>;
+ * });
+ * ```
+ */
+import { useFocusEffect } from '@sigx/lynx-navigation';
+import { themeController } from './theme-state.js';
+/** Pin the global theme to `name` while this screen is focused; restore on blur. */
+export function useScreenTheme(name) {
+    useFocusEffect(() => {
+        const prevName = themeController.name;
+        const prevFollowing = themeController.followingSystem;
+        themeController.set(name);
+        return () => {
+            if (prevFollowing)
+                themeController.followSystem();
+            else
+                themeController.set(prevName);
+        };
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/lynx-daisyui",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "DaisyUI integration for sigx-lynx",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,15 +37,15 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@sigx/lynx": "^0.4.2",
-    "@sigx/lynx-appearance": "^0.4.2",
-    "@sigx/lynx-icons": "^0.4.2",
-    "@sigx/lynx-motion": "^0.4.2",
-    "@sigx/lynx-gestures": "^0.4.2"
+    "@sigx/lynx": "^0.4.4",
+    "@sigx/lynx-appearance": "^0.4.4",
+    "@sigx/lynx-gestures": "^0.4.4",
+    "@sigx/lynx-icons": "^0.4.4",
+    "@sigx/lynx-motion": "^0.4.4"
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.0 || ^4.0.0",
-    "@sigx/lynx-navigation": "^0.4.2"
+    "@sigx/lynx-navigation": "^0.4.4"
   },
   "peerDependenciesMeta": {
     "@sigx/lynx-navigation": {
@@ -56,7 +56,7 @@
     "@typescript/native-preview": "7.0.0-dev.20260521.1",
     "tailwindcss": "^4.0.0",
     "typescript": "^6.0.3",
-    "@sigx/lynx-navigation": "^0.4.2"
+    "@sigx/lynx-navigation": "^0.4.4"
   },
   "publishConfig": {
     "access": "public"
@@ -72,7 +72,7 @@
   "author": "Andreas Ekdahl",
   "license": "MIT",
   "scripts": {
-    "build": "node ../../scripts/clean.mjs dist && tsgo && node ../../scripts/copy-assets.mjs src/styles dist/styles",
+    "build": "node ../../scripts/clean.mjs dist && tsgo && node ../../scripts/copy-assets.mjs src/styles dist/styles && node scripts/gen-theme-css.mjs",
     "dev": "tsgo --watch",
     "clean": "node ../../scripts/clean.mjs dist .turbo"
   }