vuetify 配色方案是如何工作的？答案

【问题标题】：How does vuetify color code scheme works?vuetify 配色方案是如何工作的？
【发布时间】：2020-06-01 07:26:28
【问题描述】：

我正在研究 Vuetify.js，但我无法理解颜色代码的工作原理？

https://vuetifyjs.com/en/styles/colors/#colors

这也是我所指的页面。此页面有一些预定义的颜色集，例如 red lighten-3 #EF9A9A

但是，如果我将我的原色设置为诸如 mediumaquamarine #66CDAA 之类的随机颜色代码，然后如果我使用原色 lighten-3，那么我基于什么得到我的颜色？

【问题讨论】：

标签： vue.js vuejs2 colors vuetify.js uicolor

【解决方案1】：

Vuetify 根据在 Vuetify 初始化时 theme 上定义的颜色计算颜色和变体（变亮和变暗）：

new Vuetify({
    theme: {
       themes: {
          light: {
            primary: "#d63fd9", // pink
            secondary: "#b0bec5",
            anchor: "#8c9eff"
         }
       }
    }
})

查看这个原色设置为粉红色的密码笔：https://codepen.io/hans-felix/pen/rNxBemM?editors=1010

【讨论】：

是的。这就是我的问题的目的。比如在什么基础上定义变亮和变暗？参考您的示例，primary 表示粉红色，所以primary lighten-3 仅表示不透明度（alpha 值）较小的粉红色？
是的，在这种情况下，Vuetify 根据数量计算新颜色，您可以在 github repo 上查看 lighten 和 darken 函数以及 utils.ts 的末尾。

【解决方案2】：

我做到了，在src 内的PLUGINS 文件夹中有一个名为vuetify.js 的文件，其中颜色是通过类声明的。就我而言，我有这样的文件

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

import es from 'vuetify/es5/locale/es'

export default new Vuetify({
    icons: {
        iconfont: 'mdi', // default - only for display purposes
    },
    lang: {
        locales: { es },
        current: 'es',
    },
    theme: {
        themes: {
            light: {
                primary: '#621132',
                secondary: '#9d2449',
                accent: '#b38e5d',
                error: '#f44336',
                warning: '#ffeb3b',
                info: '#3f51b5',
                success: '#4caf50'
            },
        },
    },
});

【讨论】：