Next.js 15 App Router で Tailwind CSS V4 を使用してダークモードを追加する方法です。
以下の記事が参考になりました。
https://sujalvanjare.vercel.app/blog/dark-mode-nextjs15-tailwind-v4
以下のように、ダークモードとライトモードを切り替えることができました。
上記の記事について、ChatGPTによる日本語記事です。
Next.js 15 App RouterプロジェクトでTailwind CSS V4を使用してダークモードとライトモードを実装する方法を学びましょう。このステップバイステップガイドでは、シームレスなテーマスイッチャーを実現するためのTailwind V4とNext.js 15の最新の変更点をカバーしています！
既にNext.jsプロジェクトをお持ちの場合は、ステップ1に進んでください。
ステップ1：新しいNext.jsプロジェクトを作成する#
App RouterとTailwind CSS v4を搭載したNext.js 15をインストールするには、次の手順に従ってください：
- 任意の場所にプロジェクトフォルダを作成します。
- VS Codeでフォルダを開きます。
- ターミナルを開き、次のコマンドを実行します：
npmユーザーの場合：
pnpmユーザーの場合：
インストール中に、次のオプションが表示されます：
矢印キーでオプションを選択し、Enterキーを押します。Tailwind CSSとApp Routerを必ず有効にしてください。
デフォルトでは、Next.jsはTailwind CSS v3をインストールします。アップグレードするには、次のセクションに進んでください。
ステップ2：Tailwind CSS v4にアップグレードする#
Tailwind CSSをv4にアップグレードするには、ターミナルで次のコマンドを実行します：
npmユーザーの場合：
pnpmユーザーの場合：
エラーが発生した場合は、強制アップグレードを試してください：
これにより、PostCSS設定が自動的に更新され、古いTailwind CSSクラスが置き換えられます。
詳細については、公式アップグレードガイドをチェックしてください。
ステップ3：Tailwind CSS v4を手動でインストールする（アップグレードが失敗した場合）#
アップグレードが失敗した場合は、次のコマンドを実行してTailwind CSS v4を手動でインストールします：
pnpmの場合：
postcss.config.mjsまたはpostcss.config.jsを更新する#
内容を次のように置き換えます：
グローバルCSSファイルを修正する#
古いTailwindのインポートを削除します：
0
そして、次のように置き換えます：
1
詳細については、Next.jsでTailwind CSSをインストールする方法を参照してください。
ステップ4：Tailwind CSS v4でダークモードを有効にする#
なぜdarkクラスが機能しないのか？#
Tailwind CSS v4では、tailwind.config.jsファイルが削除され、darkMode: "class"設定が存在しなくなりました。つまり、グローバルCSSファイルで直接ダークモードを有効にする必要があります。
解決策：#
グローバルCSSファイルに次を追加します：
2
これにより、.darkクラスが検出され、正しいダークモードのスタイルが適用されます。
ステップ5：ダークモード切り替えボタンを追加する#
next-themesをインストールする#
ダークモードを簡単に切り替えるには、next-themesパッケージをインストールします：
npmの場合：
3
pnpmの場合：
4
テーマプロバイダーコンポーネントを作成する#
- srcフォルダ内にthemeという新しいフォルダを作成します。
- themeフォルダ内に、theme-provider.jsx（またはTypeScriptの場合は.tsx）という名前のファイルを作成します。
- 以下のコードを追加します：
.jsxファイルの場合：
5
.tsxファイルの場合（TypeScriptを使用している場合）：
6
ルートレイアウトにテーマプロバイダーを追加する#
layout.jsxまたはlayout.tsxファイル（通常はルートフォルダにあります）を開き、次のように修正します：
.jsxファイルの場合：
7
.tsxファイルの場合（TypeScriptを使用している場合）：
8
⚠️ 作成したThemeProviderコンポーネントをインポートし、next-themeからではないことを確認してください。
⚠️ テーマを切り替える際のReactハイドレーションエラーを防ぐために、<html>タグの中にsuppressHydrationWarning属性を追加することを忘れないでください。
テーマプロバイダープロップの説明：
defaultTheme="system"：デフォルトテーマをシステムテーマに合わせます。enableSystem：ユーザーのシステム設定に基づいてダークモードとライトモードの自動切り替えを許可します。disableTransitionOnChange：テーマ切り替え時にちらつきのない体験を確保するために、すべてのCSSトランジションを無効にします。
ダークモードとライトモード切り替えボタンを作成する#
- themeフォルダ内にtheme-toggle.jsx（またはTypeScriptの場合は.tsx）を作成します。
- 以下のコードを追加します：
9
ナビゲーションバーに切り替えボタンを追加する#
ThemeToggleコンポーネントをナビゲーションバーまたは任意の場所に統合します：
0
ホームページを更新する#
ホームページに以下のコードを貼り付けます：
1
ダークモードスタイルを追加する一般的な方法#
Tailwind CSSでダークモードスタイルを適用する一般的な方法は2つあります：
1. dark:クラスを使用する#
Tailwind CSSは、ダークモードがアクティブなときにスタイルを適用できるdark:バリアントを提供します。
例えば：
2
ここで、bg-white、dark:bg-[#191919]、text-[#37352f]、dark:text-[#ffffffcf]クラスは、ダークモードが有効になると背景色とテキスト色が自動的に適応することを保証します。
2. CSS変数を使用する#
すべての場所にdark:クラスを追加する代わりに、global.cssでテーマ固有の変数を定義し、スタイル全体で使用できます。
例えば：
3
CSS変数を使用して、影、テキスト、背景、ボーダーカラーのカスタムプロパティを定義することで、Tailwindのカラーシステムを拡張しました。これらの変数は、ライトモード用に:rootで設定され、ダークモード用に.dark内で更新されます。
これで、次のようにコンポーネントで使用できます：
4
変数の値はテーマに基づいて変化するため、すべての場所にdark:クラスを必要とせずに、スタイルは自動的に更新されます。
Next.jsのダークモード用の更新済みファイル#
5
ステップ6：開発サーバーを起動してテストする#
npmユーザーの場合：
6
pnpmユーザーの場合：
7
ローカルホストにアクセスし、ボタンを使用してダークモードとライトモードを切り替えます。テーマがページ間で保持され、最初の読み込み時にシステムテーマを正しく追従することを確認します。
🎉 おめでとうございます！Next.js 15とTailwind CSS v4でシームレスなダークモードとライトモードの切り替えを実装することに成功しました。