Theming

Semantic tokens + NativeWind. Light and dark out of the box.

Provider

import { ThemeProvider } from "@lumioui/core";

<ThemeProvider forcedScheme="dark">
  <App />
</ThemeProvider>

forcedScheme overrides system. themeOverrides merges custom colors. useTheme().colors only when a color can't be a class (e.g. ActivityIndicator, interpolateColor).

Classes

<View className="bg-card border-border rounded-2xl" />
<Text className="text-foreground text-sm" />
<Text className="text-muted-foreground" />

Tokens: background, foreground, card, primary, secondary, muted, accent, destructive, success, warning, border, input, ring, overlay.

Chart palette

Categorical series — colors.chart1…chart5 in code, bg-chart-1…bg-chart-5 in className. Royal, cyan, violet, pink, amber — the same hues as this site's accents, tuned per mode:

<BarChart data={week} palette={[colors.chart1, colors.chart3]} />
<View className="h-2.5 w-2.5 rounded-full bg-chart-2" />

Own tailwind config needs the mapping (kitchen-sink ships it): chart: { 1: 'hsl(var(--chart-1) / <alpha-value>)', … } with --chart-1…--chart-5 HSL vars in :root and .dark.

Dark mode

Tailwind darkMode: "class". Kitchen-sink toggles via ?theme=dark|light and setSchemeOverride(). Respect useReducedMotion() in custom animations.