UtilityThemeSwitcher

Light, dark or system theme, written as data-theme on the page and remembered.

import { UtilityThemeSwitcher } from '@zairakai/vue-components/Utility'

Usage

<UtilityThemeSwitcher />

Props

Name	Type	Default	Description
id	string
class	string
modelValue	string	undefined	"light", "dark" or "system".
storageKey	string	'zk-theme'	Where the choice is remembered. Empty for nowhere.
attribute	string	'data-theme'	Where the theme is written, as the data-theme attribute. The page itself by default.
modes	array	['light', 'dark', 'system']
labels	object	{ light: 'Light', dark: 'Dark', system: 'System' }
label	string	'Theme'

Events

Name	Description
update:modelValue
change

Slots

Name	Description
mode

See Theming for the class hooks and the data-* state of the components.