Ouro HXActions
useColorScheme
The person's color scheme, the scheme the page shows, and the setter that changes both, for a control of your own. ColorSchemeToggle is that control, ready made.
import { useColorScheme } from "@/lib/ouro/color-scheme";Example
const { resolved, setScheme } = useColorScheme();
<Switch label="Dark mode" checked={resolved === "dark"} onCheckedChange={(on) => setScheme(on ? "dark" : "light")} />Usage
It works with or without ColorSchemeProvider, with the provider's options when there is one. Before hydration it reports the default scheme, as the server did.
Returns
ColorSchemeValue
Types
ColorSchemeValue
What useColorScheme returns.
interface ColorSchemeValue {
/** The person's choice: `light`, `dark` or `system`. */
scheme: ColorScheme;
/** The scheme the page shows: `system` resolved through the system's setting. */
resolved: ResolvedColorScheme;
/** Keeps a new choice and applies it to the page at once. */
setScheme: (scheme: ColorScheme) => void;
}