React Native Theming
Define theme tokens and switch light, dark, system, or named themes in React Native without React re-renders.
React Native Theming
Nitrowind extracts CSS variable maps from your stylesheet, registers every theme name with the runtime, and updates linked native nodes when the active theme changes.
Theme sources
@theme {
--color-surface: #ffffff;
--color-text: #111827;
--color-accent: #0f766e;
}
.dark {
--color-surface: #09090b;
--color-text: #f9fafb;
}
.theme-ocean {
--color-surface: #ecfeff;
--color-text: #083344;
--color-accent: #0891b2;
}
[data-theme='sunset'] {
--color-surface: #fff7ed;
--color-text: #431407;
--color-accent: #ea580c;
}| Selector | Theme name |
|---|---|
@theme { ... } | Base theme, normally light |
:root { ... } | Base theme |
.light { ... } | light |
.dark { ... } | dark |
.theme-ocean { ... } | ocean |
[data-theme="sunset"] { ... } | sunset |
@media (prefers-color-scheme: dark) { :root { ... } } | dark |
Named themes inherit from the base theme. Define common tokens once in
@theme, then override only the tokens that change.
Using theme tokens
<View className="bg-surface">
<Text className="text-text">Theme-aware text</Text>
</View>When the theme changes, the native engine recomputes classes that read theme variables and commits updated props to linked nodes.
Adaptive and named themes
By default, the runtime follows the system color scheme and maps it to light
or dark. You can also select a named theme directly.
import { useNitrowind } from '@nitrofoundation/nitrowind';
function ThemeButton() {
const { themeName, setTheme, setColorScheme } = useNitrowind();
return (
<View className="gap-3">
<Text className="text-text">Current theme: {themeName}</Text>
<Button title="Ocean" onPress={() => setTheme('ocean')} />
<Button title="Sunset" onPress={() => setTheme('sunset')} />
<Button title="System" onPress={() => setColorScheme('system')} />
</View>
);
}setTheme(name) selects a named theme and stops following color-scheme
changes. setColorScheme('light' | 'dark' | 'system') returns to adaptive
color-scheme behavior.
Classes that read theme variables carry a Theme dependency. The native
engine can resolve and commit those changes to the ShadowTree without
re-rendering the React component tree.