Nuxt+Vuetifyのサイトでダークテーマを外す

1205 ワード
小ネタ 初心者 nuxt.js Vuetify 初心者 テキストリンク

本当にちょっとしたことですが、調べるのに15分くらいかかってしまったので記事化。

Nuxt.jsでVuetifyを適用したサイトを作成すると、デフォルトではダークテーマが適用されます。
こんな感じで。

nuxt.config.jsでvuetify.theme.darkの設定をfalseに変更すれば、ダークテーマを解除できます。

  • 変更前
nuxt.config.js
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
（略）
  • 変更後
nuxt.config.js
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
（略）

このようになりました。

以上です。