WebダークモードCSSレイアウトの作り方

なんということでしょう、前回の投稿から早半年が経過してしまいました。
まぁ閲覧者の少ないサイトでかつ、このサイトは私の個人的なメモ帳なので、致し方ないのですが。
最近では普通の閲覧者より不正アクセスを試みる輩が多いサイトになりつつあり、不正アクセスログを見るのが少しずつ楽しくなり始めています。

さて、この記事ではWebページのダークモードについて解説します。
そもそもダークモードとはなんぞやというところから。

ダークモードとは

Windowsの設定から 【色の設定】を選択して、下の画像のようにした状態のことです。

最近のブラウザではこの設定によって表示されるWebページのデザインをCSSを用いて変えることができるようになっているようです。

設定方法

方法は簡単で、ダークモードの設定になっているかはメディアクエリを使って判断することができます。

@media (prefers-color-scheme: dark) {
  *{
     color: #fff;
  }
}

@media (prefers-color-scheme: light) {
  *{
     color: #000;
  }
}