Composables
useColorMode
Reactive light/dark/system color mode singleton that drives dark mode across the app.
Overview
useColorMode (from @vyui/kit) is a module-level singleton — one color mode per app, shared across every call site, no provide/inject needed.
import { useColorMode } from '@vyui/kit'
const { mode, isDark, setMode, toggle } = useColorMode()
Returns
| Property | Type | Description |
|---|---|---|
mode | Ref<'light' | 'dark' | 'system'> | The requested mode. Defaults to 'system'. Writable directly, or via setMode. |
isDark | ComputedRef<boolean> | Resolved dark state. Folds 'system' to the OS appearance on web (matchMedia). Always false on Lynx native today — there's no stable native appearance signal exposed yet. |
setMode | (next: ColorMode) => void | Pins an explicit mode. |
toggle | () => void | Flips between light and dark based on what's currently shown, not the mode value. Calling it while mode is 'system' pins to the opposite of whatever isDark currently resolves to — there's no "toggle from system" state. |
The app-root contract
Binding mode and isDark only takes effect where you flow them onto the view tree. See Theming → Dark Mode for the full :class + :key contract, and reach for VyApp to get it for free.