如何修改所有Vuetify组件的文字与背景颜色？自定义主题无效

你的自定义主题配置框架是对的，但没生效大概率是因为缺少了Material Design规范中对应的*on-系列颜色——Vuetify组件会自动根据背景色匹配文字颜色，仅设置background/surface等背景色，文字颜色可能因对比度逻辑不生效。

1. 完善主题配置（优先推荐） #

补充onBackground、onSurface等对应文字颜色，确保组件能正确读取文字色值：

const myCustomLightTheme = {
    dark: false,
    colors: {
        // 背景色
        background: "#FFFFFF",
        onBackground: "#000000", // 页面背景上的文字颜色
        surface: "#FF0000",
        onSurface: "#FFFFFF", // 卡片、对话框等表面组件的文字颜色
        // 主色相关
        primary: "#FF0000",
        "primary-darken-1": "#cc0000",
        onPrimary: "#FFFFFF", // 主色按钮、导航栏的文字/图标颜色
        // 其他颜色对应的文字色
        secondary: "#03DAC6",
        "secondary-darken-1": "#018786",
        onSecondary: "#000000",
        error: "#B00020",
        onError: "#FFFFFF",
        info: "#2196F3",
        onInfo: "#FFFFFF",
        success: "#4CAF50",
        onSuccess: "#FFFFFF",
        warning: "#FB8C00",
        onWarning: "#FFFFFF"
    }
};

const vuetify = createVuetify({
    components,
    directives,
    theme: {
        defaultTheme: "myCustomLightTheme",
        themes: {
            myCustomLightTheme
        },
        cssVars: true // 启用CSS变量，方便后续自定义
    }
});

2. 全局CSS兜底覆盖（针对特殊组件） #

如果个别组件仍未适配，可通过全局CSS强制覆盖：

/* 全局修改所有组件的文字颜色 */
.v-application * {
    color: #你的目标文字色 !important;
}

/* 全局修改应用背景色 */
.v-application {
    background-color: #你的目标背景色 !important;
}

注意：!important尽量少用，优先通过主题配置解决，避免破坏组件原有样式逻辑。

3. 确认Vuetify正确注入 #

确保在入口文件（如main.js）中正确挂载Vuetify：

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify' // 你的Vuetify配置文件

createApp(App)
  .use(vuetify)
  .mount('#app')

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