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

JavaScript
この記事は約5分で読めます。

 

みなさんこんにちは!

 

イザナギです。

 

今回の話題は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>
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」の真偽値を変更すれば切り替えられますからね。

 

みなさんも是非実装してみてください。

 

それでは今回はここで筆を置かせていただきます。

 

最後まで記事をご覧いただきありがとうございました!

コメント

タイトルとURLをコピーしました