Hooks

useTheme()

Returns the active theme tokens. Use it in custom components.

import { useTheme } from "@/theme";

function Dot() {
  const theme = useTheme();
  return <View style={{ width: 8, height: 8, backgroundColor: theme.colors.primary }} />;
}

For most styling, prefer createStyles — it caches the StyleSheet per scheme:

import { createStyles } from "@/utils/use-styles";

const useStyles = createStyles((t) => ({
  base: { backgroundColor: t.colors.surface, padding: t.spacing.lg },
}));

useThemeMode()

Returns { scheme, override, setScheme, isDark }. Use it to build a light/dark/system toggle.

import { useThemeMode } from "@/theme";
import { Switch } from "@/components/ui/switch";

function ThemeToggle() {
  const { isDark, setScheme } = useThemeMode();
  return (
    <Switch
      value={isDark}
      onValueChange={(v) => setScheme(v ? "dark" : "light")}
    />
  );
}

setScheme("system") returns to following the OS.

ThemeProvider props

<ThemeProvider
  defaultScheme="system"           // "light" | "dark" | "system" (default)
  onOverrideChange={(o) => save(o)} // persist to AsyncStorage / MMKV
>
  <App />
</ThemeProvider>

cn() helper

A small style-array helper. Drops falsy values so you don’t have to read past the booleans.

import { cn } from "@/utils/cn";

<View style={cn(styles.base, pressed && styles.pressed, disabled && styles.disabled, style)} />