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>
完成
簡単な仕組みですがダークモードを実装することができました。
終わりに
意外とダークモードの実装はあっさりできました。またブログの改良を続けていきたいと思います。