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

<script>
import { watch } from "valdres-svelte"
import { colorModeSelector } from "@valdres/color-mode"

const mode = watch(colorModeSelector)
</script>

{mode.value}

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.