Theme Switcher

PThemeSwitcher

PThemeSwitcher gives users a light/dark toggle. Use useTheme when you want to read or set the same value yourself.

Switcher

vue

<p-theme-switcher />

Composable

import { useTheme } from "@ontic/pear";

const { theme, toggleTheme } = useTheme();

theme.value = "dark";
toggleTheme();

API

Name	Type	Default	Description
`PThemeSwitcher`	`component`	-	Renders a light/dark theme toggle button.
`useTheme`	`() => { theme: Ref<'light' \| 'dark'>, toggleTheme: () => void }`	-	Reads, writes, and toggles the current theme.
`storage`	`'pear-theme'`	-	Theme preference is persisted to localStorage when available.
`document attribute`	`data-theme`	-	The current theme is written to documentElement.
`default`	`prefers-color-scheme`	-	When storage is empty, Pear starts with the user's OS preference.