# Theming Runtime

> Apply your tokens with <ThemeProvider> and consume them with typed hooks.

`rastack/theme` is the runtime side of the design system. `<ThemeProvider tokens={…}>` injects the CSS variables and manages light, dark, and custom modes.

```tsx title="app/_layout.tsx"
import { ThemeProvider, useToken, useThemeMode } from "rastack/theme";
import { theme } from "@/tokens";

function ModeToggle() {
  const { mode, setMode } = useThemeMode();
  const brand = useToken("color.brand.500");
  return <Button color={brand} onPress={() => setMode(mode === "dark" ? "light" : "dark")} />;
}

export default function App() {
  return (
    <ThemeProvider tokens={theme}>
      <Routes />
    </ThemeProvider>
  );
}
```

## The consumer hooks

| Hook | Returns |
| --- | --- |
| `useToken(path)` | a token's `var(--…)` reference for a given `TokenPath` |
| `useTokenValue(path)` | the resolved concrete value |
| `useThemeMode()` | `{ mode, setMode }` for switching modes |
| `useTheme()` | the whole typed `theme` tree |

> **Note:** Mode switches recascade via CSS variables with **no re-render** — exactly like `RAStackProvider` relocates the data engine without re-rendering your hooks.

---

_Source: [https://reactapistack.com/docs/theming](https://reactapistack.com/docs/theming) · Full docs as one file: [llms-full.txt](https://reactapistack.com/llms-full.txt)_