Vuetify：更改颜色的十六进制代码答案

【问题标题】：Vuetify: Changing hexcode of a colorVuetify：更改颜色的十六进制代码
【发布时间】：2022-01-04 05:15:17
【问题描述】：

是否可以为 Vuetify 的 this 页面上列出的颜色更改十六进制代码？

假设我想将red 颜色稍微改变为更浅的颜色。我怎么能这样做？

根据文档，我有类似的东西，但我想直接更改颜色：

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: '#123456'
            }
        }
    }
});

如果不可能，我可以添加自己的颜色吗？喜欢：

colors: {
  foobar: '#eeeeee'
}

【问题讨论】：

你的意思是你想要改变不透明度或完全不同的颜色？
是的，完全不同的颜色。我选择的十六进制代码。
您可以使用 Vuetify 主题，它可以让您制作自己的主题，因此您可以使用诸如：颜色：主要等。vuetifyjs.com/en/features/theme 如果您不想创建主题，您可以只需在 css 中完成。

标签： javascript vue.js vuetify.js

【解决方案1】：

检查我制作的这个代码框：https://codesandbox.io/s/stack-70119394-mj4vk?file=/src/plugins/vuetify.js

如果你想让自己的自定义颜色全局可用，则无需修改 Vuetify 的调色板。您可以在 vuetify 主题配置文件中定义它们。

如果您使用 vue/cli 制作项目

// src/plugins/vuetify.js
import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        /* Default vuetify colors */
        primary: "#1976D2",
        secondary: "#424242",
        accent: "#82B1FF",
        error: "#FF5252",
        info: "#2196F3",
        success: "#4CAF50",
        warning: "#FFC107",

        /* My custom colors */
        perfectred: "#C51111"
      }
    },
    options: { customProperties: true }
  }
});

正如您在此处看到的，我已经定义了自己的颜色，称为 perfectred，只需这样做，您就可以在带有 color 的 vuetify 组件中使用该颜色财产。就像我在默认应用栏中所做的那样。

  <v-app-bar app color="perfectred" dark>
     ...   
  </v-app-bar>

如果您想在非 vuetify 元素（如普通 html）中使用自定义颜色。您需要在主题配置中启用 customProperties 选项。通过这样做，Vuetify 还将为每种主题颜色生成一个 css 变量，然后您可以在组件的 style 块中使用它。

所以，为了在主页的 a 标签上使用我的 perfectred 颜色，我只是在我的 App.vue 中创建了一个全局 css 类要使用为我的自定义颜色生成的 css 变量，您还需要使用 !important 来正确覆盖/应用颜色。

<style>
.perfect-red {
   color: var(--v-perfectred-base) !important;
}
</style>

就这样，您将能够在普通 html 元素中使用自定义颜色类。

 <p class="subheading font-weight-regular">
     For help and collaboration with other Vuetify developers,
     <br />please join our online
     <a class="perfect-red" href="https://community.vuetifyjs.com" target="_blank">
        Discord Community
     </a>
 </p>

【讨论】：