【JavaScript】端末がダークモードの時にダイアログやポップアップウィンドウで通知する方法

ダークモードでデザインが暗くなる

端末がダークモードの時に、CSSによってデザインが見づらい状態・・・になってしまう場合があります。

デザインによっては、ダークモードが動くと見づらくなる場合があるかもしれません。

この場合に、何かしらアナウンスやお知らせを挙動させたい場合に、試せる方法です。

ライトモードにすれば表示が標準に戻る

まず、コードの前に、ライトモードに変更すると表示が変わるかどうか見てみます。

色が変わって見やすくなりました。

とはいえ、これだと「外観モードを切り替えたら表示が変わる」と気づいてもらえるまで、変えてもらうことができません。

こちらを、通知などを表示させるように試してみます。

window.matchMediaメソッド

このコードでは、window.matchMediaメソッドを使用して、現在のブラウザのカラースキームがダークモードかどうかを確認します。

もしダークモードであれば、alertメソッドを使用して注意を表示します。

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  alert("ダークモードで表示されています。");
}

window.matchMedia()メソッドは、条件に合致するかどうかを監視することもできます。監視する場合は、以下のようなコードを使用します。

const mediaQuery = window.matchMedia("(max-width: 600px)");

function handleMediaQueryChange(e) {
  if (e.matches) {
    /* 画面の幅が600px以下の場合に実行する処理 */
  } else {
    /* 画面の幅が600pxより大きい場合に実行する処理 */
  }
}

mediaQuery.addListener(handleMediaQueryChange);

この例では、window.matchMedia()メソッドを使用して、(max-width: 600px)という条件を監視しています。addListener()メソッドを使用して、条件が変化した場合に実行するコールバック関数を指定しています。条件が変化した場合は、指定されたコールバック関数が実行されます。

また、別の方法として、ダイアログやポップアップウィンドウを使用して注意分を表示することもできます。

ダイアログやポップアップウィンドウを使用する

以下のようなコードを使用することで、ダイアログやポップアップウィンドウを使用して注意分を表示することもできます。

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  const dialog = document.createElement("dialog");
  dialog.innerHTML = "ダークモードで表示されています。";
  document.body.appendChild(dialog);
  dialog.showModal();
}

このコードでは、window.matchMediaメソッドを使用して、現在のブラウザのカラースキームがダークモードかどうかを確認します。

もしダークモードであれば、dialog要素を作成して、注意分を表示するために使用します。

最後に、document.bodyに要素を追加し、showModalメソッドを使用してダイアログを表示します。

window.matchMediaをログに出力する

「window.matchMedia」をログに出力するためには、次のようにコードを記述することができます。

console.log("matchMedia:",window.matchMedia);

このコードを実行すると、ブラウザの開発者ツールのコンソールに、「window.matchMedia」の詳細が表示されます。

matchMedia: ƒ matchMedia() { [native code] }

この詳細には、メソッドやプロパティ、値などが含まれます。必要に応じて、この情報をログに出力することができます。

まとめ

注意点として、dialog要素は、一部のブラウザでサポートされていない場合があります。この場合は、代替手段を使用する必要があります。

また、ダイアログやアラートを表示させると、ユーザーさんの操作に問題が発生する可能性が出てくるので、本当に設定が必要かどうか考えて設定する方が、望ましいかもしれません。