nuxt.jsでvuetifyを使っていますが、基本テーマがlightとdarkになると思います。
公式では、カスタムテーマは以下で色味を確認しながらexportして設定できるようなので、nuxt.config.jsに設定しました。
- nuxt.config.js
module.exports = { mode: 'universal', env: envSet, vuetify: { customVariables: ['~/assets/variables.scss'], theme: { dark: true, themes: { dark: { // primary: colors.blue.darken2, // accent: colors.grey.darken3, // secondary: colors.amber.darken3, primary: colors.cyan.base, // 追加 secondary: colors.pink.base, // 追加 accent: colors.lightBlue.base, // 追加 info: colors.teal.lighten1, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3 } } } }, }
ですが色が変わりません。
dark: true,にしたら、テーマはdarkを使う。
ただし、themes.darkで設定してるものについてはオーバーライドする。
という認識なのですが、違うのでしょうか?
公式を見ると、v-app-barはカラーの設定ができるようなので、
- default.vue
<v-app-bar :clipped-left="clipped" fixed app >
を
- default.vue
<v-app-bar :clipped-left="clipped" fixed app :color="this.$vuetify.theme.themes.dark.primary" >
に修正してみました。
そしたら、colors.cyan.base,
が使われていたのでこれは意図した通りですが、毎回、colorの設定をするのは冗長かなと思っています。
どこかで共通設定する箇所はないでのでしょうか?
動きを見る限り、各部品の色はdarkとlightで別れていると思うので、それがdarkになっているだけで、
darkのprimaryなどは設定されているだけであって適応はされていないようです。
あなたの回答
tips
プレビュー