≡
R
React API Stack
GitHub
Design System
/
Theming Runtime
Theming Runtime
Apply your tokens with <ThemeProvider> and consume them with typed hooks.
View as Markdown
llms.txt
rastack/theme is the runtime side of the design system. <ThemeProvider tokens={…}> injects the CSS variables and manages light, dark, and custom modes.
app/_layout.tsx
tsx · copy
1
import
{
ThemeProvider
,
useToken
,
useThemeMode
}
from
"rastack/theme"
;
2
import
{
theme
}
from
"@/tokens"
;
3
4
function
ModeToggle
()
{
5
const
{
mode
,
setMode
}
=
useThemeMode
();
6
const
brand
=
useToken
(
"color.brand.500"
);
7
return
<
Button
color
={
brand
}
onPress
={()
=>
setMode
(
mode
===
"dark"
?
"light"
:
"dark"
)}
/>;
8
}
9
10
export
default
function
App
()
{
11
return
(
12
<
ThemeProvider
tokens
={
theme
}>
13
<
Routes
/>
14
</
ThemeProvider
>
15
);
16
}
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
› Good to know
Mode switches recascade via CSS variables with no re-render — exactly like RAStackProvider relocates the data engine without re-rendering your hooks.
← Previous
Design Tokens
Next →
Overview
Build with AI
Every page is available as clean Markdown for LLMs and coding agents. Point one at the files below to build on top of React API Stack.
This page as Markdown
llms.txt
llms-full.txt
GitHub
React API Stack · alpha · built to scale to millions