Vuetify3如何获取主色lighten/darken变体CSS变量？

1. 使用内置颜色处理函数 #

Vuetify 3 内置了lighten和darken颜色工具函数，无需额外依赖即可直接导入使用：

// 在Vue组件或JS文件中导入
import { lighten, darken } from 'vuetify/lib/util/colors'

// 计算指定颜色的变体
const primaryLighten2 = lighten('#你的主色值', 0.2)
const primaryDarken2 = darken('#你的主色值', 0.2)

如果在<script setup>中，可结合useVuetify获取当前主题的主色值再计算：

import { useVuetify } from 'vuetify'
import { lighten, darken } from 'vuetify/lib/util/colors'

const vuetify = useVuetify()
const primaryColor = vuetify.theme.current.value.colors.primary
const primaryLighten2 = lighten(primaryColor, 0.2)
const primaryDarken2 = darken(primaryColor, 0.2)

计算得到的颜色值可直接绑定到元素样式，或自定义为CSS变量供全局使用：

<template>
  <div :style="{ '--v-primary-lighten2': primaryLighten2 }">
    <!-- 业务内容 -->
  </div>
</template>

2. 在主题配置中预定义颜色变体 #

初始化Vuetify时，可手动扩展主题颜色，自动生成对应CSS变量：

// vuetify.config.js
import { createVuetify } from 'vuetify'
import { lighten, darken } from 'vuetify/lib/util/colors'

export default createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          // 手动添加多阶变体
          'primary-lighten-1': lighten('#1976D2', 0.1),
          'primary-lighten-2': lighten('#1976D2', 0.2),
          'primary-darken-2': darken('#1976D2', 0.2),
        },
      },
    },
  },
})

配置完成后，即可在CSS中直接调用自动生成的变量：

.target-element {
  background-color: var(--v-theme-primary-lighten-2);
}

3. 使用内置颜色类名（模板内直接应用） #

如果是在Vue模板中快速应用颜色变体，可直接使用Vuetify提供的类名，比如bg-primary-lighten-2、text-primary-darken-2：

<template>
  <div class="bg-primary-lighten-2 text-primary-darken-2">
    带颜色变体的内容区块
  </div>
</template>

替代方案补充说明 #

使用CSS的brightness属性可能会导致文本颜色对比度失衡，若必须使用，建议搭配Vuetify的text-{color}类保证可读性；而原生方案能更好地与Vuetify主题系统对齐，避免颜色偏差。

内容的提问来源于stack exchange，提问作者TomFree