useDark

v0.0.14testeddemo

Reactive dark mode boolean with system detection and storage persistence, built on useColorMode. Writing false while the system already prefers light (or true while it prefers dark) falls back to 'auto', so the mode keeps tracking the OS preference.

Source Tests

Examples

const isDark = useDark();
isDark.value = true;

// Toggle a data attribute instead of a class
const isDark = useDark({
  attribute: 'data-theme',
  valueDark: 'dark',
  valueLight: 'light',
});

import { useToggle } from '@/composables/state/useToggle';

const isDark = useDark();
const toggleDark = useToggle(isDark);

Demo

Loading demo…

Signature

export function useDark(options: UseDarkOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`options`?	`UseDarkOptions`	`{}`	Options

Returns

UseDarkReturnA writable boolean ref; true when dark mode is active