# ColorSchemeProvider
Keeps the page's color scheme: it applies the person's choice (`light`, `dark` or `system`) as the `.dark` class on ``, which is how shadcn themes switch, keeps it in `localStorage`, and follows the system's setting live while the choice is `system`. Every `ColorSchemeToggle` and `useColorScheme` under it share its options.
```tsx
import { ColorSchemeProvider } from "@/lib/ouro/color-scheme";
```
## Example
```tsx
// app/root.tsx (React Router):
```
## Usage
Wrap the app once, in the root layout, and put `colorSchemeScript()` in `` so the first paint already has the scheme. Ouro UI components need neither: without them, dark mode is whatever `.dark` class the app sets.
## Props
Type: `ColorSchemeProviderProps`.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` (required) | `ReactNode` | | Your app, or the part of it that shows the scheme. |
| `defaultScheme` | `"system" \| "light" \| "dark"` | `"system"` | The scheme before a person chooses one. |
| `storageKey` | `string` | `"ouro-color-scheme"` | The `localStorage` key that keeps the choice. |