prefers-color-scheme (CSS) を試す

1. このページの目的

このページで、prefers-color-scheme を試す。

2. prefers-color-scheme とは?

画面1. Windows の「アプリモード」設定
画面2. Mac の「外観モード」設定

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. スクリーンショット

画面3. Windows のアプリモードで「白」を選択すると、ウェブサイトの色(スタイル)が即座に切り替わります。
画面4. Windows のアプリモードで「黒」選択すると、ウェブサイトの色(スタイル)が即座に切り替わります。

6. 情報源