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

bun add @valdres/color-mode

Live example

Usage

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

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

Exports

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.