如何修改 Vuetify 默认主题？

Question

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

我改变后

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完全自定义的主题颜色。示例主题

Answer 1

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

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'

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