CSS サンプル: ダークモード

@media (prefers-color-scheme: dark) を使用して、ダークモードの場合のスタイルを設定します。(Chrome, Firefox, Safari)

設定方法 (Windows 10)

下記の方法でダークモードにすることができます。(夜間モードとは異なる)

  1. スタートメニューにある設定 (歯車のアイコン) をクリック
  2. 「個人用設定」をクリック
  3. 「色」サイドメニューをクリック
  4. 「既定のアプリモードを選択します」を「黒」に変更する

Windows キーを押して「dark」とタイプすると「色の設定」という項目が出てくるため3番の終わりまでショートカットできます。

参考