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" />

Accents

Primary is neutral ink by default — near-black on light, near-white on dark — so colour belongs to content, not chrome. Give a component, a screen or a whole flow its own colour with Accent: every bg-primary, text-primary-text, focus ring and useTheme().colors.primary below it follows, in both schemes. One accent per screen.

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

<Accent color="blue">
  <Button>Send $240.00</Button>
</Accent>

<Accent color="#FF5A1F">…</Accent>  // any hex — text colour picked by contrast

Curated accents clear WCAG AA for their on-colour, with a lifted tint for accent-coloured text on dark surfaces:

Token reference

Every semantic token and its value in both modes — these are the source values, not a copy. copy table

Chart palette

Categorical series — colors.chart1…chart5 in code, bg-chart-1…bg-chart-5 in className. Pink, teal, lime, red, amber — no blue or purple — tuned per mode (light shown):

<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.

Category tints

Content colour that is not the accent — settings icon tiles, avatars, tags, legend dots. Twelve hues tuned as one family (equal visual weight, white glyphs read on all but amber and lime) and lifted slightly in dark mode, so tiles follow the scheme. Use bg-tint-orange instead of raw Tailwind palette classes like bg-orange-500; in code, colors.tintOrange (or <Icon color="tintOrange" />). Light, then dark:

<View className="h-8 w-8 items-center justify-center rounded-lg bg-tint-orange">
  <Icon name="plane" size="sm" color="#FFFFFF" />
</View>

Own tailwind config: tint: { red: 'hsl(var(--tint-red) / <alpha-value>)', … } with the --tint-* vars from the kitchen-sink global.css.

Radius

One scale everywhere — swatches render the real corner values:

Touch targets follow platform guidelines: ios 44pt · android 48dp.

Dark mode

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

// ask an llm chatgpt ↗ · claude ↗