ダークモード、入れてみました。
さて、先日このホームページが対応したダークモード。なにそれ？という人もまだまだ多いと思うので、久々のブログネタとして書いてみようと思います。
文字どおり、ダーク（暗闇）モードということで、暗所で見やすくなるというのはわかると思います。
携帯機でのWEB閲覧に嬉しいメリット
また、これは有機ELディスプレイに限ったことになりますが、表示した際の消費電力をかなり抑えられるということもあって、特に有機ELを搭載した携帯端末（iPhone 11 Pro、Google Pixel 4など）ではバッテリーの減りを抑えられることになり、携帯端末に有利な表示となっています。
うちのサイトはパソコンの人しか見ないから…とか、どうせ液晶だから電気の消費もかわらないんでしょ？とお嘆きのあなた。最大の利点があるんです。それは「目が疲れにくくなる。」ということでしょう。
実はわりと以前から色々と投入はされていた目に優しい対策。
カーナビゲーションなどではかなり前から投入されていた、「夜間運転時に表示を暗転させる」という動作が分かり易いでしょうか。ギラギラした画面よりも目への負担が減りますし、運転にも集中できます。
ダークモードではありませんが、割と昔の携帯端末から「周囲の明るさに応じて画面の明るさを調整する」機能がありましたね。あれも目への負担を減らすための機能だったのですが、完全な暗所ではその端末の最低限度の明るさまでしか下げられず、白い画面はやはりやや眩しい、という難点がありました。それを解消するのがダークモードです。
余談ですが、私がiPhoneに入れているStar Walk 2という星空を見るアプリがあるのですが、それにはOSとは別の夜間モードがあります。こんな色。赤い…
実は赤い光は夜間の星空を見る際に邪魔にならない光となっていて、天体観測をする時の光源は赤い、というのをアプリにも取り入れているんですね。賢い。
真っ白い画面を眺めていると作業効率も落ちます。なので、私もAdobeのソフトがダークテーマに対応したらいつも即投入していました。
ダークモードを実際に使ってみよう！
余談に逸れすぎましたね。さて、ダークモードはまず「OSが対応している」OR「ブラウザが対応している」の2つのケースに分けることができます。
現在対応しているOSは以下のとおり。
対応OSと設定の方法
Windows10（May 2019 Update以降）…「Windowsの設定」→「個人用設定」→「色」→「色を選択する」で「黒」を選ぶとダークモード化に切り替わります。
macOS（10.14 Mojave以降）…「システム環境設定」→「一般」→「外観モード」で「ダーク」を選ぶとダークモードになります。
Android（OS純正機能としては10以降）…「設定」→「ディスプレイ」→「ダークテーマ」をオンにするとダークモードに切り替わります。
iOS（13以降）…「設定」→「画面表示と明るさ」→「外観モード」でダークを選ぶとダークモードに切り替わります。
アプリケーションが対応していればアプリケーションの外観の一部または全部が黒基調になります。また、ブラウザが対応していれば、ダークモードに対応したホームページはすべてダークモードになります。
対応しているブラウザ自体は、このサイトのダークモードのリリースのお知らせで知らせているとおりです。（いずれも2019年11月現在）
また、macOSとiOSについては、設定した時間で自動的にライトとダークを切り替える機能もついています。
時間を任意に設定することもできますが、位置情報を元にその場所の日の出日の入りの時間を割り出して切り替えるという機能まであります。すごいですね。
さて、ここからは技術者の備忘録となりますので、わけわからない。読み飛ばしたい。という方はさくっと読み飛ばしてください。
ホームページにダークモードを導入するには？
ホームページにダークモードを導入する場合、CSSへダークモードが入っているかを判定するメディアクエリを設定する必要があります。
どのブラウザに対応しているのかはこちらで確認を。Can I use
主要なCSS設定方法はたった3つ。
@media (prefers-color-scheme: light){ /*ここにライトモード時のCSSを記載*/ }
@media (prefers-color-scheme: dark){ /*ここにダークモード時のCSSを記載*/ }
@media (prefers-color-scheme: no-prefers){ /*ここにシステムとしてあるけれど、設定していない時のCSSを記載*/ }いずれもダークモードに対応していない時のCSSもクエリを外した状態でつけておきましょう。じゃないと本来のCSSも動作しなくなってしまいます。
メディアクエリも画面サイズだけではなく、色味にまで及ぶようになったので、ますますSASSでサイズ用、色用と分けてコーディング→コンパイルするという強みが増えましたね。私は、このサイトを直す際、色については分けていなかったので、どこにカラーを設定しているのかを把握するのが大変でした。
他所ではJavascriptを使ってライトとダークをページ上のスイッチ切り替えるという技も紹介されていて、へー、となりましたが、文字の拡大や音声による読み上げと同様にそれはOSの方が対応するアクセシビリティの機能でしょう？という考えに賛同しているので私はあえて紹介しないことにしました。ごめんなさい。
対応しているならメリットづくめ。ダークモードを入れてみよう！
目に優しい、そして有機ELディスプレイならバッテリーにも優しいといいことづくめの「ダークモード」
各OSやブラウザがこぞって機能を追加している今だからこそ、ホームページに投入してみてはいかがでしょうか！