Implementing Runtime Theme Switching in Vuetify 3

The Problem: Static Themes vs. User Preference

Many apps suffer theme flash or require reloads to switch light and dark modes. Vuetify 3 replaces Sass theming with a CSS variable runtime system initialized by createVuetify, enabling instant changes without rebuild.

The takeaway is useTheme to manipulate global theme state and let Vuetify update :root CSS variables.

Centralizing Theme Configuration

Define light and dark palettes in createVuetify theme config. Components and custom CSS reference var(--v-theme-primary) for consistency.

Programmatic Switching with useTheme

useTheme exposes reactive theme state. Changing global.name updates the DOM via CSS variables.

Worked Example

<template>
  <v-btn @click='toggle'>Toggle</v-btn>
</template>
<script setup>
import { useTheme } from 'vuetify'
const theme = useTheme()
function toggle() {
  theme.global.name.value = theme.global.name.value === 'light' ? 'dark' : 'light'
}
</script>
<style>
.box { background-color: var(--v-theme-primary); color: var(--v-theme-on-primary); }
</style>

Trade-offs and Limitations

SSR can cause flash of unstyled theme if server renders default light while client prefers dark. Serialize preference to cookie and apply theme class before first paint.

Verification

Inspect :root for --v-theme-* variables, toggle theme and confirm values update without reload, and check custom components use CSS variables.