ThemeProvider#

Wraps a subtree and applies the active theme's palette as real, inheritable CSS custom properties (via the Lynx setProperty runtime API), so descendants inherit the theme's color, radius, and text tokens. Mount it once near the root of your app.

Import#

import { ThemeProvider } from '@sigx/lynx-zero';

Basic Usage#

A theme is a named palette registered at module load with registerTheme. Pin a single theme with initial, then mount the provider once near the root. The root provider (depth 0) binds the global singleton theme state, so headless themeController mutations render and the OS bars track it.

import { ThemeProvider, StatusBarSync } from '@sigx/lynx-zero';

function App() {
  return (
    <ThemeProvider initial="my-light">
      <StatusBarSync />
      {/* app tree */}
    </ThemeProvider>
  );
}

Following the system scheme#

To track the OS light/dark setting, give the provider a light / dark pair instead of a pinned initial — the subtree recolors automatically when the OS scheme flips.

import { ThemeProvider } from '@sigx/lynx-zero';

function App() {
  return (
    <ThemeProvider light="my-light" dark="my-dark">
      {/* recolors automatically when the OS scheme flips */}
    </ThemeProvider>
  );
}

Nested providers and font scale#

Nested providers are content sub-scopes — they recolor only their own subtree, which is handy for a preview pane or a deliberately inverted section. fontScale seeds the initial text-scale multiplier, re-emitting the --text-* ramp at defaultPx * scale.

import { ThemeProvider, Col, Center } from '@sigx/lynx-zero';

function PreviewPane() {
  return (
    <Col flex={1} background="base-100">
      {/* this section is themed independently of the root */}
      <ThemeProvider initial="my-dark" fontScale={1.2}>
        <Center flex={1} background="base-200" borderRadius={12}>
          <view class="text-base-content">Inverted preview</view>
        </Center>
      </ThemeProvider>
    </Col>
  );
}

Read and mutate the active theme inside the provider with useTheme, which returns the nearest provider's controller (falling back to the global one).

import { useTheme } from '@sigx/lynx-zero';

function ThemeToggle() {
  const theme = useTheme();
  return (
    <view bindtap={() => theme.toggle()}>
      <view class="text-base-content">Theme: {theme.name}</view>
    </view>
  );
}

Props#

ThemeName is string & {} — a plain string a DS layers a literal union on top of for autocomplete; multi-class names (e.g. 'daisy-light daisy-rounded') are accepted.

Slots#

See also#

• StatusBarSync — keeps the OS status/nav-bar tint legible against the active theme; mount once inside the root provider.
• API reference — useTheme, themeController, the theme registry and color helpers.
• Usage — the theme engine end to end, including per-screen theming.