title: Theming overview

Theming overview

Every template uses the same theming philosophy: design tokens in global.css under @theme, no hardcoded hex values in components.

How tokens work

/* global.css */
@theme {
  --color-primary: 0 0 0;
  --color-background: 255 255 255;
  --color-foreground: 17 17 17;
  /* ...more tokens */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: 255 255 255;
    --color-background: 17 17 17;
  }
}

Components reference tokens via NativeWind utilities:

<View className="bg-primary text-primary-foreground rounded-md p-4">
  <Text className="font-bold uppercase">Tap me</Text>
</View>

Customizing

  1. Rebrand: edit global.css, change the primary/accent values
  2. Extend: add new tokens to @theme, NativeWind picks them up automatically
  3. Dark mode: add the token to @media (prefers-color-scheme: dark) block

See: