普段業務系のシステム開発で NuxtJS + Vuetify でフロントエンドの開発をしてるんですが、業務系だとあんまりダークモードってやつを使わずシンプルにライトモードのみで開発を進めていくんですが、やっぱり状況に応じてダークモードとライトモードを切り替えられた方が良いかと思い、ダークモードとライトモードを画面上で切り替える機能を実装してみました。
ダークモードだとディスプレイの消費電力を抑えることができたり、目に優しいといった利点があるので、ダークモードとライトモードを画面側でユーザが切り替えられるのは良いかもしれません。
前提条件
- nuxt : ^2.15.8
- vue : ^2.6.14
- vuetify : ^2.6.1
必要な実装
今回、ダークモードを実装するにあたり必要な実装は以下の通りです。
- ダークモードのテーマを設定する
- 状態管理( store )の機能でテーマの状態管理を行う
- 画面側でテーマの切り替え機能を作る
ダークモードのテーマを設定する
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
}
}
}
},ここでダークモードのテーマで使用するカラーを設定しています。
状態管理( store )の機能でテーマの状態管理を行う
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 」の値の切り替えを行い、その変更を「 watch 」で検知し、「 this.$vuetify.theme.dark 」に対して、 v-switch で切り替えた後の theme の値を設定します。これでダークモードとライトモードの気鋭かえができるようになります。
template タグ部分
<template>
<app>
<v-icon v-if="theme" class="mx-2">mdi-weather-night</v-icon>
<v-icon v-else class="mx-2">mdi-white-balance-sunny</v-icon>
<v-switch v-model="theme" hide-details></v-switch>
</app>
</template>script タグ部分
export default {
data() {
return {
theme: this.$store.state.theme,
}
},
watch: {
theme() {
this.$store.dispatch("theme", this.theme)
this.$vuetify.theme.dark = this.theme;
}
},
}最後に
Vuetify を使うことでかなり簡単にダークモードとライトモードの切り替えを行うことができました！今回のダークモードとライトモードの切り替えは pages の個々のページに実装するのではなく、 layouts の方で共通的なレイアウトとして実装した方が良さそうですね。
コメント