# 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. ```tsx import { useColorScheme } from "@/lib/ouro/color-scheme"; ``` ## Example ```tsx const { resolved, setScheme } = useColorScheme(); 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. ```ts 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; } ```