はじめに
ブラウザにダークモードが搭載されるようになった！
CSSで、ダークモード時の Media Query が記述できる！
Can I use... Support tables for HTML5, CSS3, etc
→JSでは取得できないの...？？探してもあまり見つからないし....
いろいろ試行錯誤した結果、取得する方法を発見(?)したので、紹介しようと思います。
条件
- CSSで、Media Query "
prefers-color-scheme" が記述できる
2019.12.22現在、最新版Firefox, Chrome, Safari, Operaは使用できます。Edgeは残念ながら...
Can I use... Support tables for HTML5, CSS3, etc - JSで、
getComputedStyleとgetPropertyValueを使用できる
モダンブラウザすべてに対応しています。
（ユーザーがJSを「実行しない」にしていなければ）取得できます。
考え方
- JSでは現在、「直接の」判定はできない。
- しかし、CSS変数は取得できる。
- Media Query で、CSS変数の値を変えることが可能。
...ということは...？？
- Media Query で CSS変数を定義
- JSでCSS変数を取得し、値によって判定が可能
実装
今回記述したコードは、GitHubにあげておりますので、併せてごらんください。
a01sa01to/DarkmodeGetter_js
=====
1. CSS変数を定義
/* ライトモードの時、CSS変数 isDarkmode は存在しない */html{...}@media(prefers-color-scheme:dark){/* ダークモードの時 */html{--isDarkmode:True;....}}prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN
変数名や値などは、競合しないように適宜変えても構いません。
=====
2. CSS変数を取得
/* 1. <html> に変数を設定したので、まずは <html> を取得する */consthtmlTag=document.querySelector("html");// -> <html lang=...> ..... </html>/* 2. CSSプロパティの取得 */constcomStyle=getComputedStyle(htmlTag);// -> CSSStyleDeclaration {0: ... }/* 3. 変数の取得 */constcssVariable=comStyle.getPropertyValue('--isDarkmode');// -> "True"(ダークモード)・""（ライトモード）// ライトモードは、変数を指定していないため、空の文字列が返されるもちろん、わざわざ上記のように書かずとも、1行で記述可能です。
getComputedStyle(document.querySelector("html")).getPropertyValue('--isDarkmode');1.でCSS変数を変更した場合は、こちらも変更する必要があります。
=====
3. 判定
/* 2 のコードの続き。"cssVariable" が定義されている前提 */constisDarkmode=!!cssVariable;// これでも同じconstisDarkmode=Boolean(cssVariable);ライトモードでは、cssVariable == ""なので、Falsyです。
そのため、 isDarkmodeは falseを返します。
ダークモードでは、 cssVariable == "True"→ Truthyなので、 trueを返します。
Truthy - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
Falsy - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
=====
以上により、ブラウザがダークモードかを取得することができました！
