prefers-color-scheme とは？

prefers-color-scheme は、ダークテーマとライトテーマのどちらを希望するかをウェブサイトに伝える CSS メディア特性です。ブラウザーは Windows、macOS、Linux、Android、iOS のシステムのダークモード設定を参照し、サイトは CSS の @media (prefers-color-scheme: dark) や JavaScript の window.matchMedia("(prefers-color-scheme: dark)") を使って色を切り替えます。システムがダークモードなのにサイトがライト表示のままの場合は、まずブラウザーが実際にどのような値を返しているか確認してください。

ツールの説明

このツールは、システムのテーマを大きな表示で示します。月のアイコンとともに「ダーク」、または太陽のアイコンとともに「ライト」と表示されます。ブラウザーに prefers-color-scheme: dark が一致するかどうかを問い合わせ、変更を監視します。そのため、デバイスの設定でダークモードとライトモードを切り替えると、再読み込みなしですぐに結果が更新されます。ダークと判定されない場合は「ライト」と表示されます。

表示される結果は、ブラウザーがウェブサイトに伝えている内容であり、必ずしもシステム設定と同じとは限りません。たとえば Firefox には「ウェブサイトの外観」という設定があり、システム設定にかかわらず、すべてのサイトをライトまたはダークにできます。

機能

  • ダークかライトかをひと目で確認
  • システムのテーマを変更するとリアルタイムで更新
  • インストール不要で、ブラウザー上で動作