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 setup>
import { useValue } from "valdres-vue"
import { colorModeSelector } from "@valdres/color-mode"

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

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

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.