Theme
A headless component that scopes a theme to a subtree. Descendant useTheme() calls resolve to the specified theme without affecting the rest of the application.
Usage
Wrap any section of your template in <Theme> to override the active theme for that subtree. Children calling useTheme() will see the scoped theme as the current selection.
vue
<script setup lang="ts">
import { Theme } from '@vuetify/v0'
</script>
<template>
<Theme theme="dark">
<!-- Everything here sees "dark" as the active theme -->
<slot />
</Theme>
</template>Anatomy
Anatomy
<script setup lang="ts">
import { Theme } from '@vuetify/v0'
</script>
<template>
<!-- Wrapper mode (default) -->
<Theme theme="dark">
<div>Dark-scoped content</div>
</Theme>
<!-- Renderless mode -->
<Theme theme="dark" renderless v-slot="{ attrs }">
<section v-bind="attrs">Custom element</section>
</Theme>
</template>Examples
Scoped Override
Nest <Theme> components to create layered theme contexts. Each section applies data-theme to its wrapper, scoping the active theme for that subtree.
| File | Role |
|---|---|
ThemeCard.vue | Displays theme colors for the given theme prop |
scoped-override.vue | Entry — sets up themes and nests scoped overrides |
Root context (light)
lightlight
primary
secondary
surface
background
Scoped to dark
darkdark
primary
secondary
surface
background
Nested back to light
lightlight
primary
secondary
surface
background
Independent dark scope
darkdark
primary
secondary
surface
background
Renderless Mode
When renderless is set, the component does not render a wrapper element. Instead, it passes attrs (including data-theme) via the slot scope for you to bind to your own element:
vue
<script setup lang="ts">
import { Theme } from '@vuetify/v0'
</script>
<template>
<Theme theme="dark" renderless v-slot="{ attrs }">
<section v-bind="attrs">
No extra wrapper div
</section>
</Theme>
</template>Was this page helpful?