fix(theme): set defaultTheme variables on :root

fixes #16751
fixes #16853

packages/vuetify/src/composables/theme.ts

@@ -264,19 +264,12 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
       createCssClass(lines, ':root', ['color-scheme: dark'])
     }
 
-    for (const [themeName, theme] of Object.entries(computedThemes.value)) {
-      const { variables, dark } = theme
+    createCssClass(lines, ':root', genCssVariables(current.value))
 
+    for (const [themeName, theme] of Object.entries(computedThemes.value)) {
       createCssClass(lines, `.v-theme--${themeName}`, [
-        `color-scheme: ${dark ? 'dark' : 'normal'}`,
+        `color-scheme: ${theme.dark ? 'dark' : 'normal'}`,
         ...genCssVariables(theme),
-        ...Object.keys(variables).map(key => {
-          const value = variables[key]
-          const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined
-          const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined
-
-          return `--v-${key}: ${rgb ?? value}`
-        }),
       ])
     }
 
@@ -425,5 +418,11 @@ function genCssVariables (theme: InternalThemeDefinition) {
     }
   }
 
+  for (const [key, value] of Object.entries(theme.variables)) {
+    const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined
+    const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined
+    variables.push(`--v-${key}: ${rgb ?? value}`)
+  }
+
   return variables
 }

packages/vuetify/src/styles/elements/_global.sass

@@ -14,11 +14,6 @@ html.overflow-y-hidden
   overflow-y: hidden !important
 
 :root
-  --v-theme-background: #fff
-  --v-theme-on-background: #000
-  --v-theme-surface: #fff
-  --v-theme-on-surface: #000
-  --v-theme-overlay-multiplier: 1
   --v-scrollbar-offset: 0px
 
 // iOS Safari hack to allow click events on body