useDark

v0.0.15testeddemo

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