ども、むったんです。

 

毎日PCを使ってデザインやらコーディングの仕事を始めて約[ピーー]年。
一時期視力2.0あって、ライヴでステージから遠い席が当たっても全然余裕だったのに、ここ最近はアーティストが2人見える事がありますwww
視力低下が気になるし、あと10年もしないうちに老眼が来てしまうのではないかとハラハラしています。

 

そんなむったんですが、約3年前からJINSのSCREEN 25%CUT（ブルーライトカット率25%）を使用していました。
使用するまでは頭痛酷いし、肩こりにも悩まされるし…な散々な状態だったのですが、気持ち…そう気持ち落ち着いた気がしていました。
ちなみに、25%にしたのは「色を使うお仕事」をしていたから…。

 

 

そして、先日「誕生日プレゼントにPCレンズのおにゅー眼鏡が欲しい！」とおねだりして、ZoffのPC ULTRAレンズ（ブルーライトカット率50%）をいただきました！
フレームはZoff SMARTにしたから眼鏡をかけてる感じがなくてすごく楽です(^^)/
ちなみに、現在は「色を使うお仕事」から「コードを書くお仕事」がメインになったので、ブルーライトカット率をあげましたww
50%カット…画面の白に攻撃されてる感がなくてとても楽です 笑

 

 

 

とまぁ、目に関しては人一倍気をつけているのですが、最近iPhoneユーザーには目に優しい嬉しい機能がつきましたよね！
そう…「ダークモード」です！
実際のところiOS12から「色を反転」という機能があったので、iOS13からついた新機能ではないし、WindowsもMacも恐らくAndroidも対応してるし、はたまた各アプリにもダークモードがあったりするから…今更感があるのですが（メッチャ揚げ足を取るww
でもサイトを作る側としては、ダークモードも視野に入れてサイト制作、はたまたアプリ制作しないといけないのかな…と考え始めたので、今回はむったんの得意分野CSSだけを使用してダークモードに対応する方法を紹介しようと思います！

 

 

prefers-color-schemeってなに？

今回はCSSだけで、と言ったのですが本当に簡単で「prefers-color-scheme」というメディア特性（※1）を使用します。
prefers-color-schemeは、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。

 

対応ブラウザはCan I useから最新情報をチェケラー！
これを書いてる2019年10月15日現在は、主要ブラウザはほぼ対応しているなって感じです。

 

※1…ユーザーエージェントや、出力端末、環境などの特性を記述する。

 

 

prefers-color-schemeの値

使用できる値は以下のようになっています。

no-preference：システムに対して設定していない場合。
light：ユーザーがシステムに、明色のテーマを設定した場合（ライトモード）
dark：ユーザーがシステムに、暗色のテーマを設定した場合（ダークモード）

 

 

prefers-color-schemeの書き方

では、実際の書き方を見ていきましょう。

 

See the Pen dyyYQJB by 6zaki (@6zaki) on CodePen.

 

ライトモード、ダークモードを切り替えると…
ライトモードの場合は背景が白、文字が黒。
ダークモードの場合は背景が黒、文字が白。
というように変わります。

 

 

え、設定から変更するの面倒！だって？
しゃーないな…それっぽく見せられる切り替えボタン付けてあげるから、チェックしてみて 笑

 

 

See the Pen CSSだけでダークモードに対応だ（切り替えボタン付き） by 6zaki (@6zaki) on CodePen.

 

いかがでしょうか、ダークモードを擬似的に見せるとこんな感じになります。
ちなみに、ダークモードを使うメリットとして以下のことがあげられています。

 

• 目に優しい
• バッテリーが長持ち（するかもしれない）

 

まぁ、真っ暗な中ライトモードでスマホを見て入れば目へのダメージ半端ないし（チカチカするよね？え？私だけ？）、有機ELを搭載している機種（iPhoneはX以降）は、自発光で画面を表示されているのでそこの部分が黒くなればバッテリーの消耗も抑えられる…ということらしいです。

 

 

効率的な書き方をしてみる

上記のように「bodyにはこの対応」「.contentにはこの対応」…と書いてもいいのですが、1つずつ書いていったらとんでもない行数になりそうな予感。
ただでさえレスポンシブ対応で色々書いてるのに、ダークモード対応も追加したら大変！
どこになにがあるかわからんし、リーダブルコード？なにそれワロスwwwになっちゃうので、CSSで変数を使って後からでも編集しやすくしてみました。

 

※scssの変数（$を使うやつ）だと、事前に変換されてしまうので「定義されてないよー」と怒られてしまう。
※cssの変数（:rootと–〇〇を使うやつ）の細かい説明は、ManaさんのWebクリエイターボックスで分かりやすく説明してくれてます。

 

See the Pen 効率的なprefers-color-schemeの書き方 by 6zaki (@6zaki) on CodePen.

 

それぞれの端末でダークモードをONにして確認してください。（今回はスイッチつけないケチーぃ奴w

 

ダークモード対応と言っても基本的に色を変更するだけなので、こんな感じで最初に設定しといてあげれば済んでしまうのではないでしょうか。
なので、デザイナーさんは通常色はこれでダークモード時はこれ、みたいな色指定してくれるだけでコーダーはとっても助かると思います！
少なくとも私は、「色情報だけでいいですよー」と斜め前に座ってるデザイナー様にここで言ってみるw

 

ちなみに画像は透過PNGを準備しておけば、黒背景の上に白が際立つ画像がある…っていう状況にならないと思うので、その辺も気を使ってあげないとですね！

 

 

最後に…

いかがでしたでしょうか？
この記事を書く前は、ダークモード対応難しそう…と私は思っていたのですが、案外簡単に対応できそうなことがわかりました！
CSSマジで便利になったね！

 

 

ではっ！！

 

 

 

 

 

 

PS.基本的に私はダークモード使っていません（あw