Question

我正在将Vue与Vuetify 1.5.14结合使用，并且正在尝试自定义主题。我只是按照docs进行操作。当我将color="primary"应用于v卡组件时，它正确使用了自定义的base主色。但是，当我将dark属性应用于它时，它仍然显示基色而不是darken1颜色。这是我的vuetify.js文件：

Vue.use(Vuetify, {
    iconfont: 'md',
    theme: {

        primary: {
            base: '#673ab7',
            darken1: '#320b86',
            lighten1: '#9a67ea'
        },
        secondary: {
            base: '#00bcd4',
            darken1: '#008ba3',
            lighten1: '#62efff'
        },
        accent: '#ffeb3b',
        error: '#f44336',
        warning: '#ffc107',
        info: '#009688',
        success: '#8bc34a'
    }

});

任何人都有一个想法，如何正确自定义浅色主题颜色？

Answer 1

来自v1.5.14 docs：

自定义主题变体

Vuetify 自动为主题颜色生成变暗的变体 时，您可能需要自己控制。只需传递包含您要修改的变体的主题对象。任何未提供的内容仍会为您生成。

// src/theme.js
import colors from 'vuetify/es5/util/colors'

export default {
  primary: {
    base: colors.purple.base,      // modifies `primary`
    darken1: colors.purple.darken2 // modifies `primary darken-1`
  },

通过vuetify设置预定义的颜色时，会自动为您设置亮色和深色变色。
在vuetify v1中修改这些选项只需更改自定义颜色的变暗或变暗，即primary lighten-1。
因此，在深色主题（即<v-app dark）中，您将像这样使用它们：

:color="$vuetify.dark ? 'primary darken-1' : 'primary'"

$vuetify.dark是一个属性，它确定您是否使用深色主题。
如果每个组件都需要此组件（即，您想将dark属性传递给组件），则需要手动扩展组件以支持该功能。

v2将支持在自定义的深色和浅色主题颜色之间自动切换。 ^{（已在beta中工作）}

Vuetify黑暗主题自定义无效

1 个答案: