Webサイトやアプリにダークモードを追加する方法（白いちらつきなし）

ダークモードを追加するには、色を直接書き込むのではなく、名前付きのトークン（背景、テキスト、サーフェス、境界線、アクセント）として定義し、各トークンにライトとダークの値を設定します。CSSのprefers-color-schemeメディア機能で切り替えれば、サイトは訪問者のシステム設定に従います。手動の切り替えも用意したい場合は、選択をブラウザに保存し、ページのheadにある小さなインラインスクリプトで適用します。これで、読み込み時の白いちらつきを防げます。そのうえで、両方のテーマでコントラスト、画像、グラフを確認してください。AIアプリビルダーでは、1つの明確なプロンプトでこの大半を済ませられます。品質を左右するのは確認の作業です。

2つのアプローチ

ほとんどのアプリでは2つ目が最適です。デフォルトではシステムを尊重し、利用者が上書きできるようにします。

カラートークンから始める

色がwhite、#333、gray-100のようにコード中に散らばっていると、ダークモードへの対応は大変です。すべての色が少数の名前付きトークンから来ていれば、簡単になります。

それぞれのコンポーネントはトークン名を使います。テーマを切り替えるときは、すべてのコンポーネントを編集するのではなく、値のセットを1つ入れ替えるだけで済みます。

ダーク用のパレットのコツは次のとおりです。

• 広い面には、純粋な黒と純粋な白を避ける。 非常に暗いグレーとオフホワイトの方が読みやすいです。
• 奥行きは、影ではなく明るいサーフェスで表現する。 影は暗い背景ではほとんど見えません。
• 明るいブランドカラーは、彩度をやや下げる。 暗い背景では、目障りに光って見えることがあります。
• 読みやすいコントラストを保つ。 WCAGのAAレベルでは、通常のテキストに対して少なくとも4.5:1のコントラストが求められます。控えめなグレーのテキストは、ダークテーマではこれを満たさないことがよくあります。

Tailwind CSSで行う場合

Tailwindは、AIで作られた多くのアプリでデフォルトのスタイリングツールです。Tailwindのダークモードのドキュメントによれば、dark:バリアントはデフォルトでprefers-color-schemeを使うため、bg-white dark:bg-gray-900のようなクラスは、追加の作業なしでシステム設定に従います。

Tailwind v4で手動の切り替えを行う場合、ドキュメントでは、バリアントを親要素のクラスによる切り替えに変えることが示されています。

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

そのうえで、アプリはルート要素にdarkクラスを追加または削除します。ドキュメントでは、ページが描画される前に保存された選択（またはシステム設定）を適用する、headのインラインスクリプトも推奨されています。これこそが、ちらつきを防ぐ方法です。

白いちらつきを防ぐ

ちらつきが起きるのは、ページがライトモードで描画され、そのあとJavaScriptが読み込まれて保存された選択を読み取り、ダークに切り替えるからです。直し方は次のとおりです。

1. 保存されたテーマを読み取り、何かが描画される前にルート要素にクラスを設定する、小さなインラインスクリプトをページのheadに置く。
2. ブラウザが描画する部分（スクロールバー、フォームコントロール）が一致するように、各テーマに**color-scheme**のCSSプロパティを設定する。
3. 両方のテーマで、ページに明示的な背景色を設定する。
4. アプリがサーバーサイドレンダリングの場合は、初期テーマについてサーバーとブラウザが一致しているか確認する。一致しないと、ページが再描画されてちらつくことがあります。

プロンプトの例

完全な設定を依頼する場合：

ダークモードを追加して。まず、ハードコードされた色を、テーマのトークン（background、surface、text、muted text、border、accent）に置き換えて、それぞれにライトとダークの値を設定して。デフォルトは訪問者のシステム設定にして。ヘッダーにライト、ダーク、システムの選択肢があるテーマ切り替えを追加し、選択をlocalStorageに記憶して、headのインラインスクリプトで適用し、読み込み時に白いちらつきが出ないようにして。各テーマにcolor-schemeを設定して。現在のライトデザインはそのまま維持して。

残りの問題を直す場合：

ダークモードで全ページを確認し、次を直して：コントラストの低いテキスト（少なくとも4.5:1を目指す）、ハードコードされた白い背景、消えてしまう境界線、暗い背景の上に暗い文字があるグラフ、見えなくなったロゴ。ライトテーマは変更しないで。

画像とグラフの場合：

ダークモードでは、ロゴをライト版に切り替えて。グラフの軸、グリッド線、ラベルは、テーマのトークンを使うようにして。スクリーンショットには、ダークモードで背景に溶け込まないよう、控えめな境界線を付けて。

手順

1. 色を監査する。 ハードコードされた色を見つけ、トークンに置き換えます。これが作業の大半です。
2. 各トークンのダーク用の値を定義します。
3. prefers-color-scheme（またはTailwindのデフォルトのdark:）でシステムに従わせる。
4. 必要であれば切り替えスイッチを追加する（ライト、ダーク、システム）。選択はブラウザに保存します。ログインするアプリでは、ユーザーのプロフィールに保存することもできます。
5. headのインラインスクリプトとcolor-schemeでちらつきを防ぐ。
6. 扱いにくい部分を確認する：ロゴ、アイコン、白い背景の画像、グラフ、コードブロック、地図、埋め込み、メール。
7. デスクトップとスマートフォンで、システム設定をライトとダークにしたそれぞれの状態で、また強制再読み込み後に、両方のテーマをテストする。

よくあるミス

• すべてを反転させる。 色を反転させるフィルターは、写真やブランドカラーを台無しにします。
• ハードコードされた色が残っている。 ダークのページに白いカードが1枚あると、すぐに目立ちます。
• コントラストの低いグレーのテキスト。 見た目はおしゃれですが、読みやすさの基準を満たしません。
• 読み込み時の白いちらつき。 特に夜にスマートフォンで目立ちます。
• サードパーティの埋め込みを忘れる。 地図、動画、ウィジェットがライトのままになることがあります。ダークのオプションがあるか確認してください。
• 2状態だけの切り替えスイッチ。 一度クリックされると、システムに従う状態に戻れません。
• ライトテーマを壊す。 ライトのデザインは変えないよう、プロンプトで明示してください。

チェックリスト

• すべての色がテーマのトークンから来ている
• デフォルトでシステム設定に従う
• ライト、ダーク、システムのオプションがある任意の切り替えスイッチがあり、選択が記憶される
• 読み込みや再読み込み時に白いちらつきがない
• フォームコントロールとスクロールバーが一致するようcolor-schemeを設定している
• 両方のテーマでテキストのコントラストが少なくとも4.5:1
• ダークモードでロゴ、画像、グラフ、埋め込みを確認した
• ライトテーマは変わっていない
• デスクトップとスマートフォンでテストした

Mythexでのダークモード

Mythexで作られたアプリは、デフォルトでVite、React、TypeScript、Tailwindを使うため、上記のTailwindのアプローチがそのまま当てはまります。完全な設定のプロンプトをチャットに貼り付け、そのあとプレビューで両方のテーマとスマートフォンのサイズを確認してください。Mythexのデザインに関するプロンプトのアドバイスは、何を変え、何を維持するかを明示することです。ここでは、ライトテーマはそのまま維持するように書くことが重要です。デザインとUIのプロンプトを参照し、作業がうまくいかなければチェックポイントで元に戻してください。

見た目を整えることについては、AIで見栄えのよいアプリをデザインする方法とAIアプリビルダー向けのプロンプトの書き方も参考にしてください。

よくある質問