From 5be0b5fd9e4abb2105eba6fe1c627af30a203943 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 4 Mar 2026 13:12:13 -0600
Subject: [PATCH 01/11] feat(Theme): add scoped theme provider component

Renders a div (configurable via Atom's `as` prop) with `data-theme`
attribute for CSS variable scoping. Provides derived ThemeContext to
descendants, overriding the active theme selection while reusing the
parent's registered themes.
---
 packages/0/src/components/Theme/Theme.vue | 92 +++++++++++++++++++++++
 packages/0/src/components/Theme/index.ts  | 21 ++++++
 packages/0/src/components/index.ts        |  1 +
 3 files changed, 114 insertions(+)
 create mode 100644 packages/0/src/components/Theme/Theme.vue
 create mode 100644 packages/0/src/components/Theme/index.ts

diff --git a/packages/0/src/components/Theme/Theme.vue b/packages/0/src/components/Theme/Theme.vue
new file mode 100644
index 000000000..aedcbb8b6
--- /dev/null
+++ b/packages/0/src/components/Theme/Theme.vue
@@ -0,0 +1,92 @@
+/**
+ * @module Theme
+ *
+ * @remarks
+ * Scoped theme provider component.
+ */
+
+<script lang="ts">
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+  import type { ID } from '#v0/types'
+
+  export interface ThemeProps extends AtomProps {
+    theme?: ID
+    namespace?: string
+  }
+
+  export interface ThemeSlotProps {
+    theme: ID | null | undefined
+    isDark: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+
+  // Foundational
+  import { provideContext } from '#v0/composables/createContext'
+
+  // Composables
+  import { useTheme } from '#v0/composables/useTheme'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  defineOptions({ name: 'Theme', inheritAttrs: false })
+
+  defineSlots<{
+    default: (props: ThemeSlotProps) => any
+  }>()
+
+  const {
+    as = 'div',
+    theme,
+    namespace = 'v0:theme',
+  } = defineProps<ThemeProps>()
+
+  const parent = useTheme()
+
+  const selectedId = toRef(() => theme ?? parent.selectedId.value)
+  const isDark = toRef(() => {
+    if (!selectedId.value) return parent.isDark.value
+    const ticket = parent.get(selectedId.value)
+    return ticket?.dark ?? parent.isDark.value
+  })
+
+  const context = {
+    ...parent,
+    selectedId,
+    isDark,
+    selectedItem: toRef(() => {
+      if (!selectedId.value) return parent.selectedItem.value
+      return parent.get(selectedId.value) ?? parent.selectedItem.value
+    }),
+    selectedIndex: toRef(() => {
+      if (!selectedId.value) return parent.selectedIndex.value
+      return parent.get(selectedId.value)?.index ?? -1
+    }),
+    selectedValue: toRef(() => {
+      if (!selectedId.value) return parent.selectedValue.value
+      return parent.get(selectedId.value)?.value
+    }),
+  }
+
+  provideContext(namespace, context)
+
+  const slotProps = toRef((): ThemeSlotProps => ({
+    theme: selectedId.value,
+    isDark: isDark.value,
+  }))
+</script>
+
+<template>
+  <Atom
+    :as
+    :data-theme="selectedId"
+    v-bind="$attrs"
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Theme/index.ts b/packages/0/src/components/Theme/index.ts
new file mode 100644
index 000000000..a85448732
--- /dev/null
+++ b/packages/0/src/components/Theme/index.ts
@@ -0,0 +1,21 @@
+export type { ThemeProps, ThemeSlotProps } from './Theme.vue'
+
+/**
+ * Scoped theme provider component.
+ *
+ * @see https://0.vuetifyjs.com/components/providers/theme
+ *
+ * @example
+ * ```vue
+ * <script lang="ts" setup>
+ *   import { Theme } from '@vuetify/v0'
+ * </script>
+ *
+ * <template>
+ *   <Theme theme="dark" class="pa-4">
+ *     Content uses dark theme
+ *   </Theme>
+ * </template>
+ * ```
+ */
+export { default as Theme } from './Theme.vue'
diff --git a/packages/0/src/components/index.ts b/packages/0/src/components/index.ts
index d20c40eb3..cda1ee1c4 100644
--- a/packages/0/src/components/index.ts
+++ b/packages/0/src/components/index.ts
@@ -14,3 +14,4 @@ export * from './Switch'
 export * from './Single'
 export * from './Step'
 export * from './Tabs'
+export * from './Theme'

From ab8c90783fc454d0dfe881ce24adc8c19eeabc37 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 4 Mar 2026 13:18:01 -0600
Subject: [PATCH 02/11] docs(DocsExample): add per-example theme override
 picker

Each example now has a theme picker button in the preview area that
lets users override the theme for that specific example. Uses the new
Theme component to scope CSS variables and context to the preview.
---
 apps/docs/src/components/docs/DocsExample.vue | 69 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 3 deletions(-)

diff --git a/apps/docs/src/components/docs/DocsExample.vue b/apps/docs/src/components/docs/DocsExample.vue
index 3e83ee489..4dd018e0a 100644
--- a/apps/docs/src/components/docs/DocsExample.vue
+++ b/apps/docs/src/components/docs/DocsExample.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Framework
-  import { createOverflow, isUndefined, Tabs } from '@vuetify/v0'
+  import { createOverflow, isUndefined, Popover, Tabs, Theme, useTheme } from '@vuetify/v0'
 
   // Components
   import DocsSkeleton from './DocsSkeleton.vue'
@@ -9,6 +9,7 @@
   import { getMultiFileBinUrl } from '@/composables/bin'
   import { useExamples } from '@/composables/useExamples'
   import { usePlayground } from '@/composables/usePlayground'
+  import { useThemeToggle } from '@/composables/useThemeToggle'
 
   // Utilities
   import { toKebab } from '@/utilities/strings'
@@ -167,6 +168,24 @@
     const url = getMultiFileBinUrl(files, props.title)
     window.open(url, '_blank')
   }
+
+  // Per-example theme override
+  const theme = useTheme()
+  const toggle = useThemeToggle()
+  const themeOverride = shallowRef<string>()
+  const themePickerOpen = ref(false)
+  const hasOverride = toRef(() => !!themeOverride.value)
+  const themeNames = toRef(() => theme.keys())
+
+  function onTheme (name: string) {
+    themeOverride.value = themeOverride.value === name ? undefined : name
+    themePickerOpen.value = false
+  }
+
+  function onResetTheme () {
+    themeOverride.value = undefined
+    themePickerOpen.value = false
+  }
 </script>
 
 <template>
@@ -183,10 +202,54 @@
       </DocsExampleDescription>
 
       <!-- Preview -->
-      <div class="p-6 bg-surface" :class="hasDescription && !descriptionExpanded && 'pt-8'">
+      <Theme class="relative p-6 bg-surface" :class="hasDescription && !descriptionExpanded && 'pt-8'" :theme="themeOverride">
+        <!-- Theme picker -->
+        <div class="absolute top-2 right-2 z-10">
+          <Popover.Root v-model="themePickerOpen">
+            <Popover.Activator
+              aria-label="Override example theme"
+              class="size-7 rounded inline-flex items-center justify-center transition-colors cursor-pointer"
+              :class="hasOverride ? 'bg-primary/15 text-primary' : 'text-on-surface/40 hover:text-on-surface hover:bg-surface-tint'"
+              title="Override theme"
+            >
+              <AppIcon :icon="toggle.icon.value" :size="14" />
+            </Popover.Activator>
+
+            <Popover.Content
+              class="p-2 rounded-lg bg-surface border border-divider shadow-xl min-w-44 !mt-1"
+              position-area="bottom span-left"
+              position-try="bottom span-left, bottom span-right, top span-left, top span-right"
+            >
+              <button
+                class="w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs font-medium transition-colors"
+                :class="!hasOverride ? 'bg-primary/15 text-primary' : 'hover:bg-surface-tint text-on-surface'"
+                type="button"
+                @click="onResetTheme"
+              >
+                <AppIcon icon="close" :size="12" />
+                <span>Page default</span>
+              </button>
+
+              <div class="my-1 border-t border-divider" />
+
+              <button
+                v-for="name in themeNames"
+                :key="name"
+                class="w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs font-medium transition-colors"
+                :class="themeOverride === name ? 'bg-primary/15 text-primary' : 'hover:bg-surface-tint text-on-surface'"
+                type="button"
+                @click="onTheme(name)"
+              >
+                <AppThemePreview :theme="name" />
+                <span class="capitalize">{{ name }}</span>
+              </button>
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+
         <component :is="auto?.component" v-if="auto?.component" />
         <slot v-else />
-      </div>
+      </Theme>
 
       <!-- Code toggle button -->
       <div v-if="!peek && (resolvedCode || displayFiles?.length)" class="border-t border-divider bg-surface-tint">

From b153d2e356dd3963847e941366b7e0ed4e3a6e19 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 4 Mar 2026 14:49:16 -0600
Subject: [PATCH 03/11] docs(Theme): add documentation page and examples

Adds provider docs page with basic, nested, and slot-props examples
demonstrating scoped theme overrides.
---
 .../src/examples/components/theme/basic.vue   | 29 +++++++
 .../src/examples/components/theme/nested.vue  | 17 ++++
 .../examples/components/theme/slot-props.vue  | 19 +++++
 .../src/pages/components/providers/theme.md   | 81 +++++++++++++++++++
 4 files changed, 146 insertions(+)
 create mode 100644 apps/docs/src/examples/components/theme/basic.vue
 create mode 100644 apps/docs/src/examples/components/theme/nested.vue
 create mode 100644 apps/docs/src/examples/components/theme/slot-props.vue
 create mode 100644 apps/docs/src/pages/components/providers/theme.md

diff --git a/apps/docs/src/examples/components/theme/basic.vue b/apps/docs/src/examples/components/theme/basic.vue
new file mode 100644
index 000000000..483cbd484
--- /dev/null
+++ b/apps/docs/src/examples/components/theme/basic.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { Theme, useTheme } from '@vuetify/v0'
+  import { toRef } from 'vue'
+
+  const theme = useTheme()
+  const current = toRef(() => theme.selectedId.value)
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="p-4 rounded bg-surface text-on-surface border border-divider">
+      <p class="text-sm">
+        Current page theme: <strong>{{ current }}</strong>
+      </p>
+    </div>
+
+    <Theme class="p-4 rounded border border-divider" theme="light">
+      <p class="text-sm bg-surface text-on-surface p-3 rounded">
+        This section is always <strong>light</strong>
+      </p>
+    </Theme>
+
+    <Theme class="p-4 rounded border border-divider" theme="dark">
+      <p class="text-sm bg-surface text-on-surface p-3 rounded">
+        This section is always <strong>dark</strong>
+      </p>
+    </Theme>
+  </div>
+</template>
diff --git a/apps/docs/src/examples/components/theme/nested.vue b/apps/docs/src/examples/components/theme/nested.vue
new file mode 100644
index 000000000..d0b060c55
--- /dev/null
+++ b/apps/docs/src/examples/components/theme/nested.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import { Theme } from '@vuetify/v0'
+</script>
+
+<template>
+  <Theme class="p-4 rounded border border-divider" theme="dark">
+    <p class="text-sm bg-surface text-on-surface p-3 rounded mb-4">
+      Dark section
+    </p>
+
+    <Theme class="p-4 rounded border border-divider" theme="light">
+      <p class="text-sm bg-surface text-on-surface p-3 rounded">
+        Light nested inside dark
+      </p>
+    </Theme>
+  </Theme>
+</template>
diff --git a/apps/docs/src/examples/components/theme/slot-props.vue b/apps/docs/src/examples/components/theme/slot-props.vue
new file mode 100644
index 000000000..3492ea036
--- /dev/null
+++ b/apps/docs/src/examples/components/theme/slot-props.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { Theme } from '@vuetify/v0'
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <Theme v-slot="{ isDark }" class="flex-1 p-4 rounded border border-divider" theme="light">
+      <p class="text-sm bg-surface text-on-surface p-3 rounded">
+        isDark: <strong>{{ isDark }}</strong>
+      </p>
+    </Theme>
+
+    <Theme v-slot="{ isDark }" class="flex-1 p-4 rounded border border-divider" theme="dark">
+      <p class="text-sm bg-surface text-on-surface p-3 rounded">
+        isDark: <strong>{{ isDark }}</strong>
+      </p>
+    </Theme>
+  </div>
+</template>
diff --git a/apps/docs/src/pages/components/providers/theme.md b/apps/docs/src/pages/components/providers/theme.md
new file mode 100644
index 000000000..dddaec9a4
--- /dev/null
+++ b/apps/docs/src/pages/components/providers/theme.md
@@ -0,0 +1,81 @@
+---
+title: Theme - Scoped Theme Provider for Vue 3
+meta:
+- name: description
+  content: A headless theme provider component that scopes CSS variables and theme context to a subtree. Override the active theme for any section of your app.
+- name: keywords
+  content: theme, provider, dark mode, light mode, CSS variables, scoped, Vue 3, headless
+features:
+  category: Component
+  label: 'C: Theme'
+  github: /components/Theme/
+  level: 1
+related:
+  - /composables/plugins/use-theme
+---
+
+# Theme
+
+A scoped theme provider that overrides the active theme for all descendants. Renders a wrapper element with `data-theme` so CSS variables cascade naturally.
+
+<DocsPageFeatures :frontmatter />
+
+## Installation
+
+The Theme component consumes the global theme context. Install the theme plugin at the app level:
+
+```ts main.ts
+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: { colors: { primary: '#3b82f6' } },
+    dark: { dark: true, colors: { primary: '#60a5fa' } },
+  },
+}))
+
+app.mount('#app')
+```
+
+## Usage
+
+Wrap any section in `<Theme>` to override the active theme. Descendants calling `useTheme()` receive the overridden context, and CSS variables from `[data-theme]` cascade to all children.
+
+::: example
+/components/theme/basic
+:::
+
+## Nesting
+
+Theme components nest naturally. Each one shadows the parent's `v0:theme` injection key.
+
+::: example
+/components/theme/nested
+:::
+
+## Slot Props
+
+The default slot exposes `theme` (the active ID) and `isDark` (boolean) for conditional rendering.
+
+::: example
+/components/theme/slot-props
+:::
+
+## Polymorphic Rendering
+
+Theme extends `Atom`, so it accepts the `as` prop to render as any HTML element:
+
+```vue
+<template>
+  <Theme theme="dark" as="section" class="dark-area">
+    <!-- renders as <section data-theme="dark"> -->
+  </Theme>
+</template>
+```
+
+<DocsApi />

From 3e49b5668429ecc4d05eecca7d0fbcb9e5fe64e8 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 4 Mar 2026 15:10:56 -0600
Subject: [PATCH 04/11] docs(Theme): improve examples and page structure

- Replace <p> elements with <div>/<span> to avoid default margins
- Use branded themes (Polaris, Nebula, Blackguard, Odyssey) instead
  of just light/dark for more interesting examples
- Add bg-background to Theme wrappers so colors display correctly
- Move Slot Props and Polymorphic Rendering under Recipes header
- Remove class="dark-area" from polymorphic example
- Triple-nested theme example with distinct branded themes
---
 .../src/examples/components/theme/basic.vue   | 41 +++++++++++--------
 .../src/examples/components/theme/nested.vue  | 16 ++++----
 .../examples/components/theme/slot-props.vue  | 12 ++----
 .../src/pages/components/providers/theme.md   |  8 ++--
 4 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/apps/docs/src/examples/components/theme/basic.vue b/apps/docs/src/examples/components/theme/basic.vue
index 483cbd484..831a6fb63 100644
--- a/apps/docs/src/examples/components/theme/basic.vue
+++ b/apps/docs/src/examples/components/theme/basic.vue
@@ -1,29 +1,34 @@
 <script setup lang="ts">
-  import { Theme, useTheme } from '@vuetify/v0'
-  import { toRef } from 'vue'
-
-  const theme = useTheme()
-  const current = toRef(() => theme.selectedId.value)
+  import { Theme } from '@vuetify/v0'
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
-    <div class="p-4 rounded bg-surface text-on-surface border border-divider">
-      <p class="text-sm">
-        Current page theme: <strong>{{ current }}</strong>
-      </p>
-    </div>
+    <Theme class="p-4 rounded bg-background text-on-background" theme="polaris">
+      <div class="text-sm font-medium mb-2">Polaris</div>
+      <div class="flex gap-2">
+        <span class="px-3 py-1 rounded bg-primary text-on-primary text-xs">Primary</span>
+        <span class="px-3 py-1 rounded bg-secondary text-on-secondary text-xs">Secondary</span>
+        <span class="px-3 py-1 rounded bg-accent text-on-accent text-xs">Accent</span>
+      </div>
+    </Theme>
 
-    <Theme class="p-4 rounded border border-divider" theme="light">
-      <p class="text-sm bg-surface text-on-surface p-3 rounded">
-        This section is always <strong>light</strong>
-      </p>
+    <Theme class="p-4 rounded bg-background text-on-background" theme="nebula">
+      <div class="text-sm font-medium mb-2">Nebula</div>
+      <div class="flex gap-2">
+        <span class="px-3 py-1 rounded bg-primary text-on-primary text-xs">Primary</span>
+        <span class="px-3 py-1 rounded bg-secondary text-on-secondary text-xs">Secondary</span>
+        <span class="px-3 py-1 rounded bg-accent text-on-accent text-xs">Accent</span>
+      </div>
     </Theme>
 
-    <Theme class="p-4 rounded border border-divider" theme="dark">
-      <p class="text-sm bg-surface text-on-surface p-3 rounded">
-        This section is always <strong>dark</strong>
-      </p>
+    <Theme class="p-4 rounded bg-background text-on-background" theme="blackguard">
+      <div class="text-sm font-medium mb-2">Blackguard</div>
+      <div class="flex gap-2">
+        <span class="px-3 py-1 rounded bg-primary text-on-primary text-xs">Primary</span>
+        <span class="px-3 py-1 rounded bg-secondary text-on-secondary text-xs">Secondary</span>
+        <span class="px-3 py-1 rounded bg-accent text-on-accent text-xs">Accent</span>
+      </div>
     </Theme>
   </div>
 </template>
diff --git a/apps/docs/src/examples/components/theme/nested.vue b/apps/docs/src/examples/components/theme/nested.vue
index d0b060c55..3e7c0f2b7 100644
--- a/apps/docs/src/examples/components/theme/nested.vue
+++ b/apps/docs/src/examples/components/theme/nested.vue
@@ -3,15 +3,15 @@
 </script>
 
 <template>
-  <Theme class="p-4 rounded border border-divider" theme="dark">
-    <p class="text-sm bg-surface text-on-surface p-3 rounded mb-4">
-      Dark section
-    </p>
+  <Theme class="p-4 rounded bg-background text-on-background" theme="blackguard">
+    <div class="text-sm mb-3">Blackguard outer</div>
 
-    <Theme class="p-4 rounded border border-divider" theme="light">
-      <p class="text-sm bg-surface text-on-surface p-3 rounded">
-        Light nested inside dark
-      </p>
+    <Theme class="p-4 rounded bg-background text-on-background" theme="odyssey">
+      <div class="text-sm mb-3">Odyssey nested inside Blackguard</div>
+
+      <Theme class="p-4 rounded bg-background text-on-background" theme="nebula">
+        <div class="text-sm">Nebula nested inside Odyssey</div>
+      </Theme>
     </Theme>
   </Theme>
 </template>
diff --git a/apps/docs/src/examples/components/theme/slot-props.vue b/apps/docs/src/examples/components/theme/slot-props.vue
index 3492ea036..2ee0476d4 100644
--- a/apps/docs/src/examples/components/theme/slot-props.vue
+++ b/apps/docs/src/examples/components/theme/slot-props.vue
@@ -4,16 +4,12 @@
 
 <template>
   <div class="flex gap-4">
-    <Theme v-slot="{ isDark }" class="flex-1 p-4 rounded border border-divider" theme="light">
-      <p class="text-sm bg-surface text-on-surface p-3 rounded">
-        isDark: <strong>{{ isDark }}</strong>
-      </p>
+    <Theme v-slot="{ isDark, theme }" class="flex-1 p-4 rounded bg-background text-on-background" theme="odyssey">
+      <div class="text-xs font-mono opacity-70">{{ theme }} · isDark: {{ isDark }}</div>
     </Theme>
 
-    <Theme v-slot="{ isDark }" class="flex-1 p-4 rounded border border-divider" theme="dark">
-      <p class="text-sm bg-surface text-on-surface p-3 rounded">
-        isDark: <strong>{{ isDark }}</strong>
-      </p>
+    <Theme v-slot="{ isDark, theme }" class="flex-1 p-4 rounded bg-background text-on-background" theme="blackguard">
+      <div class="text-xs font-mono opacity-70">{{ theme }} · isDark: {{ isDark }}</div>
     </Theme>
   </div>
 </template>
diff --git a/apps/docs/src/pages/components/providers/theme.md b/apps/docs/src/pages/components/providers/theme.md
index dddaec9a4..208575e4d 100644
--- a/apps/docs/src/pages/components/providers/theme.md
+++ b/apps/docs/src/pages/components/providers/theme.md
@@ -58,7 +58,9 @@ Theme components nest naturally. Each one shadows the parent's `v0:theme` inject
 /components/theme/nested
 :::
 
-## Slot Props
+## Recipes
+
+### Slot Props
 
 The default slot exposes `theme` (the active ID) and `isDark` (boolean) for conditional rendering.
 
@@ -66,13 +68,13 @@ The default slot exposes `theme` (the active ID) and `isDark` (boolean) for cond
 /components/theme/slot-props
 :::
 
-## Polymorphic Rendering
+### Polymorphic Rendering
 
 Theme extends `Atom`, so it accepts the `as` prop to render as any HTML element:
 
 ```vue
 <template>
-  <Theme theme="dark" as="section" class="dark-area">
+  <Theme theme="dark" as="section">
     <!-- renders as <section data-theme="dark"> -->
   </Theme>
 </template>

From 987c7f3adf91e1bbad7d3c94c410dfbfcd0abd23 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 4 Mar 2026 18:17:12 -0600
Subject: [PATCH 05/11] docs(Theme): single interactive example with settings
 card

Replace three static examples with one polished interactive demo.
A notifications settings card re-themes in place as users click
through all registered themes. Removes nested/slot-props example
files in favor of inline code snippets under Recipes.
---
 .../src/examples/components/theme/basic.vue   | 80 ++++++++++++++-----
 .../src/examples/components/theme/nested.vue  | 17 ----
 .../examples/components/theme/slot-props.vue  | 15 ----
 .../src/pages/components/providers/theme.md   | 28 +++----
 4 files changed, 70 insertions(+), 70 deletions(-)
 delete mode 100644 apps/docs/src/examples/components/theme/nested.vue
 delete mode 100644 apps/docs/src/examples/components/theme/slot-props.vue

diff --git a/apps/docs/src/examples/components/theme/basic.vue b/apps/docs/src/examples/components/theme/basic.vue
index 831a6fb63..ee5c1008e 100644
--- a/apps/docs/src/examples/components/theme/basic.vue
+++ b/apps/docs/src/examples/components/theme/basic.vue
@@ -1,33 +1,71 @@
 <script setup lang="ts">
-  import { Theme } from '@vuetify/v0'
+  import { Theme, useTheme } from '@vuetify/v0'
+  import { shallowRef, toRef } from 'vue'
+
+  const theme = useTheme()
+  const selected = shallowRef<string>()
+  const names = toRef(() => theme.keys())
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
-    <Theme class="p-4 rounded bg-background text-on-background" theme="polaris">
-      <div class="text-sm font-medium mb-2">Polaris</div>
-      <div class="flex gap-2">
-        <span class="px-3 py-1 rounded bg-primary text-on-primary text-xs">Primary</span>
-        <span class="px-3 py-1 rounded bg-secondary text-on-secondary text-xs">Secondary</span>
-        <span class="px-3 py-1 rounded bg-accent text-on-accent text-xs">Accent</span>
+    <div class="flex flex-wrap gap-1.5">
+      <button
+        class="px-2.5 py-1 text-xs font-medium rounded border transition-colors"
+        :class="!selected ? 'bg-primary text-on-primary border-transparent' : 'border-divider hover:bg-surface-tint'"
+        @click="selected = undefined"
+      >
+        Default
+      </button>
+
+      <button
+        v-for="name in names"
+        :key="name"
+        class="px-2.5 py-1 text-xs font-medium rounded border transition-colors capitalize"
+        :class="selected === name ? 'bg-primary text-on-primary border-transparent' : 'border-divider hover:bg-surface-tint'"
+        @click="selected = name"
+      >
+        {{ name }}
+      </button>
+    </div>
+
+    <Theme class="rounded-lg bg-background text-on-background border border-divider overflow-hidden" :theme="selected">
+      <div class="px-4 py-3 border-b border-divider bg-surface">
+        <div class="text-sm font-semibold">Notifications</div>
+        <div class="text-xs text-on-surface-variant">Manage how you receive alerts</div>
       </div>
-    </Theme>
 
-    <Theme class="p-4 rounded bg-background text-on-background" theme="nebula">
-      <div class="text-sm font-medium mb-2">Nebula</div>
-      <div class="flex gap-2">
-        <span class="px-3 py-1 rounded bg-primary text-on-primary text-xs">Primary</span>
-        <span class="px-3 py-1 rounded bg-secondary text-on-secondary text-xs">Secondary</span>
-        <span class="px-3 py-1 rounded bg-accent text-on-accent text-xs">Accent</span>
+      <div class="p-4 flex flex-col gap-3">
+        <label class="flex items-center justify-between">
+          <span class="text-sm">Push notifications</span>
+          <span class="w-8 h-5 rounded-full bg-primary relative">
+            <span class="absolute right-0.5 top-0.5 w-4 h-4 rounded-full bg-on-primary transition-all" />
+          </span>
+        </label>
+
+        <label class="flex items-center justify-between">
+          <span class="text-sm">Email digest</span>
+          <span class="w-8 h-5 rounded-full bg-surface-tint border border-divider relative">
+            <span class="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-on-surface-variant transition-all" />
+          </span>
+        </label>
+
+        <label class="flex items-center justify-between">
+          <span class="text-sm">SMS alerts</span>
+          <span class="w-8 h-5 rounded-full bg-surface-tint border border-divider relative">
+            <span class="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-on-surface-variant transition-all" />
+          </span>
+        </label>
       </div>
-    </Theme>
 
-    <Theme class="p-4 rounded bg-background text-on-background" theme="blackguard">
-      <div class="text-sm font-medium mb-2">Blackguard</div>
-      <div class="flex gap-2">
-        <span class="px-3 py-1 rounded bg-primary text-on-primary text-xs">Primary</span>
-        <span class="px-3 py-1 rounded bg-secondary text-on-secondary text-xs">Secondary</span>
-        <span class="px-3 py-1 rounded bg-accent text-on-accent text-xs">Accent</span>
+      <div class="px-4 py-3 border-t border-divider bg-surface flex justify-end gap-2">
+        <button class="px-3 py-1.5 text-xs font-medium rounded border border-divider hover:bg-surface-tint">
+          Cancel
+        </button>
+
+        <button class="px-3 py-1.5 text-xs font-medium rounded bg-primary text-on-primary">
+          Save
+        </button>
       </div>
     </Theme>
   </div>
diff --git a/apps/docs/src/examples/components/theme/nested.vue b/apps/docs/src/examples/components/theme/nested.vue
deleted file mode 100644
index 3e7c0f2b7..000000000
--- a/apps/docs/src/examples/components/theme/nested.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-  import { Theme } from '@vuetify/v0'
-</script>
-
-<template>
-  <Theme class="p-4 rounded bg-background text-on-background" theme="blackguard">
-    <div class="text-sm mb-3">Blackguard outer</div>
-
-    <Theme class="p-4 rounded bg-background text-on-background" theme="odyssey">
-      <div class="text-sm mb-3">Odyssey nested inside Blackguard</div>
-
-      <Theme class="p-4 rounded bg-background text-on-background" theme="nebula">
-        <div class="text-sm">Nebula nested inside Odyssey</div>
-      </Theme>
-    </Theme>
-  </Theme>
-</template>
diff --git a/apps/docs/src/examples/components/theme/slot-props.vue b/apps/docs/src/examples/components/theme/slot-props.vue
deleted file mode 100644
index 2ee0476d4..000000000
--- a/apps/docs/src/examples/components/theme/slot-props.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-  import { Theme } from '@vuetify/v0'
-</script>
-
-<template>
-  <div class="flex gap-4">
-    <Theme v-slot="{ isDark, theme }" class="flex-1 p-4 rounded bg-background text-on-background" theme="odyssey">
-      <div class="text-xs font-mono opacity-70">{{ theme }} · isDark: {{ isDark }}</div>
-    </Theme>
-
-    <Theme v-slot="{ isDark, theme }" class="flex-1 p-4 rounded bg-background text-on-background" theme="blackguard">
-      <div class="text-xs font-mono opacity-70">{{ theme }} · isDark: {{ isDark }}</div>
-    </Theme>
-  </div>
-</template>
diff --git a/apps/docs/src/pages/components/providers/theme.md b/apps/docs/src/pages/components/providers/theme.md
index 208575e4d..0144a25b7 100644
--- a/apps/docs/src/pages/components/providers/theme.md
+++ b/apps/docs/src/pages/components/providers/theme.md
@@ -44,40 +44,34 @@ app.mount('#app')
 
 ## Usage
 
-Wrap any section in `<Theme>` to override the active theme. Descendants calling `useTheme()` receive the overridden context, and CSS variables from `[data-theme]` cascade to all children.
+Wrap any section in `<Theme>` to override the active theme for its subtree. Click the theme buttons below to see the card re-theme in place.
 
 ::: example
 /components/theme/basic
 :::
 
-## Nesting
-
-Theme components nest naturally. Each one shadows the parent's `v0:theme` injection key.
-
-::: example
-/components/theme/nested
-:::
+Theme components nest — each one shadows the parent's `v0:theme` injection key, so descendants calling `useTheme()` receive the overridden context.
 
 ## Recipes
 
 ### Slot Props
 
-The default slot exposes `theme` (the active ID) and `isDark` (boolean) for conditional rendering.
+The default slot exposes `theme` (the active ID) and `isDark` (boolean) for conditional rendering:
 
-::: example
-/components/theme/slot-props
-:::
+```vue
+<Theme v-slot="{ theme, isDark }" theme="dark">
+  <span>{{ theme }} — dark: {{ isDark }}</span>
+</Theme>
+```
 
 ### Polymorphic Rendering
 
 Theme extends `Atom`, so it accepts the `as` prop to render as any HTML element:
 
 ```vue
-<template>
-  <Theme theme="dark" as="section">
-    <!-- renders as <section data-theme="dark"> -->
-  </Theme>
-</template>
+<Theme theme="dark" as="section">
+  <!-- renders as <section data-theme="dark"> -->
+</Theme>
 ```
 
 <DocsApi />

From 46bc60b4338441d09d3c4fc6ddf02cc876bc2301 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 4 Mar 2026 18:25:40 -0600
Subject: [PATCH 06/11] docs(Theme): remove inline theme picker, use
 DocsExample override
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The per-example theme picker already handles theme switching. The
example itself is now just the settings card — no duplicate UI.
---
 .../src/examples/components/theme/basic.vue   | 99 +++++++------------
 .../src/pages/components/providers/theme.md   |  2 +-
 2 files changed, 37 insertions(+), 64 deletions(-)

diff --git a/apps/docs/src/examples/components/theme/basic.vue b/apps/docs/src/examples/components/theme/basic.vue
index ee5c1008e..7963b0ebb 100644
--- a/apps/docs/src/examples/components/theme/basic.vue
+++ b/apps/docs/src/examples/components/theme/basic.vue
@@ -1,72 +1,45 @@
 <script setup lang="ts">
-  import { Theme, useTheme } from '@vuetify/v0'
-  import { shallowRef, toRef } from 'vue'
-
-  const theme = useTheme()
-  const selected = shallowRef<string>()
-  const names = toRef(() => theme.keys())
+  import { Theme } from '@vuetify/v0'
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
-    <div class="flex flex-wrap gap-1.5">
-      <button
-        class="px-2.5 py-1 text-xs font-medium rounded border transition-colors"
-        :class="!selected ? 'bg-primary text-on-primary border-transparent' : 'border-divider hover:bg-surface-tint'"
-        @click="selected = undefined"
-      >
-        Default
-      </button>
-
-      <button
-        v-for="name in names"
-        :key="name"
-        class="px-2.5 py-1 text-xs font-medium rounded border transition-colors capitalize"
-        :class="selected === name ? 'bg-primary text-on-primary border-transparent' : 'border-divider hover:bg-surface-tint'"
-        @click="selected = name"
-      >
-        {{ name }}
-      </button>
+  <Theme class="rounded-lg bg-background text-on-background border border-divider overflow-hidden">
+    <div class="px-4 py-3 border-b border-divider bg-surface">
+      <div class="text-sm font-semibold">Notifications</div>
+      <div class="text-xs text-on-surface-variant">Manage how you receive alerts</div>
     </div>
 
-    <Theme class="rounded-lg bg-background text-on-background border border-divider overflow-hidden" :theme="selected">
-      <div class="px-4 py-3 border-b border-divider bg-surface">
-        <div class="text-sm font-semibold">Notifications</div>
-        <div class="text-xs text-on-surface-variant">Manage how you receive alerts</div>
-      </div>
-
-      <div class="p-4 flex flex-col gap-3">
-        <label class="flex items-center justify-between">
-          <span class="text-sm">Push notifications</span>
-          <span class="w-8 h-5 rounded-full bg-primary relative">
-            <span class="absolute right-0.5 top-0.5 w-4 h-4 rounded-full bg-on-primary transition-all" />
-          </span>
-        </label>
-
-        <label class="flex items-center justify-between">
-          <span class="text-sm">Email digest</span>
-          <span class="w-8 h-5 rounded-full bg-surface-tint border border-divider relative">
-            <span class="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-on-surface-variant transition-all" />
-          </span>
-        </label>
-
-        <label class="flex items-center justify-between">
-          <span class="text-sm">SMS alerts</span>
-          <span class="w-8 h-5 rounded-full bg-surface-tint border border-divider relative">
-            <span class="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-on-surface-variant transition-all" />
-          </span>
-        </label>
-      </div>
+    <div class="p-4 flex flex-col gap-3">
+      <label class="flex items-center justify-between">
+        <span class="text-sm">Push notifications</span>
+        <span class="w-8 h-5 rounded-full bg-primary relative">
+          <span class="absolute right-0.5 top-0.5 w-4 h-4 rounded-full bg-on-primary transition-all" />
+        </span>
+      </label>
+
+      <label class="flex items-center justify-between">
+        <span class="text-sm">Email digest</span>
+        <span class="w-8 h-5 rounded-full bg-surface-tint border border-divider relative">
+          <span class="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-on-surface-variant transition-all" />
+        </span>
+      </label>
+
+      <label class="flex items-center justify-between">
+        <span class="text-sm">SMS alerts</span>
+        <span class="w-8 h-5 rounded-full bg-surface-tint border border-divider relative">
+          <span class="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-on-surface-variant transition-all" />
+        </span>
+      </label>
+    </div>
 
-      <div class="px-4 py-3 border-t border-divider bg-surface flex justify-end gap-2">
-        <button class="px-3 py-1.5 text-xs font-medium rounded border border-divider hover:bg-surface-tint">
-          Cancel
-        </button>
+    <div class="px-4 py-3 border-t border-divider bg-surface flex justify-end gap-2">
+      <button class="px-3 py-1.5 text-xs font-medium rounded border border-divider hover:bg-surface-tint">
+        Cancel
+      </button>
 
-        <button class="px-3 py-1.5 text-xs font-medium rounded bg-primary text-on-primary">
-          Save
-        </button>
-      </div>
-    </Theme>
-  </div>
+      <button class="px-3 py-1.5 text-xs font-medium rounded bg-primary text-on-primary">
+        Save
+      </button>
+    </div>
+  </Theme>
 </template>
diff --git a/apps/docs/src/pages/components/providers/theme.md b/apps/docs/src/pages/components/providers/theme.md
index 0144a25b7..fe0a6cb87 100644
--- a/apps/docs/src/pages/components/providers/theme.md
+++ b/apps/docs/src/pages/components/providers/theme.md
@@ -44,7 +44,7 @@ app.mount('#app')
 
 ## Usage
 
-Wrap any section in `<Theme>` to override the active theme for its subtree. Click the theme buttons below to see the card re-theme in place.
+Wrap any section in `<Theme>` to override the active theme for its subtree. Use the theme picker in the top-right corner of the example to see the card re-theme in place.
 
 ::: example
 /components/theme/basic

From e2694ca971f26caec803e953338f779a2c293153 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 4 Mar 2026 18:28:46 -0600
Subject: [PATCH 07/11] docs(Theme): use Switch component instead of fake
 toggles

---
 .../src/examples/components/theme/basic.vue   | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/apps/docs/src/examples/components/theme/basic.vue b/apps/docs/src/examples/components/theme/basic.vue
index 7963b0ebb..5693927fe 100644
--- a/apps/docs/src/examples/components/theme/basic.vue
+++ b/apps/docs/src/examples/components/theme/basic.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-  import { Theme } from '@vuetify/v0'
+  import { Switch, Theme } from '@vuetify/v0'
+  import { shallowRef } from 'vue'
+
+  const push = shallowRef(true)
+  const email = shallowRef(false)
+  const sms = shallowRef(false)
 </script>
 
 <template>
@@ -10,25 +15,31 @@
     </div>
 
     <div class="p-4 flex flex-col gap-3">
-      <label class="flex items-center justify-between">
+      <label class="flex items-center justify-between cursor-pointer">
         <span class="text-sm">Push notifications</span>
-        <span class="w-8 h-5 rounded-full bg-primary relative">
-          <span class="absolute right-0.5 top-0.5 w-4 h-4 rounded-full bg-on-primary transition-all" />
-        </span>
+        <Switch.Root v-model="push" class="inline-flex items-center border-none bg-transparent p-0">
+          <Switch.Track class="relative inline-flex items-center w-9 h-5 rounded-full transition-colors bg-surface-tint data-[state=checked]:bg-primary">
+            <Switch.Thumb class="![visibility:visible] block size-3.5 rounded-full bg-white shadow-sm transition-transform translate-x-0.75 data-[state=checked]:translate-x-4.25" />
+          </Switch.Track>
+        </Switch.Root>
       </label>
 
-      <label class="flex items-center justify-between">
+      <label class="flex items-center justify-between cursor-pointer">
         <span class="text-sm">Email digest</span>
-        <span class="w-8 h-5 rounded-full bg-surface-tint border border-divider relative">
-          <span class="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-on-surface-variant transition-all" />
-        </span>
+        <Switch.Root v-model="email" class="inline-flex items-center border-none bg-transparent p-0">
+          <Switch.Track class="relative inline-flex items-center w-9 h-5 rounded-full transition-colors bg-surface-tint data-[state=checked]:bg-primary">
+            <Switch.Thumb class="![visibility:visible] block size-3.5 rounded-full bg-white shadow-sm transition-transform translate-x-0.75 data-[state=checked]:translate-x-4.25" />
+          </Switch.Track>
+        </Switch.Root>
       </label>
 
-      <label class="flex items-center justify-between">
+      <label class="flex items-center justify-between cursor-pointer">
         <span class="text-sm">SMS alerts</span>
-        <span class="w-8 h-5 rounded-full bg-surface-tint border border-divider relative">
-          <span class="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-on-surface-variant transition-all" />
-        </span>
+        <Switch.Root v-model="sms" class="inline-flex items-center border-none bg-transparent p-0">
+          <Switch.Track class="relative inline-flex items-center w-9 h-5 rounded-full transition-colors bg-surface-tint data-[state=checked]:bg-primary">
+            <Switch.Thumb class="![visibility:visible] block size-3.5 rounded-full bg-white shadow-sm transition-transform translate-x-0.75 data-[state=checked]:translate-x-4.25" />
+          </Switch.Track>
+        </Switch.Root>
       </label>
     </div>
 

From 011018a89d9b8d535266206b1fafed8533732bcd Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 4 Mar 2026 18:34:06 -0600
Subject: [PATCH 08/11] docs(DocsExample): move theme picker to toolbar

Theme picker is now in the toolbar bar alongside the code toggle,
visible for both peek and non-peek examples. Shows selected theme
name when an override is active.
---
 apps/docs/src/components/docs/DocsExample.vue | 63 ++++++++++---------
 .../src/pages/components/providers/theme.md   |  2 +-
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/apps/docs/src/components/docs/DocsExample.vue b/apps/docs/src/components/docs/DocsExample.vue
index 4dd018e0a..06030d184 100644
--- a/apps/docs/src/components/docs/DocsExample.vue
+++ b/apps/docs/src/components/docs/DocsExample.vue
@@ -202,23 +202,30 @@
       </DocsExampleDescription>
 
       <!-- Preview -->
-      <Theme class="relative p-6 bg-surface" :class="hasDescription && !descriptionExpanded && 'pt-8'" :theme="themeOverride">
-        <!-- Theme picker -->
-        <div class="absolute top-2 right-2 z-10">
+      <Theme class="p-6 bg-surface" :class="hasDescription && !descriptionExpanded && 'pt-8'" :theme="themeOverride">
+        <component :is="auto?.component" v-if="auto?.component" />
+        <slot v-else />
+      </Theme>
+
+      <!-- Toolbar -->
+      <div class="border-t border-divider bg-surface-tint">
+        <div class="flex items-center">
+          <!-- Theme picker -->
           <Popover.Root v-model="themePickerOpen">
             <Popover.Activator
               aria-label="Override example theme"
-              class="size-7 rounded inline-flex items-center justify-center transition-colors cursor-pointer"
-              :class="hasOverride ? 'bg-primary/15 text-primary' : 'text-on-surface/40 hover:text-on-surface hover:bg-surface-tint'"
+              class="px-4 py-3 inline-flex items-center gap-1.5 bg-transparent border-none text-sm cursor-pointer transition-colors hover:bg-surface"
+              :class="hasOverride ? 'text-primary' : 'text-on-surface-variant'"
               title="Override theme"
             >
-              <AppIcon :icon="toggle.icon.value" :size="14" />
+              <AppIcon :icon="toggle.icon.value" :size="16" />
+              <span v-if="hasOverride" class="text-xs font-medium capitalize">{{ themeOverride }}</span>
             </Popover.Activator>
 
             <Popover.Content
               class="p-2 rounded-lg bg-surface border border-divider shadow-xl min-w-44 !mt-1"
-              position-area="bottom span-left"
-              position-try="bottom span-left, bottom span-right, top span-left, top span-right"
+              position-area="bottom span-right"
+              position-try="bottom span-right, bottom span-left, top span-right, top span-left"
             >
               <button
                 class="w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs font-medium transition-colors"
@@ -245,29 +252,25 @@
               </button>
             </Popover.Content>
           </Popover.Root>
-        </div>
-
-        <component :is="auto?.component" v-if="auto?.component" />
-        <slot v-else />
-      </Theme>
 
-      <!-- Code toggle button -->
-      <div v-if="!peek && (resolvedCode || displayFiles?.length)" class="border-t border-divider bg-surface-tint">
-        <button
-          :aria-controls="`${uid}-code`"
-          :aria-expanded="showCode"
-          class="group w-full px-4 py-3 bg-transparent border-none font-inherit text-sm cursor-pointer flex items-center gap-2 text-on-surface transition-colors hover:bg-surface"
-          type="button"
-          @click="toggleCode"
-        >
-          <AppLoaderIcon v-if="isLoading" variant="orbit" />
-          <AppIcon v-else-if="showCode && hasHighlightedCode" icon="chevron-up" :size="16" />
-          <AppIcon v-else class="transition-colors group-hover:text-primary" icon="code" :size="16" />
-          <span v-if="hasMultipleFiles" class="ml-auto opacity-60 font-mono text-[0.8125rem]">
-            {{ displayFiles!.length }} file(s)
-          </span>
-          <span v-else-if="fileName" class="ml-auto opacity-60 font-mono text-[0.8125rem]">{{ fileName }}</span>
-        </button>
+          <!-- Code toggle -->
+          <button
+            v-if="!peek && (resolvedCode || displayFiles?.length)"
+            :aria-controls="`${uid}-code`"
+            :aria-expanded="showCode"
+            class="group flex-1 px-4 py-3 bg-transparent border-none font-inherit text-sm cursor-pointer flex items-center gap-2 text-on-surface transition-colors hover:bg-surface"
+            type="button"
+            @click="toggleCode"
+          >
+            <AppLoaderIcon v-if="isLoading" variant="orbit" />
+            <AppIcon v-else-if="showCode && hasHighlightedCode" icon="chevron-up" :size="16" />
+            <AppIcon v-else class="transition-colors group-hover:text-primary" icon="code" :size="16" />
+            <span v-if="hasMultipleFiles" class="ml-auto opacity-60 font-mono text-[0.8125rem]">
+              {{ displayFiles!.length }} file(s)
+            </span>
+            <span v-else-if="fileName" class="ml-auto opacity-60 font-mono text-[0.8125rem]">{{ fileName }}</span>
+          </button>
+        </div>
       </div>
 
       <!-- Single file code display -->
diff --git a/apps/docs/src/pages/components/providers/theme.md b/apps/docs/src/pages/components/providers/theme.md
index fe0a6cb87..68c47b9ba 100644
--- a/apps/docs/src/pages/components/providers/theme.md
+++ b/apps/docs/src/pages/components/providers/theme.md
@@ -44,7 +44,7 @@ app.mount('#app')
 
 ## Usage
 
-Wrap any section in `<Theme>` to override the active theme for its subtree. Use the theme picker in the top-right corner of the example to see the card re-theme in place.
+Wrap any section in `<Theme>` to override the active theme for its subtree. Use the theme picker in the example toolbar to see the card re-theme in place.
 
 ::: example
 /components/theme/basic

From 1c9ee7f3bdc5a87941f169aec68077968cc7397e Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 5 Mar 2026 16:59:15 -0600
Subject: [PATCH 09/11] feat(Theme): set color on data-theme scoped elements

When a Theme component scopes a different theme (e.g. light inside
dark), text color was inherited from the parent instead of using the
scoped theme's on-background token. The adapter now emits
`color: var(--v0-on-background)` in every `[data-theme]` rule.
---
 packages/0/src/composables/useTheme/adapters/adapter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/0/src/composables/useTheme/adapters/adapter.ts b/packages/0/src/composables/useTheme/adapters/adapter.ts
index 321c60a90..62e73698d 100644
--- a/packages/0/src/composables/useTheme/adapters/adapter.ts
+++ b/packages/0/src/composables/useTheme/adapters/adapter.ts
@@ -47,7 +47,7 @@ export abstract class ThemeAdapter implements ThemeAdapterInterface {
         .map(([key, val]) => `  --${this.prefix}-${key}: ${val};`)
         .join('\n')
 
-      css += `[data-theme="${theme}"] {\n${vars}\n}\n`
+      css += `[data-theme="${theme}"] {\n${vars}\n  color: var(--${this.prefix}-on-background);\n}\n`
     }
 
     if (!isUndefined(isDark)) {

From 1e7c654487473f03358f16664e36c13689dc5e2f Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 5 Mar 2026 16:59:37 -0600
Subject: [PATCH 10/11] docs(DocsExample): hover-to-preview theme picker

Theme picker now previews on hover and commits on click. Mouse leave
reverts to the committed theme.
---
 apps/docs/src/components/docs/DocsExample.vue | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/apps/docs/src/components/docs/DocsExample.vue b/apps/docs/src/components/docs/DocsExample.vue
index 06030d184..18bc055cf 100644
--- a/apps/docs/src/components/docs/DocsExample.vue
+++ b/apps/docs/src/components/docs/DocsExample.vue
@@ -172,20 +172,32 @@
   // Per-example theme override
   const theme = useTheme()
   const toggle = useThemeToggle()
-  const themeOverride = shallowRef<string>()
+  const committed = shallowRef<string>()
+  const preview = shallowRef<string>()
+  const themeOverride = toRef(() => preview.value ?? committed.value)
   const themePickerOpen = ref(false)
-  const hasOverride = toRef(() => !!themeOverride.value)
+  const hasOverride = toRef(() => !!committed.value)
   const themeNames = toRef(() => theme.keys())
 
   function onTheme (name: string) {
-    themeOverride.value = themeOverride.value === name ? undefined : name
+    committed.value = committed.value === name ? undefined : name
+    preview.value = undefined
     themePickerOpen.value = false
   }
 
   function onResetTheme () {
-    themeOverride.value = undefined
+    committed.value = undefined
+    preview.value = undefined
     themePickerOpen.value = false
   }
+
+  function onPreview (name: string) {
+    preview.value = name
+  }
+
+  function onPreviewReset () {
+    preview.value = undefined
+  }
 </script>
 
 <template>
@@ -219,19 +231,21 @@
               title="Override theme"
             >
               <AppIcon :icon="toggle.icon.value" :size="16" />
-              <span v-if="hasOverride" class="text-xs font-medium capitalize">{{ themeOverride }}</span>
+              <span v-if="hasOverride" class="text-xs font-medium capitalize">{{ committed }}</span>
             </Popover.Activator>
 
             <Popover.Content
               class="p-2 rounded-lg bg-surface border border-divider shadow-xl min-w-44 !mt-1"
               position-area="bottom span-right"
               position-try="bottom span-right, bottom span-left, top span-right, top span-left"
+              @mouseleave="onPreviewReset"
             >
               <button
                 class="w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs font-medium transition-colors"
                 :class="!hasOverride ? 'bg-primary/15 text-primary' : 'hover:bg-surface-tint text-on-surface'"
                 type="button"
                 @click="onResetTheme"
+                @mouseenter="onPreviewReset"
               >
                 <AppIcon icon="close" :size="12" />
                 <span>Page default</span>
@@ -243,9 +257,10 @@
                 v-for="name in themeNames"
                 :key="name"
                 class="w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs font-medium transition-colors"
-                :class="themeOverride === name ? 'bg-primary/15 text-primary' : 'hover:bg-surface-tint text-on-surface'"
+                :class="committed === name ? 'bg-primary/15 text-primary' : 'hover:bg-surface-tint text-on-surface'"
                 type="button"
                 @click="onTheme(name)"
+                @mouseenter="onPreview(name)"
               >
                 <AppThemePreview :theme="name" />
                 <span class="capitalize">{{ name }}</span>

From 891cca13928a3f8d6b0eeb769d8cbc76d9142833 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 5 Mar 2026 17:00:03 -0600
Subject: [PATCH 11/11] docs(Playground): add preview theme picker

Replace AppThemeToggle with a combined theme popover featuring an
Editor/Preview segmented toggle. Editor tab mirrors the full theme
selector. Preview tab allows overriding the repl iframe theme
independently with hover-to-preview and click-to-persist.

The repl main.ts now generates all themes from the shared theme
definitions instead of hardcoding light/dark.
---
 .../playground/app/PlaygroundAppBar.vue       | 213 +++++++++++++++++-
 .../editor/PlaygroundEditorPreview.vue        |  10 +-
 .../src/composables/usePlaygroundTheme.ts     |  70 ++++++
 apps/docs/src/data/playground-defaults.ts     |  85 +++----
 4 files changed, 315 insertions(+), 63 deletions(-)
 create mode 100644 apps/docs/src/composables/usePlaygroundTheme.ts

diff --git a/apps/docs/src/components/playground/app/PlaygroundAppBar.vue b/apps/docs/src/components/playground/app/PlaygroundAppBar.vue
index d1cf79b6e..568b5acdb 100644
--- a/apps/docs/src/components/playground/app/PlaygroundAppBar.vue
+++ b/apps/docs/src/components/playground/app/PlaygroundAppBar.vue
@@ -2,22 +2,69 @@
   import { IN_BROWSER } from '#v0/constants/globals'
 
   // Framework
-  import { useBreakpoints, useHotkey, useStorage, useTheme } from '@vuetify/v0'
+  import { Popover, useBreakpoints, useHotkey, useStorage, useTheme } from '@vuetify/v0'
 
   // Components
   import { usePlayground } from './PlaygroundApp.vue'
 
+  // Composables
+  import { usePlaygroundTheme } from '@/composables/usePlaygroundTheme'
+  import { useThemeToggle, type ThemePreference } from '@/composables/useThemeToggle'
+
   // Utilities
-  import { computed } from 'vue'
+  import { computed, ref, shallowRef } from 'vue'
   import { RouterLink, useRouter } from 'vue-router'
 
+  // Types
+  import type { ThemeId } from '@/themes'
+
   const router = useRouter()
   const theme = useTheme()
+  const toggle = useThemeToggle()
   const playground = usePlayground()
   const breakpoints = useBreakpoints()
   const storage = useStorage()
   const left = storage.get('playground-left-open', true)
   const side = storage.get('playground-preview-right', false)
+  const {
+    names,
+    committed,
+    hasOverride,
+    onTheme,
+    onReset,
+    onPreview,
+    onPreviewReset,
+  } = usePlaygroundTheme()
+
+  const pickerOpen = ref(false)
+  const target = shallowRef<'editor' | 'preview'>('editor')
+
+  interface ThemeOption {
+    id: ThemePreference
+    label: string
+    icon: string
+    theme?: ThemeId
+  }
+
+  const modeOptions: ThemeOption[] = [
+    { id: 'system', label: 'System', icon: 'theme-system' },
+    { id: 'light', label: 'Light', icon: 'theme-light', theme: 'light' },
+    { id: 'dark', label: 'Dark', icon: 'theme-dark', theme: 'dark' },
+  ]
+
+  const accessibilityOptions: ThemeOption[] = [
+    { id: 'high-contrast', label: 'High Contrast', icon: 'theme-high-contrast', theme: 'high-contrast' },
+    { id: 'protanopia', label: 'Protanopia', icon: 'theme-protanopia', theme: 'protanopia' },
+    { id: 'deuteranopia', label: 'Deuteranopia', icon: 'theme-deuteranopia', theme: 'deuteranopia' },
+    { id: 'tritanopia', label: 'Tritanopia', icon: 'theme-tritanopia', theme: 'tritanopia' },
+  ]
+
+  const vuetifyOptions: ThemeOption[] = [
+    { id: 'blackguard', label: 'Blackguard', icon: 'theme-blackguard', theme: 'blackguard' },
+    { id: 'polaris', label: 'Polaris', icon: 'theme-polaris', theme: 'polaris' },
+    { id: 'nebula', label: 'Nebula', icon: 'theme-nebula', theme: 'nebula' },
+    { id: 'odyssey', label: 'Odyssey', icon: 'theme-odyssey', theme: 'odyssey' },
+  ]
 
   useHotkey('ctrl+b', () => playground.toggle('workspace-left'), { inputs: true })
 
@@ -116,7 +163,167 @@
         <AppIcon :icon="playground.selected('workspace-right') ? 'editor' : 'eye'" />
       </button>
 
-      <AppThemeToggle />
+      <!-- Theme picker -->
+      <Popover.Root v-model="pickerOpen">
+        <Popover.Activator
+          aria-label="Select theme"
+          class="bg-surface-tint text-on-surface-tint pa-1 inline-flex items-center gap-1.5 rounded hover:bg-surface-variant transition-all cursor-pointer"
+          :title="toggle.title.value"
+        >
+          <AppIcon :icon="toggle.icon.value" />
+          <span v-if="hasOverride" class="text-[10px] font-semibold text-primary">PREVIEW</span>
+        </Popover.Activator>
+
+        <Popover.Content
+          class="p-3 rounded-lg bg-surface border border-divider shadow-xl min-w-56 !mt-1"
+          position-area="bottom span-left"
+          position-try="bottom span-left, bottom span-right, top span-left, top span-right"
+        >
+          <!-- Header -->
+          <div class="flex items-center justify-between mb-3 ps-1">
+            <span class="text-xs font-semibold text-on-surface">Theme</span>
+            <AppCloseButton size="sm" @click="pickerOpen = false" />
+          </div>
+
+          <!-- Target toggle -->
+          <div class="flex gap-1 mb-3 p-0.5 rounded bg-surface-tint">
+            <button
+              :aria-pressed="target === 'editor'"
+              class="flex-1 px-3 py-1 rounded text-xs font-medium transition-colors"
+              :class="target === 'editor'
+                ? 'bg-surface text-on-surface shadow-sm'
+                : 'text-on-surface-variant hover:text-on-surface'"
+              type="button"
+              @click="target = 'editor'"
+            >
+              Editor
+            </button>
+            <button
+              :aria-pressed="target === 'preview'"
+              class="flex-1 px-3 py-1 rounded text-xs font-medium transition-colors"
+              :class="target === 'preview'
+                ? 'bg-surface text-on-surface shadow-sm'
+                : 'text-on-surface-variant hover:text-on-surface'"
+              type="button"
+              @click="target = 'preview'"
+            >
+              Preview
+            </button>
+          </div>
+
+          <!-- Editor mode -->
+          <template v-if="target === 'editor'">
+            <!-- Mode -->
+            <div class="mb-3">
+              <div class="text-xs font-medium text-on-surface-variant mb-2 px-1">Mode</div>
+              <div class="flex gap-1">
+                <button
+                  v-for="option in modeOptions"
+                  :key="option.id"
+                  :aria-pressed="toggle.preference.value === option.id"
+                  :class="[
+                    'flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors',
+                    toggle.preference.value === option.id
+                      ? 'bg-primary/15 text-primary'
+                      : 'hover:bg-surface-tint text-on-surface',
+                  ]"
+                  type="button"
+                  @click="toggle.setPreference(option.id)"
+                >
+                  <AppIcon :icon="option.icon" size="14" />
+                  <span>{{ option.label }}</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Accessibility -->
+            <div class="mb-3">
+              <div class="text-xs font-medium text-on-surface-variant mb-2 px-1">Accessibility</div>
+              <div class="grid grid-cols-2 gap-1">
+                <button
+                  v-for="option in accessibilityOptions"
+                  :key="option.id"
+                  :aria-pressed="toggle.preference.value === option.id"
+                  :class="[
+                    'flex flex-col items-start gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors',
+                    toggle.preference.value === option.id
+                      ? 'bg-primary/15 text-primary'
+                      : 'hover:bg-surface-tint text-on-surface',
+                  ]"
+                  type="button"
+                  @click="toggle.setPreference(option.id)"
+                >
+                  <div class="flex items-center gap-1.5">
+                    <AppIcon :icon="option.icon" size="14" />
+                    <span>{{ option.label }}</span>
+                  </div>
+                  <AppThemePreview v-if="option.theme" :theme="option.theme" />
+                </button>
+              </div>
+            </div>
+
+            <!-- Vuetify Themes -->
+            <div>
+              <div class="text-xs font-medium text-on-surface-variant mb-2 px-1">Vuetify</div>
+              <div class="grid grid-cols-2 gap-1">
+                <button
+                  v-for="option in vuetifyOptions"
+                  :key="option.id"
+                  :aria-pressed="toggle.preference.value === option.id"
+                  :class="[
+                    'flex flex-col items-start gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors',
+                    toggle.preference.value === option.id
+                      ? 'bg-primary/15 text-primary'
+                      : 'hover:bg-surface-tint text-on-surface',
+                  ]"
+                  type="button"
+                  @click="toggle.setPreference(option.id)"
+                >
+                  <div class="flex items-center gap-1.5">
+                    <AppIcon :icon="option.icon" size="14" />
+                    <span>{{ option.label }}</span>
+                  </div>
+                  <AppThemePreview v-if="option.theme" :theme="option.theme" />
+                </button>
+              </div>
+            </div>
+          </template>
+
+          <!-- Preview mode -->
+          <template v-else>
+            <button
+              class="w-full flex items-center gap-2 px-2 py-1.5 rounded text-xs font-medium transition-colors mb-2"
+              :class="!hasOverride ? 'bg-primary/15 text-primary' : 'hover:bg-surface-tint text-on-surface'"
+              type="button"
+              @click="onReset"
+              @mouseenter="onPreviewReset"
+            >
+              <AppIcon icon="close" :size="12" />
+              <span>Same as editor</span>
+            </button>
+
+            <div
+              class="grid grid-cols-2 gap-1"
+              @mouseleave="onPreviewReset"
+            >
+              <button
+                v-for="name in names"
+                :key="name"
+                class="flex flex-col items-start gap-1.5 px-2 py-1.5 rounded text-xs font-medium transition-colors"
+                :class="committed === name ? 'bg-primary/15 text-primary' : 'hover:bg-surface-tint text-on-surface'"
+                type="button"
+                @click="onTheme(name)"
+                @mouseenter="onPreview(name)"
+              >
+                <div class="flex items-center gap-1.5">
+                  <AppThemePreview :theme="name" />
+                  <span class="capitalize">{{ name }}</span>
+                </div>
+              </button>
+            </div>
+          </template>
+        </Popover.Content>
+      </Popover.Root>
     </div>
   </header>
 </template>
diff --git a/apps/docs/src/components/playground/editor/PlaygroundEditorPreview.vue b/apps/docs/src/components/playground/editor/PlaygroundEditorPreview.vue
index 5d5e8d579..125ab7e94 100644
--- a/apps/docs/src/components/playground/editor/PlaygroundEditorPreview.vue
+++ b/apps/docs/src/components/playground/editor/PlaygroundEditorPreview.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-  // Framework
-  import { useTheme } from '@vuetify/v0'
-
   // Components
   import { usePlayground } from '@/components/playground/app/PlaygroundApp.vue'
 
+  // Composables
+  import { usePlaygroundTheme } from '@/composables/usePlaygroundTheme'
+
   // Utilities
   import { Sandbox } from '@vue/repl'
 
   const playground = usePlayground()
   const store = playground.store
-  const theme = useTheme()
+  const { sandboxTheme } = usePlaygroundTheme()
 </script>
 
 <template>
@@ -20,7 +20,7 @@
       :clear-console="false"
       show
       :store="store"
-      :theme="theme.isDark.value ? 'dark' : 'light'"
+      :theme="sandboxTheme"
     />
   </div>
 </template>
diff --git a/apps/docs/src/composables/usePlaygroundTheme.ts b/apps/docs/src/composables/usePlaygroundTheme.ts
new file mode 100644
index 000000000..99fc97c69
--- /dev/null
+++ b/apps/docs/src/composables/usePlaygroundTheme.ts
@@ -0,0 +1,70 @@
+// Framework
+import { useTheme } from '@vuetify/v0'
+
+// Components
+import { usePlayground } from '@/components/playground/app/PlaygroundApp.vue'
+
+// Composables
+import { useThemeToggle } from '@/composables/useThemeToggle'
+
+// Utilities
+import { shallowRef, toRef, watch } from 'vue'
+
+// Data
+import { createMainTs } from '@/data/playground-defaults'
+
+const committed = shallowRef<string>()
+const preview = shallowRef<string>()
+
+export function usePlaygroundTheme () {
+  const theme = useTheme()
+  const toggle = useThemeToggle()
+  const playground = usePlayground()
+  const store = playground.store
+
+  const names = toRef(() => theme.keys())
+  const active = toRef(() => preview.value ?? committed.value ?? toggle.preference.value)
+  const hasOverride = toRef(() => !!committed.value)
+
+  const sandboxTheme = toRef(() => {
+    if (!committed.value && !preview.value) return theme.isDark.value ? 'dark' : 'light'
+    const ticket = theme.get(active.value)
+    return ticket?.dark ? 'dark' : 'light'
+  })
+
+  watch(active, value => {
+    const main = store.files['src/main.ts']
+    if (!main) return
+    main.code = createMainTs(value)
+  })
+
+  function onTheme (name: string) {
+    committed.value = committed.value === name ? undefined : name
+    preview.value = undefined
+  }
+
+  function onReset () {
+    committed.value = undefined
+    preview.value = undefined
+  }
+
+  function onPreview (name: string) {
+    preview.value = name
+  }
+
+  function onPreviewReset () {
+    preview.value = undefined
+  }
+
+  return {
+    names,
+    active,
+    committed,
+    hasOverride,
+    sandboxTheme,
+    onTheme,
+    onReset,
+    onPreview,
+    onPreviewReset,
+  }
+}
diff --git a/apps/docs/src/data/playground-defaults.ts b/apps/docs/src/data/playground-defaults.ts
index 68a28d1c1..a2d5667c3 100644
--- a/apps/docs/src/data/playground-defaults.ts
+++ b/apps/docs/src/data/playground-defaults.ts
@@ -1,3 +1,9 @@
+// Types
+import type { ThemeId } from '@/themes'
+
+// Data
+import { themes } from '@/themes'
+
 // ── Infrastructure file constants ────────────────────────────────────────
 
 /** Files generated by the editor infrastructure (not user-created) */
@@ -8,7 +14,29 @@ export const REPL_BUILTIN_FILES = ['import-map.json', 'tsconfig.json'] as const
 
 // ── Template files (matching Vuetify Play's v0 template) ────────────────
 
-export function createMainTs (defaultTheme: 'light' | 'dark' = 'light'): string {
+/** Colors that are only used by the docs shell, not relevant for repl examples */
+const EXCLUDED_COLORS = new Set(['glass-surface', 'scrollbar-thumb', 'discord', 'vue', 'mastered', 'github'])
+
+function serializeTheme (id: ThemeId): string {
+  const t = themes[id]
+  const colors = Object.entries(t.colors)
+    .filter(([key, val]) => !EXCLUDED_COLORS.has(key) && !val.startsWith('{'))
+    .map(([key, val]) => `        '${key}': '${val}',`)
+    .join('\n')
+
+  return `    '${id}': {
+      dark: ${t.dark},
+      colors: {
+${colors}
+      },
+    },`
+}
+
+function serializeAllThemes (): string {
+  return (Object.keys(themes) as ThemeId[]).map(serializeTheme).join('\n')
+}
+
+export function createMainTs (defaultTheme = 'light'): string {
   return `import { createApp } from 'vue'
 import App from './App.vue'
 import { createThemePlugin } from '@vuetify/v0'
@@ -17,60 +45,7 @@ import './uno.config.ts'
 const theme = createThemePlugin({
   default: '${defaultTheme}',
   themes: {
-    light: {
-      dark: false,
-      colors: {
-        'primary': '#3b82f6',
-        'secondary': '#64748b',
-        'accent': '#6366f1',
-        'error': '#ef4444',
-        'info': '#1867c0',
-        'success': '#22c55e',
-        'warning': '#f59e0b',
-        'background': '#ffffff',
-        'surface': '#ffffff',
-        'surface-tint': '#f5f5f5',
-        'surface-variant': '#e8e8e8',
-        'divider': '#e0e0e0',
-        'on-primary': '#ffffff',
-        'on-secondary': '#ffffff',
-        'on-accent': '#1a1a1a',
-        'on-error': '#ffffff',
-        'on-info': '#ffffff',
-        'on-success': '#1a1a1a',
-        'on-warning': '#1a1a1a',
-        'on-background': '#212121',
-        'on-surface': '#212121',
-        'on-surface-variant': '#666666',
-      },
-    },
-    dark: {
-      dark: true,
-      colors: {
-        'primary': '#c4b5fd',
-        'secondary': '#94a3b8',
-        'accent': '#c084fc',
-        'error': '#f87171',
-        'info': '#38bdf8',
-        'success': '#4ade80',
-        'warning': '#fb923c',
-        'background': '#121212',
-        'surface': '#1a1a1a',
-        'surface-tint': '#2a2a2a',
-        'surface-variant': '#1e1e1e',
-        'divider': '#404040',
-        'on-primary': '#1a1a1a',
-        'on-secondary': '#ffffff',
-        'on-accent': '#ffffff',
-        'on-error': '#1a1a1a',
-        'on-info': '#1a1a1a',
-        'on-success': '#1a1a1a',
-        'on-warning': '#1a1a1a',
-        'on-background': '#e0e0e0',
-        'on-surface': '#e0e0e0',
-        'on-surface-variant': '#a0a0a0',
-      },
-    },
+${serializeAllThemes()}
   },
 })