如何获取Vuetify标准主题颜色变量及变量与RGB映射关系？

Vuetify 3+的默认light/dark主题颜色变量确实是通过JS动态生成的，没有现成的静态映射表文件，但你可以通过以下几种方式获取精确的RGB值：

1. 浏览器开发者工具直接查看实时值 #

这是最快捷的方法：

• 打开你的Vuetify项目页面，切换到目标主题（light或dark）
• 按下F12打开开发者工具，在Elements面板的Styles标签下，找到根元素（<html>或<body>）
• 查看根元素上的CSS变量，所有--v-theme-*开头的变量就是主题颜色的RGB分量（例如--v-theme-surface: 255,255,255），直接组合为rgb(255,255,255)即可用于SVG

2. 借助Vuetify的主题API生成完整映射列表 #

你可以在项目中添加一段代码，复用Vuetify的颜色解析逻辑生成完整的颜色映射：

import { parseColor } from 'vuetify/lib/util/color.mjs';
import { defaultTheme } from 'vuetify/lib/composables/theme.mjs';

// 生成light主题颜色映射
const lightColorMap = {};
for (const [key, hexValue] of Object.entries(defaultTheme.light.colors)) {
  const { r, g, b } = parseColor(hexValue);
  lightColorMap[`--v-theme-${key}`] = `rgb(${r}, ${g}, ${b})`;
}

// 生成dark主题颜色映射
const darkColorMap = {};
for (const [key, hexValue] of Object.entries(defaultTheme.dark.colors)) {
  const { r, g, b } = parseColor(hexValue);
  darkColorMap[`--v-theme-${key}`] = `rgb(${r}, ${g}, ${b})`;
}

// 输出到控制台查看
console.log('Light Theme Color Mapping:', lightColorMap);
console.log('Dark Theme Color Mapping:', darkColorMap);

运行这段代码后，控制台会输出所有主题变量对应的完整RGB值，你可以将结果复制出来直接用于SVG。

3. 参考Material Design 3官方颜色规范 #

Vuetify的默认主题完全基于Material Design 3的标准颜色体系，主题变量与MD3颜色的对应关系如下：

• primary → MD3 Primary色
• surface → MD3 Surface色
• on-surface → MD3 On Surface色
• secondary → MD3 Secondary色
• error → MD3 Error色
  你可以直接使用MD3官方定义的RGB值，和Vuetify默认主题的变量值完全一致。

另外你提到的Vue2时期的colors.scss文件在Vuetify 3中已被移除，所有主题变量现在均通过JavaScript动态生成，因此找不到该文件是正常情况。

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