ダークテーマと遊ぶ

問題点

reset.cssでcolorプロパティやbackgroundプロパティといった色の指定をするものについて一切リセットせずにやればいいのではと思った。が、しかし、tableタグのデフォルトborderプロパティのカラーが自動でひっくり返って白線になることはない。inputタグに関してはそれらしい挙動をしている。

//html & css

<style>

:root

{

	color-scheme: dark;

}

</style>

<div>aaa : <input type="text"></div>



//ダークモードのときの useragent stylesheet

input {

	-webkit-writing-mode: horizontal-tb !important;

	text-rendering: auto;

	color: -internal-light-dark(black, white);

	letter-spacing: normal;

	word-spacing: normal;

	text-transform: none;

	text-indent: 0px;

	text-shadow: none;

	display: inline-block;

	text-align: start;

	appearance: auto;

	background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));

	-webkit-rtl-ordering: logical;

	cursor: text;

	margin: 0em;

	font: 400 13.3333px Arial;

	padding: 1px 2px;

	border-width: 2px;

	border-style: inset;

	border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));

	border-image: initial;

}

ダークモードへの対応はカラーマネジメントが課題になるのでいろいろと策を考える必要がある。

できたらいいけど機能しない例

@media screen and (prefers-color-scheme: light)

{

	:root

	{

		--base:rgba(0, 0, 0, 1);

		--back:rgba(255, 255, 255, 1);

	}	

}



@media  screen and (prefers-color-scheme: dark)

{

	:root

	{

		--base:rgba(255, 255, 255, 1);

		--back:rgba(0, 0, 0, 1);

	}

}

明暗に応じてそれぞれ同じ名前のcss変数にカラーコードをテレコに代入する策である。実に安直だ。

結論

アイケアの側面からあっちこっちのコンテンツに飛んでいるとダークテーマを導入していないコンテンツに遭遇して『黒から白』への順応に目が疲れる。それなりにwebのトレンドを追いかけている人が管理しているコンテンツくらいしかダークテーマが導入されていないように思うのであまりwebの方向で追いかけるべきものではないと感じた。それでも使いたいのであればブラウザの拡張でも使ったほうが賢いと思われる。