Next.js と Tailwind CSS でダークモードの実装

サイトを実装するときに、企業向けはあまり利用されませんが、それ以外に多いダークモードの実装を、Next.js と Tailwind CSS を利用して実装します。

Next.js のプロジェクトを作成する

まず最初に、Next.js のプロジェクトを作成します。

途中、プロジェクトの名前の確認、またデフォルトの設定でよいか？という確認が出てきます。デフォルトで Tailwind CSS が適用されるので、今回は Yes で進めていきます。

text

作成されたらプロジェクトを実行します。

無事、実行できました。

モードを切り替えるボタンをコンポーネントとして実装します。このコンポーネントで利用するアイコンとしては、今回は Lucide React を利用します。

以下のコマンドを実行します。

これでアイコンをサイトで使えるようになりました。

続いてコンポーネントを追加します。components フォルダを追加して、ThemeSwitcher.tsx ファイルとして以下のファイルを作成します。

components/ThemeSwitcher.tsx

続いてスタイルシートで darkmode を使えるようにするために、globals.css に以下のサンプルの２行目のコードを追加します。

app/globals.css

これでコンポーネントの準備ができました。

本来はナビゲーションにボタンを配置するのが正しい形ですが、今回は動作確認だけのため、pages.tsx にコードを追加します。main の前にコンポーネントを配置して、また作成したコンポーネントをインポートします。

app/page.tsx

これでボタンを配置することができました。実行します。

以下のようにボタンを押下すると、モードが切り替わるようになりました。

ダークモードの実装に関して、特にむつかしい手順が割るわけでもなく、公式にもサンプルがあるのでハードルは低いですが、サイトを作るときに毎回作業をするので汎用的なコンポーネントを作っておくのを目的として、今回の記事をまとめました。

サンプルのコードに関しては、以下のリポジトリに公開をしています。