vuejs2 - 如何修改Vuetify默认主题？

Question

换句话说，我的问题是 <v-toolbar light> 是什么？的light实际上意味着什么？

改变之后

Vue.use(Vuetify, {
    theme: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3
    }
})

<v-toolbar> 没有任何反应我必须申请color属性到每个元素，例如<v-btn color="primary">primary</v-btn> .

在我指定颜色后，关键字dark只会影响字体颜色。例如<v-toolbar color="primary" dark>将显示原色和白色字体。

这不是我想要的，如何替换默认的dark和light具有完全自定义的主题颜色。 example theme

Answer 1

您可以通过进入 vuetify 代码并编辑其样式文件来编辑深色和浅色主题 css。他们使用手写笔，任何编辑都应立即反射(reflect)出来。要查找样式代码，请访问:

yourproject/node_modules/vuetify/src/stylus/settings/_theme.styl

在那里你会发现

$material-light := {
...
}

和

$material-dark := {
...
}

具有背景、字体、卡片等样式。

您应该能够根据需要对其进行编辑。

否则要保存编辑节点模块文件夹，您可以执行以下操作:

1. 在 src 文件夹中创建一个名为 stylus 的文件夹

2. 创建一个名为 main.styl 的文件

3. 将其添加到该文件中:@import '~vuetify/src/stylus/main'

4. 然后在 main.js 中添加此 import './stylus/main.styl

5. 如果您随后重新启动应用，样式现在应该可以在导入后正常工作。

6. 在导入语句之前编辑 src/main.styl 文件，任何更改都将覆盖默认值

例如:

//src/stylus/main.styl
$material-light.background = #36EF45
$body-font-family = 'Raleway'
$alert-font-size = 18px

@import '~vuetify/src/stylus/main'

您不更改的任何内容都将保留默认值。