Theming

On the web, Kit is themed with --gbs-* CSS variables. React Native has no CSS cascade, so the same tokens are a JavaScript object you pass to KitProvider. The names match (camelCase), and so does the default palette, so a brand set once in Figma themes both.

Your theme

The first native install writes gbs.theme.ts. It is yours, and Kit never overwrites it:

import type { KitTheme } from "./shared/native";
 
export const theme: KitTheme = {
  // One set for both schemes:
  accent: "#7c3aed",
  radius: 10,
};

Or set the schemes separately:

export const theme: KitTheme = {
  light: { accent: "#7c3aed" },
  dark: { accent: "#a78bfa" },
};

KitProvider follows the device's light/dark setting. Force one with colorScheme="light" or "dark".

Tokens

Colours are hex, so components can mix them for pressed states and tints. A non-hex value still works; it just is not mixed.

raised is the surface of elevated cards, sheets and menus. It is lighter than bg in dark mode, because shadows barely show on a near-black screen. touchTarget is the smallest height of anything tappable: 44 suits iOS, and 48 matches Material.

Per component

Every component takes style for its root and styles for its parts, the native stand-ins for className and classNames. Either can be a function of the component's state, which replaces the web's data-* attributes:

<Button
  style={({ pressed }) => ({ transform: [{ scale: pressed ? 0.98 : 1 }] })}
  styles={{ label: { letterSpacing: 0.5 } }}
>
  Save
</Button>

In your own components

import { useKitTheme } from "@/component-lib/shared/native";
 
function Price({ amount }: { amount: string }) {
  const { tokens } = useKitTheme();
  return <Text style={{ color: tokens.fg, fontSize: tokens.fontSize + 4 }}>{amount}</Text>;
}