RecipesRecipe
System Mode
Respect the user's OS-level dark/light preference and update automatically when it changes.
- Goal
- Respect the user's OS-level dark/light preference and update automatically when it changes.
- Prerequisites
- @themvora/core installed
- Theme runtime configured with defaultMode
- Stack
- Any framework
- Result
- Theme automatically matches OS preference
1Install
Pick your package manager — the command updates to match.
Install command
Needs
@themvora/corepnpm add @themvora/coreUsing a framework? Its adapter is a separate package — see the framework guides for the provider setup, then come back for the pattern.
2Implement
Drop this into your project. It is the whole pattern — no other setup is required.
import { createThemeRuntime } from "@themvora/core";
const runtime = createThemeRuntime({
defaultTheme: "system", // Respects prefers-color-scheme
});3Why this works
Setting defaultTheme to "system" enables automatic theme resolution based on the CSS media query prefers-color-scheme. The theme will update when the user changes their OS theme preference. Caveats: - Without JavaScript, the fallback theme (light) is shown initially - System mode requires JavaScript to resolve the preference on first paint
4Verify
- The page loads with no console errors after the change.
- The outcome holds: theme automatically matches OS preference
- Toggling the theme in your app still works, and the state survives a reload if persistence is configured.
- Reduced-motion users see no animation if you enabled transitions.
Common failure
The most frequent cause is a prerequisite that is only half met — an adapter installed without the framework it wraps, or a provider mounted above the component that reads the theme. Re-read the prerequisites above, then confirm the provider wraps the tree that uses the value.