自作したWebページをCSSでダークモードにする

序文

最近のiosアップデートでiphoneをダークモードに設定できるようになりました。私個人的にはダークモードの方が好みであり、自分自身のiphone,iPad,MacBookも全てダークモードに設定しております。
そこでふと自身で作成したWebページやポートフォリオをダークモードにできないかと思い、調べて見たところ簡単に設定する事ができましたので、下記に共有いたします。

コード

閑話休題、styleの中に下記を追加するだけです。
現在主要なブラウザ、crome,firefox,safariでは対応している模様です。

<style>
    @media (prefers-color-scheme: dark) {
    body{
      background-color: #000;
      color: #aaa;
    }
    }
 </style>

使用例

実際に私の簡単なサイト内で試して見ましたので画像を共有いたします。
＊MacBookAir(2018)をダークモードの設定状態で、ブラウザはcromeを使用しております。
＊サイトはちなみに自身の本管理用途をして,laravel(+vue,jquery)で作成したものです。

1.ダークモード実装前

2.ダークモード実装後

最後に

以上WebページをCSSでダークモードにする方法でした。
なんとなくダークモードの方がテンション上がる気がする笑