CSSのprefers-color-schemeってなに？

1. はじめに

next.jsで少しSSRやApp Routerについて試してみたいなと思い、next.jsのプロジェクトを作成すると、下記のCSSファイルが作成された。
※cssの内容は、プロジェクト作成時にtailwind.cssを利用するを選択した場合のものです。
その中で、見慣れない記述（prefers-color-scheme）があったので調べてみました。

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

---

2. @media (prefers-color-scheme: ○○○)とは

OSのカラーテーマによって、ライトモードかダークモードかを検出する為の設定とのこと。
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme
=> windows11だと「個人設定」->「色」でモードを選ぶことができる。
その為、prefers-color-schemeで指定できる値は「light」と「dark」の2種類。
使い方は、それぞれの場合でセレクタを定義して、CSSを切り替えたり、CSS変数を用意して、var()関数を使って切り替えたりといった感じ。

ここでは、:rootセレクタでCSS変数を定義し、OSの設定が「ライトモード」と「ダークモード」の場合で、それぞれ背景とテキストの色を切り替えている。
以下が実際にそれぞれのモードで表示した、作成したばかりのnext.jsの実行画面になる。

• ダークモード
  

• ライトモード
  

---

3. さいごに

prefers-color-schemeを使うと各ユーザーのモード設定に沿ったCSSを一括で適用する際に利用できる。
基本的には、背景色と文字色切り替え程度の利用かもしれませんが、割とありがたい技術だと感じました。
=> 主観ですが、ライトモードだと目が疲れるので、どんなサイトでもダークモードにしたい。OS設定が適用されるといちいち設定しなくていいので楽だな～って思ってます。

最近はフロントエンドの実装を担当することも多くなっていて、CSSはよく触っていたのですが、ただ新規プロジェクトを立ち上げただけでもまだまだ発見が多いなと感じました。
「--*」のカスタムプロパティやvarを使ったCSS定義も初めて知ったので、これからはCSSを書くのがまた少し楽しくなりそうです。