1. このページの目的
このページで、prefers-color-scheme を試す。
2. prefers-color-scheme とは？
- OS が用意している「アプリモード (Windows)」 や「外観モード (Mac)」といった設定項目では、外観の基調とするカラーを選択することができます。今の所どちらも、「ライト（白）」と「ダーク（黒）」の2つが選べます。
- この設定を変更することにより、すべてのウィンドウの色が変わります。もちろんウェブブラウザも例外ではありません。しかし、ウェブブラウザ内に表示されるウェブサイトのデザインは、そのウェブサイトが用意している CSS によって決定されるため、せっかくアプリモード（や外観モード）で「ダーク（黒）」を選んでも、ウェブサイトは相変わらず「ライト（白）」なデザインで表示されるということが起きてしまいます。
- これを解決するのが「
prefers-color-scheme」というメディア特性です。 prefers-color-schemeを使うと、「ライト（白）の場合」、「ダーク（黒）の場合」というそれぞれの条件に対するCSSを分けて記述することができます。- これにより、アプリモード（や外観モード）で設定された色に対して、統一感を持ったウェブサイトを作成することが可能になります。
3. シンプルな記述例（このページに記述している一部）
以下が、CSS の記述例です。ライト（白）用のスタイルと、ダーク（黒）用のスタイルを分けて記述します。
@media (prefers-color-scheme: light) {
/* ここに、ライト（白）に対するスタイルを記述します*/
body {
background-color: #eee; /* white に近い色 */
color: #111; /* black に近い色 */
}
}
@media (prefers-color-scheme: dark) {
/* ここに、ダーク（黒）に対するスタイルを記述します */
body {
background-color: #111; /* black に近い色 */
color: #eee; /* white に近い色 */
}
}
4. サンプル文章
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
5. スクリーンショット
