/Articles/Nuxt+Vuetifyにダークモード切り替えボタンを実装してみた。
Nuxt+Vuetifyにダークモード切り替えボタンを実装してみた。

みなさんこんにちは！
イザナギです。
今回の話題はNuxtについてです。
現在進行形でNuxt＋Vuetify＋Jamstackブログを作っているんですよ。
普通にブログ全表示画面を作ったり、記事を表示する画面を作成したりしているのですが、どうも普通のブログになってしまう…
何か目新しいものを入れたいなぁ〜
あ！ダークモード実装しよう
なので、ダークモードを実装することにしました。
ですので、今回の記事はNuxtで作っているブログサイトにダークモード切り替えボタンの実装について記事にしていきたいと思います。

今さら、ダークモードって何がいいの？

今更ですけど、ダークモードって何がいいの？って思い少し調べてみました。
調べた結果、ダークモードは以下の点に優れているようですね。

  • 目に優しい
  • ディスプレイの消費電力が抑えられる
  • etc

確かに黒色に近い方が、目が疲れにくいのかもしれませんね。
元に夜空ダークモードみたいで、見上げてもあんまり目痛くなりませんもんね！
＊夜空がダークモードって例え下手か！www
ディスプレイの消費電力を抑えられるのも魅力的ですね。
実装してみる価値はありそうです！

実装

では、早速実装していきたいと思います。

Vuetifyのダークテーマ・ライトテーマを利用可能にする

ダークモードを実装するには、
Vuetifyのダークテーマ・ライトテーマを利用すると、簡単に実装できます！
まずは「nuxt.config.js」のvuetify設定欄に以下の項目を記述します。


vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        light: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        options: {
          customProperties: true
        }
      }
    }
  },

これで、ダークテーマ・ライトテーマの利用が可能になります。

状態管理を利用する

状態管理を利用しますので、「store」ディレクトリ内に「index.js」を作成します。
作成しましたら、以下のコードを記述します。


export const state = () => ({
  theme: false,
});

export const mutations = {
  theme(state, theme) {
    state.theme = theme
  }
}

export const actions = {
  theme({
    commit
  }, theme) {
    commit('theme', theme)
  }
}

実装したコード内の「theme」はダークモードを適用するかしないかの判定に利用します。

ダークモード切り替えボタンを作成する

あとはv-switchなどで「theme」の値を変えて、this.$vuetify.theme.dark にthemeの値を入れてあげるだけでダークモードの切り替えを行うことができます。


<templete>
<v-switch v-model="theme"></v-switch>
</templete>
<script>
export default {
  data() {
    return {
      theme: this.$store.state.theme,
    }
  },
  watch: {
    theme() {
      this.$store.dispatch("theme", this.theme);
      this.$vuetify.theme.dark = this.theme;
    },
  },
};
</script>

「$vuetify.theme.dark 」にtrueを入れるとダークテーマ、falseを入れるとライトテーマに切り替えることができます。

まとめ

今回は自作のブログサイトにダークモード切り替えボタンを実装したときの話を書きました。
Vuetifyを利用すれば簡単に実装できるのがいいですね！
「$vuetify.theme.dark」の真偽値を変更すれば切り替えられますからね。
みなさんも是非実装してみてください。
それでは今回はここで筆を置かせていただきます。
最後まで記事をご覧いただきありがとうございました！