如何修改Vuetify默认主题？

Question

换句话说，我的问题是<v-toolbar light>的{​​{1}}到底意味着什么？

我更改之后

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。 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'

所有您未更改的内容都将保留默认设置。