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

## Usage

```vue
<script setup>
import { useValue } from "valdres-vue"
import { colorModeSelector } from "@valdres/color-mode"

const mode = useValue(colorModeSelector) // Ref<"light" | "dark">
</script>

<template>{{ mode }}</template>
```

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