Nuxt.jsでダークモードを実装する方法

はじめに

最近のWebサイトやアプリケーションは、ダークモードなど豊富なカラーモードが実装されているケースが多いです。特別機能や記事に影響を与えませんが、ユーザーに対して遊び心を提供することができるでしょう。また、ポートフォリオを作る方もダークモードを実装することでデザインスキルで個性を出せるかもしれません。Nuxt.jsでもnuxt-community/color-mode-moduleというカラーテーマを変更できるリポジトリがあったので、使ってみました。こちらがドキュメントになります。

インストール

yarn add --dev @nuxtjs/color-mode
{
  buildModules: [
    '@nuxtjs/color-mode'
  ]
}

コード

このサイトの実装例を紹介します。

<button @click="$colorMode.preference = 'light'">Light</button>
<button @click="$colorMode.preference = 'dark'">Dark</button>

ここで設定した変数は、localStorageにnuxt-color-modeというkeyで保存されています。Google Chromeを使っている方は、デベロッパーモードのApplicationのタブから確認することができます。

カラーの変更

Nuxt.jsアプリケーションのグローバル変数のlightdarkを見て、htmlタグにlight-modeまたはdark-modeのclassを付与しています。従って、cssにそれに対応したclassを書いていきます。

body {
  background-color: #fff;
  color: rgba(0,0,0,0.8);
}
.dark-mode body {
  background-color: #091a28;
  color: #ebf4f1;
}
.sepia-mode body {
  background-color: #f1e7d0;
  color: #433422;
}

このように設定すると、付与されたclassに応じてbodyのcssが変わります。

まとめ

すごく使い勝手がいいので、スターをつけておきましょう🚀また、Tailwind CSSもサポートしているようなので、導入されている方は使ってみてはどうでしょうか?