ダークモードの検証が簡単にできるようになった！Chrome 79 デベロッパーツールの新機能

ダークモード対応のサイトを制作する時に面倒なのが、ダークモードとライトモードでの表示確認方法です。OSでモードを切り替えたり、2つ用意するのは面倒です。

Chrome 79 デベロッパーツールの新機能で、簡単にダークモードの検証ができるようになりました。下記のようにOS（ブラウザ）がライトモードでも、Webページをダークモードで表示できます。

画像はダークモード対応サイト: Tom Brow

ダークモードの実装については、当ブログの以前の記事をご覧ください。

• CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点

Chrome 79 デベロッパーツールで、prefers-color-schemeとprefers-reduced-motionの設定がシミュレートできるようになりました。

• What's New In DevTools (Chrome 79)

使い方は、簡単です。Renderingのパネルを開きましょう。
Ctrl+Shift+P（macOSはcommand+shift+P）でコマンドメニューを開き、「Show Rendering」と入力し、Returnキーを押します。

コマンドメニューで、「show r」まで入力すると上に表示されます。

もしくは、デベロッパーツールの右上「︙」をクリックし、「More tools」から「Rendering」を選択します。

「More tools」から「Rendering」を選択。

Renderingのパネルが開くので、下部の「Emulate CSS media feature prefers-color-scheme」からダークモードとライトモードを選択できます。

「lignt」「dark」を選択すると、それぞれのモードに。

ダークモードとライトモードを切り替えると、表示しているページに適用されます。

これで、ダークモードの検証が簡単になった！