1. ホーム
2. web
3. CSSのlight-dark()関数を使用した簡潔なダークモードテーマ実装

従来のダークモード実装の問題点

従来のダークモード実装では、@media (prefers-color-scheme: dark) でラップした重複したCSSルールが必要でした。これにより、特に大規模なスタイルシートではメンテナンスコストが増大します。light-dark() CSS関数はこの重複を完全に排除します。

light-dark() 関数の基本

light-dark()関数は2つのカラー値を受け取り、ユーザーの現在のカラースキームに合った方を自動的に返します：

color: light-dark(black, white);
/* ライトモードでは black、ダークモードでは white */

第一引数がライトモード、第二引数がダークモードの色です。この関数はシステム設定またはcolor-schemeプロパティの値を尊重します。

color-scheme の設定

light-dark()を機能させるには、ページがサポートするカラースキームを宣言する必要があります：

<meta name="color-scheme" content="light dark" />

またはCSSで：

:root {
  color-scheme: light dark;
}

これによりブラウザに両方のスキームをサポートしていることを伝え、light-dark()関数を有効にします。

変数定義の簡略化

light-dark()を使うと、先ほどの例は単一の宣言になります：

:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #1a1a2e);
  --text: light-dark(#111111, #e0e0e0);
  --primary: light-dark(#2563eb, #60a5fa);
  --border: light-dark(#d1d5db, #374151);
}

メディアクエリは不要です。ブラウザが自動的に切り替えを処理します。

従来手法との比較

プログラムによるテーマ切り替え

システム設定だけでなく手動でテーマを切り替えたい場合は、ルート要素のcolor-schemeを変更します：

document.documentElement.style.colorScheme =
  document.documentElement.style.colorScheme === "dark"
    ? "light"
    : "dark";

light-dark()は現在のcolor-scheme値を読み取るため、この切り替えがシームレスに機能します。

ブラウザサポートとフォールバック

2026年現在、light-dark()はChrome 123+、Firefox 128+、Safari 17.5+でサポートされています。古いブラウザ向けにはフォールバック値を提供します：

.button {
  background: #2563eb; /* 古いブラウザ用フォールバック */
  background: light-dark(#2563eb, #1d4ed8); /* モダンブラウザ用 */
}

移行戦略

1. :rootにcolor-scheme: light darkを追加
2. @mediaブロックをlight-dark()関数に置き換え
3. DevToolsのレンダリングタブで両テーマをテスト
4. 確認後にレガシー@mediaブロックを削除
5. 手動切り替え用のJavaScriptサポートを追加

CSS light-dark()はダークモード実装を大幅に簡略化します。重複コードを排除し、ブラウザにテーマ切り替えを任せることで、開発者はよりクリーンでメンテナンスしやすいスタイルシートを維持できます。