Vuetify 修改内置颜色十六进制值及新增自定义颜色方法咨询

修改Vuetify内置颜色 #

可以直接修改官方内置的颜色十六进制值，你只需要在主题配置中对应主题下覆写内置颜色的键值即可，示例如下：

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

Vue.use(Vuetify);

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: '#123456',
                // 覆写内置red颜色的默认色值为浅红色
                red: '#ffcccc'
            }
        }
    }
});

覆写完成后，所有调用内置red颜色的位置（包括color="red"、text-red类、bg-red类等）都会自动应用你自定义的色值。如果需要修改red下不同亮度的色值，比如red-lighten-2，直接在配置中添加对应键的自定义值即可。

新增自定义颜色 #

Vuetify完全支持新增自定义颜色，用法和覆写内置颜色一致，直接在主题配置中添加你自定义的颜色键值即可：

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

Vue.use(Vuetify);

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: '#123456',
                // 新增自定义颜色
                foobar: '#eeeeee'
            }
        }
    }
});

配置完成后你就可以像使用内置颜色一样使用自定义颜色，比如color="foobar"、class="text-foobar"、class="bg-foobar"都可以正常生效。

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