如何更改 Vuetify 中的默认颜色？

Posted 2023-02-23

【中文标题】如何更改 Vuetify 中的默认颜色？

【英文标题】：How to change default colors in Vuetify?

【发布时间】：2021-11-03 06:45:08

【问题描述】：

也许我的问题很简单，但直到现在我才找到任何解决方案。我在我的 Nuxt 应用中使用 Vuetify。我使用了那个黑暗的主题。根据官方网站的Theme configuration，我们可以将主题的primary或secondary或其他颜色更改为我们想要的颜色。但是当我们设置例如 dark theme 时，default 文本和背景颜色设置为白色和黑色。我找不到任何解决方案来改变它们。我知道我们可以将例如class="primary" 设置为一个元素以更改其背景颜色。但我想为这样的文本或背景设置默认颜色：

body 
    color: var(--v-info-base);

/* or */
#app 
    color: var(--v-info-base);

我的网站颜色在我的 nuxt.config.js 文件中定义如下：

vuetify: 
        customVariables: ['~/assets/variables.scss'],
        theme: 
            dark: true,
            options:  customProperties: true ,
            themes: 
                dark: 
                    primary: 
                        base: "#099b63",
                        darken1: "#04c279"
                    ,
                    accent: "#250032",
                    secondary: "#97812F",
                    info: 
                        base: "#1FFFF1",
                        darken1: "#450b5a",
                        darken2: "#1125c0",
                        darken3: "#40bfa4"
                    ,
                    warning: colors.amber.base,
                    error: colors.deepOrange.accent4,
                    success: colors.green.accent3,
                    anchor: "#1FFFF1"
                
            ,
        
    ,

但这对我不起作用！！！

【参考方案1】：

要实现这一点，你必须重写 vuetify 的 sass 变量，example on how to use in the Doc

例如，在您的variables.scss 中，您可以使用以下代码：

$material-dark: (
  'background': #464994,
  'text': (
     'theme': #944646,
   )
);

这将重写暗模式下背景和文本颜色的默认颜色。

【讨论】：

我将您的代码添加到我的variables.scss 文件中，它改变了整个背景颜色，但文本仍然是白色的。我的意思是，例如，当我们的应用程序中有一个 v-text-field 并且没有设置任何 css 时，它们的默认颜色文本必须是例如 #944646 并且默认背景颜色必须是您设置的 #464994，但这不会发生。我不想为每个 'Vuetify 组件' 设置很多变量。因为这类似于在每个组件上设置 css。

据我所知，在整个 vuetify 应用程序中更改默认样式的正确方法是通过其变量 API。 (vuetifyjs.com/en/features/sass-variables/#variable-api)。转到此链接并在下拉列表中选择第一项（$vuetify），向下滚动以找到$material-dark，然后找到所需的部分并根据您的需要进行修改。例如，您有 $material-dark: ('text-fields': ('filled': '#someColor')) 或 $material-dark: ('inputs': ('box': '#someColor')) 或 . $material-dark: ('text-color': '#someColor')

我相信另一种方法是检查每个元素以在浏览器的开发工具中找到 css 样式，然后复制每个 css 选择器并尝试使用 !important css 样式对其进行修改，这不是一个干净的解决方案而且更乏味。我建议您对上述变量进行进一步试验，以找到适合您需求的变量

感谢您的回答，它对我重新着色应用程序的某些组件帮助很大。但我希望当我们更改body 的颜色时，所有组件都会自动理解它，不幸的是 Vuetify 的结构不同，不允许我们这样做。