[英]How To change theme colors on Nuxt/Vuetify starter template
I'm trying to use Vue with Nuxt and Vuetify for the styles, on Vuetify exists many templates, one of them brings all. 我正在尝试将Vue与Nuxt和Vuetify结合使用,Vuetify上存在许多模板,其中之一带来了全部。
I tried to add colors on /assets/style/app.styl without effect. 我试图在/assets/style/app.styl上添加颜色而没有效果。
Also on /plugins/vueitfy.js add something like: 同样在/plugins/vueitfy.js上添加类似以下内容:
Vue.use(Vuetify, {
theme: {
header: '#48393C',
footer: '#2f3542'
}
})
Without effects, i think that the last way is the best way for do it. 没有效果,我认为最后一种方法是最好的方法。
There are two options to change the color theme 1. from the /plugins/vueitfy.js 有两个选项可以更改颜色主题1.从/plugins/vueitfy.js
Vue.use(Vuetify, {
theme: {
primary: '#2c3e50',
secondary: '#1abc9c',
accent: '#2980b9',
error: '#e74c3c',
action: '#23DB2A'
}})
$theme := { primary: '#2c3e50', secondary: '#1abc9c', accent: '#2980b9', error: '#e74c3c', action: '#23DB2A' }
And header and footer won't work as a color theme property 页眉和页脚不能用作颜色主题属性
In Vuetify 2
, for example, if you want ro override background colour
( nuxt js
): 例如,在
Vuetify 2
,如果要ro覆盖background colour
( nuxt js
):
.\\assets\\style\\variables.scss
.\\assets\\style\\variables.scss
@import '~vuetify/src/styles/styles.sass';
$material-light: map-merge($material-light, (
background: map-get($blue, 'lighten-5'),
calendar: (background-color: red),
)
);
nuxt.config.js
add: nuxt.config.js
添加: import colors from 'vuetify/lib/util/colors'
buildModules: ['@nuxtjs/vuetify'],
vuetify: {
treeShake: true,
customVariables: ['~/assets/style/variables.scss']
theme: {
options: {customProperties: true},
themes: {
light: {
primary: colors.blue.lighten5,
secondary: colors.amber.darken3,
accent: colors.grey.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
More info: 更多信息:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.