Vuetify 3.0中如何使用主题自定义sizes变量？

配置与问题描述 #

我的Vuetify配置如下：

const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'light',
    themes: {
      dark: {
        colors: {
          background: '#000000',
          primary: '#23252B',
          'primary-1': '#1B1C21',
          'primary-2': '#141519',
          error: '#B00020',
          info: '#0017D0',
          success: '#4CAF50',
          warning: '#FB8C00',
        },
      },
      light: {
        colors: {
          background: '#EEF2F5',
          primary: '#FFFFFF',
          'primary-1': '#DEE2FF',
          'primary-2': '#141519',
          error: '#B00020',
          info: '#0017D0',
          success: '#4CAF50',
          warning: '#FB8C00',
          label: '#555555'
        },
        sizes: {
          'account-card': '500px',
          'account-list-card': '380px'
        }
      },
    },
  },
})

使用颜色主题变量时，以下写法正常生效：

.div {
  color: rgb(var(--v-theme-primary))
}

但尝试使用自定义sizes下的account-card等变量时，rgb(var(--v-sizes-account-card))和var(--v-sizes-account-card)两种写法都无效，请问如何正确使用这类自定义尺寸变量？

解决方法 #

Vuetify默认只会把theme.themes[xxx].colors下的属性自动转换为全局CSS自定义变量，自定义的sizes字段不会自动生成对应的--v-前缀变量，需要通过以下两种方式实现：

方法1：手动注入CSS自定义变量 #

在Vuetify的主题配置中添加cssVars选项，手动将sizes变量注入为CSS全局变量：

const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'light',
    themes: {
      // 保留原有dark、light主题配置
      dark: { /* ... */ },
      light: { /* ... */ }
    },
    cssVars: (theme) => {
      const currentTheme = theme.themes[theme.current]
      return {
        ...theme.vars,
        '--v-sizes-account-card': currentTheme.sizes['account-card'],
        '--v-sizes-account-list-card': currentTheme.sizes['account-list-card'],
      }
    }
  },
})

配置完成后，就可以在样式中直接使用：

.account-card {
  width: var(--v-sizes-account-card);
}

方法2：通过组合式API在组件内引用 #

在Vue单文件组件中，使用Vuetify提供的useTheme钩子获取主题对象，直接引用尺寸值：

<template>
  <div :style="{ width: theme.sizes['account-card'] }">
    账户卡片
  </div>
</template>

<script setup>
import { useTheme } from 'vuetify'

const theme = useTheme()
</script>

适用场景 #

• 如果需要在全局CSS文件（如main.css）中复用尺寸变量，优先选方法1；
• 如果仅在单个组件内使用尺寸值，方法2更简洁，无需额外配置全局变量。

内容的提问来源于stack exchange，提问作者Iandrisoa Tactic Rayan