Vuetify0 v1.0 is here — the stable release is live! Read the announcement.

Theme

Mode

Palettes

Accessibility

useTheme API

Theme management with multiple themes, CSS custom properties, and token alias resolution.

Explore these related pages for additional context and usage patterns.

Page	Category
useTheme	Plugins
Theme	Providers
useMediaQuery	System
createTokens	Registration
Theming	Features

Functions

createTheme

(_options?: ThemeOptions<ThemeRecord>) => ThemeContext<ThemeTicketInput, ThemeTicket<ThemeTicketInput>>

Creates a new theme instance.

createThemeContext

<_E>(_options?: ThemePluginOptions | undefined) => ContextTrinity<_E>

createThemePlugin

(_options?: ThemePluginOptions | undefined) => Plugin

useTheme

<_E>(namespace?: string) => _E

Options

events

boolean | undefined

Enable event emission for registry operations

Default: false

reactive

boolean | undefined

Enable reactive behavior for registry operations

Default: false

adapter

ThemeAdapter | undefined

The theme adapter to use.

default

ID | undefined

The default theme ID to select on initialization.

foreground

boolean | undefined

Automatically generate on-* foreground colors for each theme color using APCA contrast analysis.

palette

TokenCollection | undefined

A collection of tokens to use for resolving theme colors.

rgb

boolean | undefined

Output CSS variable values as decomposed RGB channels (R, G, B) instead of hex strings.

themes

Record<ID, Z> | undefined

A record of themes to register.

target

string | HTMLElement | null | undefined

The target element or selector to apply theme classes to.

Properties

collection

ReadonlyMap<ID, E>

The collection of tickets in the registry

size

number

The number of tickets in the registry

selectedIds

Reactive<Set<ID>>

Set of currently selected ticket IDs

selectedItems

ComputedRef<Set<E>>

Computed Set of selected ticket instances

selectedValues

ComputedRef<Set<E["value"] extends Ref<infer U, infer U> ? U : E["value"]>>

Computed Set of selected ticket values

disabled

MaybeRefOrGetter<boolean>

Disabled state for the entire model instance

multiple

MaybeRefOrGetter<boolean>

Whether the selection allows multiple selections

selectedId

Readonly<Ref<ID | undefined, ID | undefined>>

selectedIndex

Readonly<Ref<number, number>>

selectedItem

Readonly<Ref<E | undefined, E | undefined>>

selectedValue

Readonly<Ref<E["value"] | undefined, E["value"] | undefined>>

colors

ComputedRef<Record<string, Colors>>

A computed reference to the resolved colors of all registered themes.

isDark

Readonly<Ref<boolean, boolean>>

A ref indicating whether the current theme is dark.

Methods

clear

() => void

Clear the entire registry

has

(id: ID) => boolean

Check if a ticket exists by ID

keys

() => readonly ID[]

Get all registered IDs

browse

(value: E["value"]) => readonly ID[] | undefined

Browse for an ID(s) by value

lookup

(index: number) => ID | undefined

Lookup a ticket by index number

get

(id: ID) => E | undefined

Get a ticket by ID

upsert

(id: ID, ticket?: Partial<Z>, event?: string) => E

Update or insert a ticket by ID

values

() => readonly E[]

Get all values of registered tickets

entries

() => readonly [ID, E][]

Get all entries of registered tickets

unregister

(id: ID) => void

Unregister a ticket by ID

reindex

() => void

Reset the index directory and update all tickets

move

(id: ID, toIndex: number) => E | undefined

Move a ticket to a new index position

reorder

(ids: ID[]) => void

Reorder the registry to match a canonical permutation of ids in one pass.

seek

(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => E | undefined

Seek for a ticket based on direction and optional predicate

on

<K extends Extensible<RegistryEventName>>(event: K, cb: RegistryEventCallback<E, K>) => void

Listen for registry events

off

<K extends Extensible<RegistryEventName>>(event: K, cb: RegistryEventCallback<E, K>) => void

Stop listening for registry events

emit

<K extends Extensible<RegistryEventName>>(event: K, data: EventPayload<E, K>) => void

Emit an event with data

dispose

() => void

Clears the registry and removes all listeners

offboard

(ids: ID[]) => Partial<Z>[]

Offboard multiple tickets at once, returning the input shapes that were removed.

batch

<R>(fn: () => R) => R

Execute operations in a batch, deferring cache invalidation and event emission until complete

reset

() => void

Reset selection state without destroying the registry

select

(id: ID) => void

Select a ticket by ID

unselect

(id: ID) => void

Unselect a ticket by ID

toggle

(id: ID) => void

Toggle a ticket's selection state

selected

(id: ID) => boolean

Check if a ticket is currently selected

apply

(values: unknown[], options?: { multiple?) => void

Apply external values to the model

mandate

() => void

Mandate selected ID based on "mandatory" option

onboard

(registrations: Partial<Z>[]) => E[]

Onboard multiple tickets at once

cycle

(themes?: ID[]) => void

Cycles through the provided themes in order.

register

(registration?: Partial<Z>) => E

Register a theme with optional colors. When colors is provided, onboards them as flat tokens for alias resolution and stores them as the ticket value.

Was this page helpful?