browser-color-scheme
Reads the user's OS-level prefers-color-scheme preference and keeps it in sync via a media-query listener. Exposes the raw value plus boolean selectors.
Install
bun add @valdres/browser-color-schemeLive example
Loading demo…
Usage
import { useValue } from "valdres-vue"
import { colorSchemeAtom } from "@valdres/browser-color-scheme"
const scheme = useValue(colorSchemeAtom) // Ref<"dark" | "light">Exports
| Export | Kind | Type |
|---|---|---|
colorSchemeAtom | atom (read-only) | "dark" | "light" |
isDarkSelector | selector | boolean |
isLightSelector | selector | boolean |
Cross-framework
A global atom plus derived selectors — works in every framework. For full theme management (system preference + user override + persistence), use @valdres/color-mode, which builds on top of this.