如何在 Nuxt/Vuetify 入门模板上更改主题颜色 [英] How To change theme colors on Nuxt/Vuetify starter template
本文介绍了如何在 Nuxt/Vuetify 入门模板上更改主题颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将 Vue 与 Nuxt 和 Vuetify 用于样式,在 Vuetify 上存在许多模板,其中之一带来了所有.
I'm trying to use Vue with Nuxt and Vuetify for the styles, on Vuetify exists many templates, one of them brings all.
我试图在/assets/style/app.styl 上添加颜色但没有效果.
I tried to add colors on /assets/style/app.styl without effect.
还在/plugins/vueitfy.js 上添加如下内容:
Also on /plugins/vueitfy.js add something like:
Vue.use(Vuetify, {
theme: {
header: '#48393C',
footer: '#2f3542'
}
})
没有效果,我认为最后一种方法是最好的方法.
Without effects, i think that the last way is the best way for do it.
推荐答案
在 Vuetify 2
中,例如如果你想要 ro 覆盖 background colour
(nuxtjs
):
In Vuetify 2
, for example, if you want ro override background colour
(nuxt js
):
- 创建
.\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
中添加:
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
}
}
更多信息:
https://vuetifyjs.com/ru/customization/theme
这篇关于如何在 Nuxt/Vuetify 入门模板上更改主题颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文