# color-mode

Resolves the active color mode from the OS preference (`prefers-color-scheme`) and a user override. `userSelectedColorModeAtom` is settable (`"light" | "dark" | "system"`); `colorModeSelector` returns the resolved `"light" | "dark"`.

## Install

```bash
bun add @valdres/color-mode
```

## Live example

▶ Live example: [https://valdres.dev/solid/plugins/color-mode](https://valdres.dev/solid/plugins/color-mode)

## Usage

```tsx
import { createValue } from "valdres-solid"
import { colorModeSelector } from "@valdres/color-mode"

function Theme() {
    const mode = createValue(colorModeSelector) // () => "light" | "dark"
    return <span>{mode()}</span>
}
```

## Exports

| Export                      | Kind             | Type                            |
| --------------------------- | ---------------- | ------------------------------- |
| `colorModeSelector`         | selector         | `"light" \| "dark"`             |
| `isDarkModeSelector`        | selector         | `boolean`                       |
| `isLightModeSelector`       | selector         | `boolean`                       |
| `systemColorModeAtom`       | atom (read-only) | `"light" \| "dark"`             |
| `userSelectedColorModeAtom` | atom (settable)  | `"light" \| "dark" \| "system"` |
| `getSystemColorMode`        | util fn          | `() => "light" \| "dark"`       |
| `ColorMode`                 | type             | `"light" \| "dark"`             |
| `UserSelectedColorMode`     | type             | `"light" \| "dark" \| "system"` |

## Cross-framework

Global atoms and selectors — only the read primitive's name changes per framework. The `prefers-color-scheme` listener starts on the first subscriber and stops when the last one leaves.