# color-scheme
> Sets `color-scheme`, which tells the browser which schemes an element renders correctly in, so the chrome the browser paints itself — scrollbars, pickers, form controls — follows the theme.
```ts
import { colorScheme } from "@sdxc/u/color";
```
Sets `color-scheme`, which tells the browser which schemes an element
renders correctly in, so the chrome the browser paints itself — scrollbars,
pickers, form controls — follows the theme. It inherits: set it on ``.
## Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
| --- | --- |
| `u.colorScheme()` | `css({ colorScheme: "light dark" })` |
| `u.colorScheme("dark")` | `css({ colorScheme: "dark" })` |
| `u.colorScheme("only light")` | `css({ colorScheme: "only light" })` |
## Examples
### Basic example
Use `colorScheme` to tell the browser which scheme an element renders in, so the controls, scrollbars and system colors it paints follow it:
```tsx
```
### Following the reader's preference
Call `colorScheme()` with no argument to declare both schemes, so native controls follow the reader's system setting; set it once on ``:
```tsx
```
## Applying on a state
Wrap the call in a state utility to scope it to one selector.
```ts
u.hover(u.colorScheme())
```
## Responsive design
Wrap the call in a container query to scope it to one width.
```ts
u.at("md", u.colorScheme())
```
## Signature
```ts
u.colorScheme(value?: ColorSchemeValue)
```