# 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/angular/plugins/color-mode](https://valdres.dev/angular/plugins/color-mode)

## Usage

```ts
import { Component } from "@angular/core"
import { injectValue } from "valdres-angular"
import { colorModeSelector } from "@valdres/color-mode"

@Component({
    selector: "theme-label",
    template: `{{ mode() }}`,
})
export class ThemeLabel {
    mode = injectValue(colorModeSelector) // Signal<"light" | "dark">
}
```

## 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.