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

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

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

Chrome 79 デベロッパーツールで、ダークモードの検証

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

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

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

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

Chrome 79 デベロッパーツールのキャプチャ

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

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

Chrome 79 デベロッパーツールのキャプチャ

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

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

Chrome 79 デベロッパーツールのキャプチャ

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

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

Chrome 79 デベロッパーツールで、ダークモードの検証

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

sponsors

top of page

©2021 coliss