useTheme

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

Installation

Install the Theme plugin in your app’s entry point:

import { createApp } from 'vue'
import { createThemePlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(
  createThemePlugin({
    default: 'light',
    themes: {
      light: {
        dark: false,
        colors: {
          primary: '#3b82f6',
        },
      },
      dark: {
        dark: true,
        colors: {
          primary: '#675496',
        },
      },
    },
  })
)

app.mount('#app')

Usage

Once the plugin is installed, use the useTheme composable in any component:

<script setup lang="ts">
  import { useTheme } from '@vuetify/v0'

  const theme = useTheme()

  function toggleTheme() {
    theme.cycle(['light', 'dark'])
  }
</script>

<template>
  <div>
    <h1>Current Theme: {{ theme.selectedId }}</h1>
    <p>Dark mode: {{ theme.isDark ? 'enabled' : 'disabled' }}</p>
    <button @click="toggleTheme">Toggle Theme</button>
  </div>
</template>

Adapters

Adapters let you swap the underlying CSS injection strategy without changing your application code.

Both adapters set a data-theme attribute on the root element. Theme CSS is scoped to [data-theme="light"] / [data-theme="dark"] selectors so multiple themes can coexist in the same stylesheet.

When to use each:

• V0StyleSheetThemeAdapter (default) — SPAs without SSR. Uses document.adoptedStyleSheets to inject a live CSSStyleSheet — no DOM <style> element, zero flicker, works well with CSP when configured.

• V0UnheadThemeAdapter — SSR or SSG (Nuxt, VitePress). Manages the <style> tag and data-theme attribute via Unhead so the correct theme is rendered in the initial HTML, avoiding a flash of the wrong theme on hydration. Requires @unhead/vue.

Architecture

useTheme extends createSingle for theme selection and createTokens for color resolution:

Reactivity

Theme selection and computed colors are reactive. Switching themes automatically updates CSS variables.

Examples

Color Studio