Theming

Tokens are CSS variables declared under @variant light / @variant dark in the library's theme.css. Components reference semantic names and never a raw palette colour or a dark: prefix — the variable swap handles the theme.

The palette

Overriding a token

Redeclare it in your own CSS, after the library's import.

@import "@delacour/native-ui/styles";

@layer theme {
  :root {
    @variant light {
      --color-primary: #1d4ed8;
      --color-primary-foreground: #ffffff;
    }
    @variant dark {
      --color-primary: #60a5fa;
      --color-primary-foreground: #0a0a0a;
    }
  }
}

Reading a colour from JavaScript

A class cannot express a literal (#EC4899) and cannot reach an SVG paint prop like a gradient's stopColor. For a prop that needs a colour value, use useThemeColor.

import { useThemeColor } from "@delacour/native-ui/hooks/use-theme-color";

const danger = useThemeColor("danger");

Theming a navigator

A navigator paints its own chrome from its own theme, and nothing connects that to these tokens. expo-router mounts its NavigationContainer with no theme, so React Navigation's light default stands however dark your app is. On iOS the native stack hands colors.background to the UINavigationController's view — the slab visible between cards during a push, and at their rounded corners. That layer has no escape hatch: a contentStyle in screenOptions cannot reach it. Only a theme fixes it.

import { NavigationTheme } from "@delacour/native-ui/expo/navigation-theme";

<DelacourProvider>
  <NavigationTheme>
    <Stack />
  </NavigationTheme>
</DelacourProvider>;

On a different navigator, use the hook directly. It returns plain values, not a Theme — the library imports nothing from a navigation package.

import { useNavigationTheme } from "@delacour/native-ui/hooks/use-navigation-theme";

const { dark, ...colors } = useNavigationTheme();

<NavigationContainer theme={{ ...DefaultTheme, dark, colors: { ...DefaultTheme.colors, ...colors } }}>

Spread them over the framework's own base theme, which also supplies fonts — a platform-specific shape that would drift if restated here.