useDarkTheme

Creates persistent dark-theme state backed by local storage. The returned ref controls whether the document has the dark attribute, and toggle() flips that state for UI switches or menu actions.

The stored preference is applied as soon as the composable runs, so a visitor who chose dark on a previous visit gets it on the first render without any startup code. It is applied again on every change.

Importing

import { useDarkTheme } from '@almighty-shogun/common';

Usage

import { useDarkTheme } from '@almighty-shogun/common';

const { darkMode, toggle } = useDarkTheme();

toggle();

Parameters

key?: string
Local-storage key used to persist the dark-mode state.
Default: application-theme

Returns

darkMode: Ref<boolean>
Current dark-mode state.

toggle(): void
Flips darkMode and applies the new state to the document.

Uses

• setDarkTheme
• useLocalStorage

Type signature

declare function useDarkTheme(key?: string): UseDarkTheme;

type UseDarkTheme = {
    readonly darkMode: Ref<boolean>;

    toggle(): void;
};