Nuxtで作ったブログにダークモードを実装した

はじめに

今回初めてZennの方で記事を書かせていただきます。
Nuxtのダークモード実装を自分なりにやってみたので、簡単にまとめていきたいと思います。

私のブログ

手順

今回は以下のような仕組みでダークモードを実装しました。

1. storeでダークモードのオンオフの状態を管理する。
2. ヘッダーのトグルを切り替えることでmutationが働き、storeのダークモードが変化する。
3. storeの状態に応じてcssの切替を行う(v-bind:styleを使用)

storeのセットアップ

Vuexをインストールして、storeディレクトリにindex.jsを作ります。

store/index

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: function() {
      return {
        isDarken: false //ダークモードのオンオフ
      }
    },
    mutations: {
      toggle: function(state) {
        state.isDarken = !state.isDarken //トグルの切替
      }
    },
    actions: {
      changeToggle: function(context) {
        context.commit("toggle") //actionからmutationのtoggleを呼び出している
      }
    }
  })
}

export default createStore

トグルの実装

headerのnav-barに追加する形で実装します。
vuetifyのv-switchを使えば簡単にトグルスイッチが作れます。

components/header

<template>
  <div id="header">
    <ul class="nav-bar">
      .
      .
      .
      <li>
        <v-switch type="checkbox" @click="$store.dispatch('changeToggle')" color="secondary"/> // クリックすることでstoreのactionを呼び出す
      </li>
    </ul>
  </div>
</template>

v-bind:styleの制御

ダークモードのオンオフ時に変更したい要素があるページやコンポーネントのscriptタグにオンオフそれぞれのスタイルをdataで渡します。

components/header

<script>

export default {
  data: function() {
    return {
      colorLight: {
        color: "#fff"
      },
      colorDark: {
        color: "#222"
      }
    }
  }
}
</script>

トグルに応じてスタイルを変更させる場合は、v-bind:styleの3項演算子を使います。
ここではheaderのリンクの色を白黒で切り替わるようにしてます。

components/header

<template>
  <div id="header">
    <ul class="nav-bar">
      <li>
        <nuxt-link to="/about" class="nav-link" :style="$store.state.isDarken? colorLight : colorDark">About</nuxt-link>
      </li>
      .
      .
      .
      <li>
        <v-switch type="checkbox" @click="$store.dispatch('changeToggle')" color="secondary"/>
      </li>
    </ul>
  </div>
</template>

完成

簡単な仕組みですがダークモードを実装することができました。

終わりに

意外とダークモードの実装はあっさりできました。またブログの改良を続けていきたいと思います。

参考にさせていただいた記事

Vuex公式リファレンス
Vuetify スイッチコンポーネント