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 { 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

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.