スワローインキュベートMenuHomeNewsServicesCompanyPhilosophyBlogRecruitContactCSSだけでWebサイトを簡単にダークモードに対応させる方法2019.10.18むったんども、むったんです。毎日PCを使ってデザインやらコーディングの仕事を始めて約[ピーー]年。一時期視力2.0あって、ライヴでステージから遠い席が当たっても全然余裕だったのに、ここ最近はアーティストが2人見える事がありますwww視力低下が気になるし、あと10年もしないうちに老眼が来てしまうのではないかとハラハラしています。25%CUT(ブルーライトカット率25%)を使用していました。使用するまでは頭痛酷いし、肩こりにも悩まされるし...な散々な状態だったのですが、気持ち...そう気持ち落ち着いた気がしていました。ちなみに、25%にしたのは「色を使うお仕事」をしていたから...。笑とまぁ、目に関しては人一倍気をつけているのですが、最近iPhoneユーザーには目に優しい嬉しい機能がつきましたよね!そう...「ダークモード」です!実際のところiOS12から「色を反転」という機能があったので、iOS13からついた新機能ではないし、WindowsもMacも恐らくAndroidも対応してるし、はたまた各アプリにもダークモードがあったりするから...今更感があるのですが(メッチャ揚げ足を取るwwでもサイトを作る側としては、ダークモードも視野に入れてサイト制作、はたまたアプリ制作しないといけないのかな...と考え始めたので、今回はむったんの得意分野CSSだけを使用してダークモードに対応する方法を紹介しようと思います!prefers-color-schemeってなに?今回はCSSだけで、と言ったのですが本当に簡単で「prefers-color-scheme」というメディア特性(※1)を使用します。prefers-color-schemeは、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。useから最新情報をチェケラー!これを書いてる2019年10月15日現在は、主要ブラウザはほぼ対応しているなって感じです。※1...ユーザーエージェントや、出力端末、環境などの特性を記述する。使用できる値は以下のようになっています。no-preference:システムに対して設定していない場合。light:ユーザーがシステムに、明色のテーマを設定した場合(ライトモード)dark:ユーザーがシステムに、暗色のテーマを設定した場合(ダークモード)prefers-color-schemeの書き方では、実際の書き方を見ていきましょう。CodePen.ライトモード、ダークモードを切り替えると...ライトモードの場合は背景が白、文字が黒。ダークモードの場合は背景が黒、文字が白。いうように変わります。CodePen.いかがでしょうか、ダークモードを擬似的に見せるとこんな感じになります。ちなみに、ダークモードを使うメリットとして以下のことがあげられています。目に優しいバッテリーが長持ち(するかもしれない)まぁ、真っ暗な中ライトモードでスマホを見て入れば目へのダメージ半端ないし(チカチカするよね?え?私だけ?)、有機ELを搭載している機種(iPhoneはX以降)は、自発光で画面を表示されているのでそこの部分が黒くなればバッテリーの消耗も抑えられる...ということらしいです。効率的な書き方をしてみる上記のように「bodyにはこの対応」「.contentにはこの対応」...と書いてもいいのですが、1つずつ書いていったらとんでもない行数になりそうな予感。ただでさえレスポンシブ対応で色々書いてるのに、ダークモード対応も追加したら大変!どこになにがあるかわからんし、リーダブルコード?なにそれワロスwwwになっちゃうので、CSSで変数を使って後からでも編集しやすくしてみました。※scssの変数($を使うやつ)だと、事前に変換されてしまうので「定義されてないよー」と怒られてしまう。※cssの変数(:rootと–〇〇を使うやつ)の細かい説明は、ManaさんのWebクリエイターボックスで分かりやすく説明してくれてます。CodePen.それぞれの端末でダークモードをONにして確認してください。(今回はスイッチつけないケチーぃ奴wダークモード対応と言っても基本的に色を変更するだけなので、こんな感じで最初に設定しといてあげれば済んでしまうのではないでしょうか。