light-dark()関数で実現するCSSだけのダークモード

light-dark() とは

CSS の light-dark() 関数は、CSS Color Level 5 で定義された比較的新しい関数です。

color: light-dark(#000, #fff);

この1行で、ライトモード時は #000、ダークモード時は #fff が適用されます。

対応ブラウザ

2026年2月時点で主要ブラウザすべてが対応しています。

ブラウザ	対応バージョン
Chrome	123+
Firefox	120+
Safari	17.5+
Edge	123+

使い方

1. color-scheme の設定

light-dark() を使うには、まず color-scheme プロパティを設定する必要があります。

:root {
  color-scheme: light dark; /* 両方のモードに対応 */
}

または HTML で指定することもできます：

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

2. CSS 変数に適用する

:root {
  color-scheme: light dark;

  --bg-color: light-dark(#f7fbfd, #050e15);
  --text-color: light-dark(#0a1c29, #e7f2f8);
  --card-bg: light-dark(#ffffff, #0a1c29);
  --border-color: light-dark(#dfe1e5, #12334a);
}

これで、CSS 変数を使ったすべてのスタイルがOSの設定に応じて自動的に切り替わります。

3. fisea のカラーパレット

fisea では以下のパレットを採用しています。

:root {
  color-scheme: light dark;

  /* ブランドカラー（常に同じ） */
  --fisea-blue: #40adfa;

  /* ライト/ダーク自動切替 */
  --bg-color: light-dark(#f7fbfd, #050e15);
  --text-color: light-dark(#0a1c29, #e7f2f8);
  --muted-text: light-dark(#3a4750, #c3dcef);
  --card-bg: light-dark(#ffffff, #0a1c29);
  --border-color: light-dark(#dfe1e5, #12334a);
  --border-hover: light-dark(#a2c9e6, #1c4f73);
  --tag-bg: light-dark(#e9eef1, #12334a);
  --tag-text: light-dark(#1c4f73, #c3dcef);
}

--fisea-blue: #40adfa だけはライト・ダーク両方で同じ値を使っています。これがブランドアクセントカラーです。

media query との違い

従来は prefers-color-scheme メディアクエリを使っていました。

/* 従来の方法 */
body { background: white; color: black; }

@media (prefers-color-scheme: dark) {
  body { background: #050e15; color: #e7f2f8; }
}

light-dark() を使うと、これが1行になります。

/* light-dark() を使う方法 */
body {
  background: light-dark(white, #050e15);
  color: light-dark(black, #e7f2f8);
}

CSS 変数と組み合わせると、より簡潔に書けます：

:root {
  color-scheme: light dark;
  --bg: light-dark(white, #050e15);
  --fg: light-dark(black, #e7f2f8);
}

body {
  background: var(--bg);
  color: var(--fg);
}

まとめ

light-dark() 関数を使うメリットをまとめます：

• JavaScriptが不要 — OS設定に応じて純CSSで自動切替
• コードが簡潔 — メディアクエリのネストが不要
• CSS変数と相性抜群 — 一か所で定義してすべてに適用

fisea と fisea Blog のダークモードは、JavaScript なしで light-dark() のみで実装しています。

ブラウザサポートも十分になってきたため、新規プロジェクトでは積極的に採用をおすすめします。