JavaScript | ダークモードかどうかを判別する
JavaScriptでブラウザのテーマ設定がダークモードになっているかどうかを判別する方法の紹介です。
ブラウザのテーマ設定を取得するには、ウィンドウサイズやスマホであれば縦向きか横向きかを取得する際に利用する「window.matchMedia」を参照します。
if(window.matchMedia('(prefers-color-scheme: dark)').matches == true){
//dark mode
}例えばダークードが設定されていた時にCSSを変更する事も可能です。
See the Pen JavaScript | change dark mode by yochans (@yochans) on CodePen.
const output = document.querySelector('#output');
if(window.matchMedia('(prefers-color-scheme: dark)').matches === true){
document.body.style.background = '#000';
document.body.style.color = '#FFF';
output.innerHTML = `Detected dark mode!`;
}ブラウザなどのアプリが持っているテーマ設定情報ですが、ChromeなどのブラウザではOSのテーマ設定が反映されています。
これはCSSで利用できる@mediaの指定と同じになります。
@media (prefers-color-scheme: dark) {
body { background: black; color: #FFF; }
}CSSでライトモードとダークモードでの振り分け指定可能なので、ダームモード時は最初からダークモード表示する場合はJavaScriptで書き換える必要はないかもしれません。
ダークモード設定時に、サイトをダークモード表示するかどうかの選択をアクセスしたユーザーに委ねる場合にJavaScriptは活用できそうです。