refactor: migrate theme system to @vuetify/v0

packages/docs/src/pages/en/getting-started/upgrade-guide.md

@@ -21,3 +21,30 @@ This page contains a detailed list of breaking changes and the steps required to
 
 - Returned Refs are now readonly.
 - Breakpoints are matched with `window.matchMedia` instead of `window.innerWidth`. This may result in slightly different values at zoom levels other than 100%.
+
+## Theme
+
+The theme system now uses `@vuetify/v0` under the hood. The consumer API (`useTheme`, `VThemeProvider`) is unchanged for most users.
+
+### ThemeInstance
+
+Several properties have been removed from the `ThemeInstance` type:
+
+- `styles` — CSS injection is now handled internally by the theme adapter
+- `isDisabled` — themes are always enabled
+- `isSystem` — check `name.value === 'system'` directly
+
+### Runtime theme changes
+
+Assigning new themes directly to `themes.value` is replaced by `register()`:
+
+```diff
+- theme.themes.value.custom = { dark: true, colors: { primary: '#ff5722' } }
++ theme.register({ id: 'custom', dark: true, colors: { primary: '#ff5722' } })
+```
+
+Mutating existing theme colors continues to work:
+
+```ts
+theme.themes.value.light.colors.primary = '#ff0000'
+```

packages/vuetify/src/components/VThemeProvider/VThemeProvider.tsx

@@ -1,6 +1,9 @@
 // Styles
 import './VThemeProvider.sass'
 
+// Components
+import { Theme } from '@vuetify/v0/components'
+
 // Composables
 import { makeComponentProps } from '@/composables/component'
 import { makeTagProps } from '@/composables/tag'
@@ -26,19 +29,27 @@ export const VThemeProvider = genericComponent()({
     const { themeClasses } = provideTheme(props)
 
     return () => {
-      if (!props.withBackground) return slots.default?.()
+      if (!props.withBackground) {
+        return (
+          <Theme theme={ props.theme } renderless>
+            { slots.default?.() }
+          </Theme>
+        )
+      }
 
       return (
-        <props.tag
-          class={[
-            'v-theme-provider',
-            themeClasses.value,
-            props.class,
-          ]}
-          style={ props.style }
-        >
-          { slots.default?.() }
-        </props.tag>
+        <Theme theme={ props.theme } renderless>
+          <props.tag
+            class={[
+              'v-theme-provider',
+              themeClasses.value,
+              props.class,
+            ]}
+            style={ props.style }
+          >
+            { slots.default?.() }
+          </props.tag>
+        </Theme>
       )
     }
   },