CSS
ウェブサイトのダークモード対応

はじめに

webページのダークモード対応を行うことになったので、その際、CSSやSVGなどの対応を行ったので忘れないようにめもめも

基本はCSSのprefers-color-schemeで

【DEMO】 ※ Mojaveなどでダーク/ライトモードの切り替えで確認できます

iOS関連の仕事しているので、macやiOSしか確認できてないのですが、以下のような、CSSの media要素の、prefers-color-scheme を使って各モードの色を指定しておく



//prefers-color-schemeに対応していないOS用
:root {
    --background-color: #fff;
    --secondary-background-color: #ccc;
    --font-color: #000;
  }


//指定なし
@media (prefers-color-scheme: no-preference) {
  :root {
    --background-color: #fff;
    --secondary-background-color: #ccc;
    --font-color: #000;
  }
}

//ライトモード
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #fff;
    --secondary-background-color: #ccc;
    --font-color: #000;
  }
}

//ダークモード
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #262626;
    --secondary-background-color: #333;
    --font-color: #fff;
  }
}

//指定した値を var(CSS名) で指定する

body{
	background-color: var(--background-color);
	color: var(--font-color);
}

div{
	background-color: var(--secondary-background-color);
	width: 80%;
	height: 500px;
	margin: auto;
}

ダークモードに対応する理由としては、ダークモード時に白背景ベースのページが出てくるの眩しく見づらくなるため。

ただ、注意点として通常（ライトモード）でも同じだが、真っ白過ぎるwebページなどは目が疲れるため、見やすくするために少し色をつけていることがほとんどだと思う。それと同じで、ダークモードだからと言って、全体を真っ黒にしすぎると見づらい。少し白色を混ぜた色にすると落ち着いた感じで見れるようだ。

テキストの色も蛍光色をそのまま使うと黒背景時に見づらくなってしまうので、白色を足した淡い色に変えるといいかもしれない。マーカーのように文字の背景に敷く場合は、逆に黒色を足すと見やすくなるような気がする

あと、対応しているのが Safari12.1、Firefox 67以降のバージョン Chromeも76で対応しているので Mojave以前のOSでもブラウザをアップデートしていれば、prefers-color-scheme に対応しているので問題ない。が、iOS12の場合は、prefers-color-schemeに対応していないのでCSSが効かない。効かないだけならいいのだけれども、どうもその要素が無効になってしまうみたいなので、iOS12向けに対応する場合は、スクリプトなどでユーザーエージェントを判定してCSSを切り替える必要がある。

追記：iOS12などprefers-color-schemeに対応してないOS向けに、先頭に root: で記載し、その後 prefers-color-scheme で打ち消すようにすればいいらしい

画像等をダークモード対応する

対応するのであれば、大きく二つに分かれると思う。まず、アイコンやボタンなどの画像だけれども、単色であればSVGに変換してCSSでfillの色を変えることで対応できる。なんだけれど、svgをhtml内に直接書き込む場合は、classなりidを足してcssを割り当てれば大丈夫。けど、外部SVGを読み込む場合は、SVGファイル内にcss読み込む記述をしないとclass名などを付けてもCSSが効かない。

と言うことで、外部読み込みのSVGファイルにCSS読み込みをするのは以下のように記述を書き込む。



 <defs>
    <style><![CDATA[ @import url(cssファイル.css); ]]></style>
 </defs>

以下の用なCSSを書いて、fillの色が指定されているタグないにcssを追記する



#icons{
		fill: var(--icon-color);
		
	}

svgにせず、ダークモードとライトモードで画像を切り替える場合は、pictureタグを使って以下のように記述したりもできる



	 <picture>
	   <source srcset="dark.png" media="(prefers-color-scheme: dark)">
	   <img src="light.png">
	 </picture>

基本的には上記の対応だけでダークモード時の調整はできるはず