如何修改 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。他们使用手写笔，任何编辑都应立即反映。要查找样式代码，请转到：

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'

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