feat(theme): theme prop is now available on each component (#13718)

Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>

packages/api-generator/src/locale/en/theme.json

@@ -0,0 +1,5 @@
+{
+  "props": {
+    "theme": "Specify a theme for this component and all of its children"
+  }
+}

packages/api-generator/src/locale/en/v-app.json

@@ -1,5 +1,3 @@
 {
-  "props": {
-    "theme": "Theme to be applied to the component."
-  }
-}
+  "props": {}
+}

packages/docs/src/data/nav-alpha.json

@@ -58,7 +58,8 @@
       "item-groups",
       "lazy",
       "overlays",
-      "sheets"
+      "sheets",
+      "theme-providers"
     ]
   },
   {

packages/docs/src/examples/v-theme-provider/prop-with-background.vue

@@ -0,0 +1,5 @@
+<template>
+  <v-theme-provider theme="dark" with-background class="pa-10">
+    <v-card title="Title" subtitle="Subtitle"></v-card>
+  </v-theme-provider>
+</template>

packages/docs/src/pages/en/components/theme-providers.md

@@ -0,0 +1,24 @@
+---
+meta:
+  title: Theme provider component
+  description: The theme provider allows you to style a section of your application in a different theme from the default
+  keywords: theme provider, vuetify theme provider component, vue theme provider component
+related:
+  - /features/theme/
+---
+
+# Theme providers
+
+The theme provider allows you to style a section of your application in a different theme from the default
+
+## API
+
+- [v-theme-provider](/api/v-theme-provider)
+
+## Examples
+
+### Background
+
+By default, `v-theme-provider` is a renderless component that allows you to change the applied theme for all of its children. When using the **with-background** prop, the `v-theme-provider` wraps its children in an element and applies the selected theme's background color to it.
+
+<example file="v-theme-provider/prop-with-background">

packages/docs/src/pages/en/features/theme.md

@@ -95,7 +95,20 @@ export default {
 </script>
 ```
 
-Use the `<v-theme-provider>` component to dynamically apply different themes to *specific* sections of your application. In the following example, we apply a custom theme named `high-contrast`:
+Most components support the **theme** prop. When used, a new context is created for _that_ specific component and **all** of its children. In the following example, the [v-btn](/components/buttons/) uses the **dark** theme applied by its parent [v-card](/components/cards/).
+
+```html
+<template>
+  <v-app>
+    <v-card theme="dark">
+      <!-- button uses dark theme -->
+      <v-btn>foo</v-btn>
+    </v-card>
+  </v-app>
+</template>
+```
+
+You can use the `<v-theme-provider>` component to dynamically apply different themes to larger sections of your application, without having to set the **theme** prop on each individual component. In the following example, we apply a custom theme named `high-contrast`.
 
 ```html
 <template>
@@ -105,9 +118,8 @@ Use the `<v-theme-provider>` component to dynamically apply different themes to
 
     <v-theme-provider theme="high-contrast">
       <!-- uses the high-contrast theme -->
-      <v-card>
-         ...
-      </v-card>
+      <v-card>...</v-card>
+      <v-btn>...</v-btn>
     </v-theme-provider>
   </v-app>
 </template>

packages/vuetify/src/components/VApp/VApp.tsx

@@ -2,7 +2,7 @@
 import './VApp.sass'
 
 // Composables
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 import { createLayout, makeLayoutProps } from '@/composables/layout'
 
 // Utilities
@@ -14,12 +14,12 @@ export default defineComponent({
   name: 'VApp',
 
   props: makeProps({
-    theme: String,
     ...makeLayoutProps({ fullHeight: true }),
+    ...makeThemeProps(),
   }),
 
   setup (props, { slots }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { layoutClasses } = createLayout(props)
     const { rtlClasses } = useRtl()
 

packages/vuetify/src/components/VBanner/VBanner.tsx

@@ -8,7 +8,7 @@ import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makePositionProps, usePosition } from '@/composables/position'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 
 // Utilities
 import { defineComponent } from 'vue'
@@ -29,10 +29,11 @@ export default defineComponent({
     ...makePositionProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
+    ...makeThemeProps(),
   }),
 
   setup (props, { slots }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { borderClasses } = useBorder(props, 'v-banner')
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)

packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx

@@ -10,7 +10,7 @@ import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 import { useBackgroundColor, useTextColor } from '@/composables/color'
 import { useProxiedModel } from '@/composables/proxiedModel'
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 
 // Utilities
 import { computed, defineComponent } from 'vue'
@@ -44,14 +44,15 @@ export default defineComponent({
       name: 'bottom-navigation',
     }),
     ...makeTagProps({ tag: 'header' }),
+    ...makeThemeProps(),
   }),
 
   emits: {
     'update:modelValue': (value: boolean) => true,
   },
 
   setup (props, { slots }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { borderClasses } = useBorder(props, 'v-bottom-navigation')
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(computed(() => props.bgColor))
     const { textColorClasses, textColorStyles } = useTextColor(computed(() => props.color))

packages/vuetify/src/components/VBtn/VBtn.tsx

@@ -12,7 +12,7 @@ import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makePositionProps, usePosition } from '@/composables/position'
 import { makeTagProps } from '@/composables/tag'
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 import { useColor } from '@/composables/color'
 
 // Directives
@@ -50,10 +50,11 @@ export default defineComponent({
     ...makePositionProps(),
     ...makeSizeProps(),
     ...makeTagProps({ tag: 'button' }),
+    ...makeThemeProps(),
   }),
 
   setup (props, { slots }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { borderClasses } = useBorder(props, 'v-btn')
     const { roundedClasses } = useRounded(props, 'v-btn')
     const { densityClasses } = useDensity(props, 'v-btn')

packages/vuetify/src/components/VCard/VCard.tsx

@@ -25,7 +25,7 @@ import { makePositionProps, usePosition } from '@/composables/position'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 import { useBackgroundColor } from '@/composables/color'
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 
 // Directives
 import { Ripple } from '@/directives/ripple'
@@ -54,6 +54,7 @@ export default defineComponent({
     subtitle: String,
     text: String,
     title: String,
+    ...makeThemeProps(),
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
@@ -64,7 +65,7 @@ export default defineComponent({
   }),
 
   setup (props, { slots }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
     const { borderClasses } = useBorder(props, 'v-card')
     const { dimensionStyles } = useDimension(props)

packages/vuetify/src/components/VCard/_variables.scss

@@ -6,15 +6,15 @@ $card-avatar-header-padding: 0 !default;
 $card-avatar-margin-end: 1rem !default;
 $card-avatar-margin-start: 1rem !default;
 $card-avatar-padding: .5rem 1rem !default;
-$card-background: var(--v-theme-surface) !default;
+$card-background: rgb(var(--v-theme-surface)) !default;
 $card-border-before-elevation: 0 !default;
 $card-border-color: $border-color-root !default;
 $card-border-elevation: 0 !default;
 $card-border-radius: $border-radius-root !default;
 $card-border-style: $border-style-root !default;
 $card-border-thin-width: thin !default;
 $card-border-width: 0 !default;
-$card-color: var(--v-theme-on-surface) !default;
+$card-color: rgb(var(--v-theme-on-surface)) !default;
 $card-disabled-opacity: 0.6 !default;
 $card-elevation: 1 !default;
 $card-hover-elevation: 8 !default;

packages/vuetify/src/components/VDivider/VDivider.tsx

@@ -6,7 +6,7 @@ import { computed, defineComponent } from 'vue'
 import { convertToUnit, makeProps } from '@/util'
 
 // Composables
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 
 // Types
 type DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'maxHeight' | 'maxWidth'
@@ -20,10 +20,11 @@ export default defineComponent({
     length: [Number, String],
     thickness: [Number, String],
     vertical: Boolean,
+    ...makeThemeProps(),
   }),
 
   setup (props, { attrs }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const dividerStyles = computed(() => {
       const styles: DividerStyles = {}
 

packages/vuetify/src/components/VFooter/VFooter.tsx

@@ -8,7 +8,7 @@ import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makePositionProps, usePosition } from '@/composables/position'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 
 // Utilities
 import { defineComponent } from 'vue'
@@ -25,10 +25,11 @@ export default defineComponent({
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeTagProps({ tag: 'footer' }),
+    ...makeThemeProps(),
   }),
 
   setup (props, { slots }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { borderClasses } = useBorder(props, 'v-footer')
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)

packages/vuetify/src/components/VItemGroup/VItemGroup.tsx

@@ -4,7 +4,7 @@ import './VItemGroup.sass'
 // Composables
 import { makeGroupProps, useGroup } from '@/composables/group'
 import { makeTagProps } from '@/composables/tag'
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 
 // Utilities
 import { defineComponent } from 'vue'
@@ -20,14 +20,15 @@ export default defineComponent({
       selectedClass: 'v-item--selected',
     }),
     ...makeTagProps(),
+    ...makeThemeProps(),
   }),
 
   emits: {
     'update:modelValue': (value: any) => true,
   },
 
   setup (props, { slots }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { isSelected, select, next, prev, selected } = useGroup(props, VItemGroupSymbol)
 
     return () => (

packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx

@@ -9,7 +9,7 @@ import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 import { useDisplay } from '@/composables/display'
 import { useProxiedModel } from '@/composables/proxiedModel'
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 
 // Utilities
 import { computed, defineComponent, onBeforeMount, ref, toRef, watch } from 'vue'
@@ -50,10 +50,11 @@ export default defineComponent({
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
     ...makeTagProps({ tag: 'nav' }),
+    ...makeThemeProps(),
   }),
 
   setup (props, { slots }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { borderClasses } = useBorder(props, 'v-navigation-drawer')
     const { elevationClasses } = useElevation(props)
     const { mobile } = useDisplay()

packages/vuetify/src/components/VOverlay/VOverlay.tsx

@@ -7,7 +7,7 @@ import { ClickOutside } from '@/directives/click-outside'
 // Composables
 import { useBackgroundColor } from '@/composables/color'
 import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { useTeleport } from '@/composables/teleport'
 
@@ -175,6 +175,7 @@ export default defineComponent({
       default: 'block',
       validator: (val: any) => scrollStrategies.includes(val),
     },
+    ...makeThemeProps(),
     ...makeTransitionProps(),
   }),
 
@@ -186,7 +187,7 @@ export default defineComponent({
   setup (props, { slots, attrs, emit }) {
     const isActive = useProxiedModel(props, 'modelValue')
     const { teleportTarget } = useTeleport(toRef(props, 'attach'))
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { rtlClasses } = useRtl()
     const { isBooted } = useBooted(isActive, toRef(props, 'eager'))
     const scrimColor = useBackgroundColor(computed(() => {

packages/vuetify/src/components/VSheet/VSheet.tsx

@@ -9,7 +9,7 @@ import { makePositionProps, usePosition } from '@/composables/position'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 import { useBackgroundColor } from '@/composables/color'
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 
 // Utilities
 import { defineComponent, toRef } from 'vue'
@@ -29,10 +29,11 @@ export default defineComponent({
     ...makePositionProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
+    ...makeThemeProps(),
   }),
 
   setup (props, { slots }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
     const { borderClasses } = useBorder(props, 'v-sheet')
     const { dimensionStyles } = useDimension(props)

packages/vuetify/src/components/VSystemBar/VSystemBar.tsx

@@ -8,7 +8,7 @@ import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makePositionProps, usePosition } from '@/composables/position'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
-import { useTheme } from '@/composables/theme'
+import { makeThemeProps, useTheme } from '@/composables/theme'
 
 // Utilities
 import { defineComponent } from 'vue'
@@ -26,10 +26,11 @@ export default defineComponent({
     ...makePositionProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
+    ...makeThemeProps(),
   }),
 
   setup (props, { slots }) {
-    const { themeClasses } = useTheme()
+    const { themeClasses } = useTheme(props)
     const { borderClasses } = useBorder(props, 'v-system-bar')
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)