Vuejs2 如何修改Vuetify默认主题?
换句话说,我的问题是Vuejs2 如何修改Vuetify默认主题?,vuejs2,vuetify.js,Vuejs2,Vuetify.js,换句话说,我的问题是的灯实际上意味着什么 我换衣服之后 Vue.use(Vuetify, { theme: { primary: colors.purple, secondary: colors.grey.darken1, accent: colors.shades.black, error: colors.red.accent3 } }) 没有任何变化,我必须对每个元素应用color属性,例如primary 指定
的灯实际上意味着什么
我换衣服之后
Vue.use(Vuetify, {
theme: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3
}
})
没有任何变化,我必须对每个元素应用color
属性,例如primary
指定颜色后,关键字深色
只会影响字体颜色。
e、 g.
将显示原色和白色字体
这不是我想要的,如何用完全自定义的主题颜色替换默认的深色
和浅色
您可以通过进入vuetify代码并编辑其样式文件来编辑深色和浅色主题css。他们使用手写笔,任何编辑都应立即反映出来。要查找样式代码,请转到:
yourproject/node\u modules/vuetify/src/stylus/settings/\u theme.styl
在那里你会发现
$material-light := {
...
}
及
有背景、字体、卡片等样式
您应该能够根据自己的需要对其进行编辑
否则要保存编辑节点模块文件夹,可以执行以下操作:
在src文件夹中创建一个名为stylus的文件夹
创建一个名为main.styl的文件
将此添加到该文件:@import'~vuetify/src/stylus/main'
然后在main.js中添加此import./stylus/main.styl
如果随后重新启动应用程序,则样式现在应该可以从导入中工作
在导入语句之前编辑src/main.styl文件,任何更改都将覆盖默认值
例如:
您不更改的任何内容都将保留默认值。有没有办法在我的代码中覆盖它,而不是编辑npm库?@palenoton,我已经编辑过了。是一个更负责任的解决方案。这不再有效,因为Vuetify不再使用手写笔。这很奇怪,对我来说是有效的。你能不能console.log(colors)
?@KrzysztofAtłasik,我已经用十六进制替换了colors
,但仍然无法使用,请看这支代码笔:
$material-dark := {
...
}
//src/stylus/main.styl
$material-light.background = #36EF45
$body-font-family = 'Raleway'
$alert-font-size = 18px
@import '~vuetify/src/stylus/main'