JavaScript による自動ダークモード

アプリケーションで最も要求の高い機能の 1 つは、ダーク モードです。多くのユーザーにとって、ダーク モードは、目の疲れの原因となるホワイト トーンが少なく、より目に優しいインターフェイスを提供します。ダークモードは、AMOLED 画面のバッテリー寿命を節約することでも知られています。

多くの場合、Web デザイナーはprefers-color-schemeCSS メディア機能を使用して、ダーク モードが有効になっているときに別のテーマを提供します。prefers-color-schemeOS の設定またはユーザー エージェントの設定を通じて、ユーザーの設定を取得します。簡単な例を次に示します。

/* Style rules for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
/* Style rules for light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

const darkMode = window.matchMedia("(prefers-color-scheme:dark)").matches;

ダーク モードは、ほとんどのユーザーにとって非常に便利な機能です。このmatchMedia()方法を利用して、ユーザーにより良いエクスペリエンスを提供してください。

この記事を楽しんでいただけたなら、Faraz Kelhini の著書Modern Asynchronous JavaScriptも気に入っていただけると思います。2022 年 5 月 15 日まで、プロモ コードfkajs_medium_35を使用すると、電子書籍版が 35% 割引になります。プロモーション コードは、以前の購入には無効です。

ファラズ・ケルヒニの記事

JavaScript での at() メソッドの使用 JavaScriptでの AggregateError の使用 JavaScript での デバウンス