2021年7月26日　18:00

【CSS】ダークモードに対応しました（暗闇でも目が痛くないよ！）

[

• Web技術
• お知らせ

]

Grant＠プロペラおじさん

• Tweet
• 

ダークモード使ってますか？

最近、といっても結構前ですがスマホ機能のひとつにダーク♂モードというものがあります。（調べたらダークモードはAppleでの呼称、Androidではダークテーマというらしいですが、iPhoneユーザなので以後ダークモードとします。）画面のトーンを落として目の疲れを軽減させるというもので、寝る前スマホポチポチ勢にはお馴染み。下手したらずーっとダークモードなんて方もいらっしゃるのではないでしょうか？また、バッテリーの節約になるという説もあります。

実際目の疲れの軽減になるのかというと懐疑的らしく、バッテリーに関しても有機ELディスプレイ以外では消費電力量に有意差を認められない（海外サイト）らしいです。あとぶっちゃけそんなに目に優しいわけでもないよね（海外サイト）とも言われてます。

ぶっちゃけ見た目の話というわけで

じゃあなんでダークモードが持て囃されるのさっていうと「かっこいいから」だったりします。いやマジで。最近だとSpotifyをはじめ、多くの海外サイトやアプリを中心にデフォルトの画面設定がダークモードで、ライトモードはオマケだったりします。あとダークモードのほうがユーザ好感度とページ維持率が高いらしいです。真面目な理由でいうと視覚にハンディキャップを抱える方や、光に対して過敏な反応を示してしまう方に向けたUIとしてGoogleのAndroidアプリ開発のガイドラインにおいてはサポートが推奨されています。

Webサイトをダークモードに対応させるCoolで簡単な方法

結論から言うと簡単なお話で、メディアクエリとCSSカスタムプロパティを使えばCSSだけで簡単に実装できます。Wordpressプラグインとかいらないです。たとえば、下記のソースに適用する場合。

<p id="sample-box">寿限無寿限無五劫の擦り切れ</p>

#sample-box {
  background-color: #FFF;
  color: #333;
}

これで、白い背景のボックス要素に濃いグレーの文字というだけが表示されます。このままでは、端末をダークモードにしようがどうしようが色は変わりません。しかしながら

@media (prefers-color-scheme: dark;){ /* ここにCSSを記述 */ }

メディアクエリの prefers-color-scheme: dark;を使用すると、端末のダークモードを検出した際にメディアクエリ内のCSSが適用されます。そのため…

#sample-box {
  background-color: #FFF;
  color: #333;
}
@media (prefers-color-scheme: dark;){
  #sample-box {
    background-color: #333;
    color: #CCC;
  }
}

このように、ライトモード用、ダークモード用と分けて記述することで両方に対応できますが、これでは同じ様なコードを２回、しかも全セレクタに対して通常のCSSとダークモード用CSSを書かなきゃならんので作業量がカロリーオーバーですし、何よりどこにどの値を入れたのかが迷子になりがちです。あっち直したけどこっち直してないが後から発生してハゲます。（僕はハゲました）

CSSカスタムプロパティ（変数）を使う

CSSにはカスタムプロパティという、まぁ変数みたいなもんがあります。具体的には

/* 擬似クラス:rootで変数定義 */
:root {
  --base-color: #FFF;
}
/* var(--カスタムプロパティ名)で変数を呼び出し */
#sample-box {
  color: var(--base-color);
}

この場合の擬似クラス:rootはHTMLセレクタのようなものですが、優先度はHTMLより上位です。
:ROOT > HTML > BODY　な感じで優先適用されます。

CSS全体にグローバルな変数を設定する場合に使うと何かと便利です。一度グローバルな変数を定義してしまえば、同じ値を必要とする場面で何度も繰り返し使用でき、あとから全体の色を変えたい場合なんかは、変数の中身をいじってしまえば即座に全体に反映されますので、設定漏れなんかを防げる上にトータルの作業量も削減できるわけです。

カスタムプロパティは–（ハイフン2回）で設定し、あとに続く値は通常のCSSと同じように記述します。変数を呼び出すときはvar(–カスタムプロパティ名)で呼び出します。なので最終的にはこんな感じでまとめました。

/* 変数定義 */
:root {
  --base-bg-color: #FFF;
  --base-color: #333;
}
@media (prefers-color-scheme: dark;){
  :root {
    --base-bg-color: #333;
    --base-color: #CCC;
  }
}
/* CSSへの記述 */
#sample-box {
  background-color: var(--base-bg-color);
  color: var(--base-color);
}

いかがでしｔ（ｒｙ

安易ないかがでした系blogに成り下がっては負けた気がします。まぁ、こうしてやれば毎度毎度メディアクエリを設定せずとも一回の記述でダークモード対応ができる訳です。また、ダークモード対応をするしないに関わらず、同一設定を使用するCSSは変数に代入してやることで作業カロリーの削減とメンテナンス性を向上させられるのでおすすめです。実はこの方法を知るまで、変数のたぐいを一切使わずに長ったらしいCSSを作ってました。（ちゃんと仕事で使ってるVBAとかGASとかは活用してるよ？変数、命名規則ガバいけど）

WordPressは何かと色々便利なプラグインが揃っていて、「ちょっとこれ欲しい」が簡単に手に入るのが魅力です。しかしながらプラグインが増えれば増えるほど競合も発生しますし、Wordpress本体のアップデートと運命を共にする羽目になるので、プラグインレスにできるところはプラグインレスにした方が長い目で見てお得です。「Wordpress」＋「実装したい機能」＋「プラグイン不要」でググればたいてい出てきます。パンくずリストとかその代表例ですね。

雑感

このWebサイトを作り始めてから初めてCSS3に触れ一度作ってもういいやとも思ってましたが新しい技術とかTipsが生まれるたびに小さな改良？改悪？を繰り返しております。ぶっちゃけCSSとかHTMLに関するTipsならググったほうが早いですし分かりやすいですし、有益な記事はいーっぱいありますので是非そちらをご参照ください。

あっ、試すなら必ずローカル環境で試してからだゾ（一昨日本番環境をふっとばしかけた）

• Tweet
•