ダークモード対応してみた

black smartphone

目に優しく、デバイスに優しく(OLED)ということで対応しました。

プラグインを入れれば解決と思いきや、管理画面をダークモード対応するものはあったが、ブログコンテンツをダークモードにするプラグインはありませんでした。

ただ調べてみると、とても簡単だったのでご紹介。(ウェブ系のエンジニアに限る・・・)

定義方法

ダークモード対応の仕方は簡単で、以下のCSSをテーマのカスタマイズから追加するだけ。
デバイスの設定に応じて、自動的にこの中に定義したスタイルが適用される。

@media (prefers-color-scheme: dark) {
  // .... テーマに応じたクラスとIDに対して色を設定していく
}

色味

配色はDARK READER という、どのウェブサイトでもダークモード対応できるエクステンションの配色を参考にしました。

適用する要素の特定

色を適用する要素の探し方は、Chrome Developer Tool から 上記エクステンションを有効にした時に色が変わった要素を見つけて、その部分のCSSをそのまま利用してきました。

結果

:root {
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	body,
	div {
		color: rgb(207, 203, 196);
		background-color: rgb(24, 26, 27);
	}
	.hfg_header .header-main-inner {
		background-color: rgb(24, 26, 27);
	}
	.entry-title a {
		color: rgb(207, 203, 196);
	}
	.nv-meta-list a,
	.nv-meta-list a:hover {
		color: rgb(195, 191, 182);
	}
	.nv-meta-list li {
		color: rgb(195, 191, 182);
	}
	a {
		color: rgb(77, 172, 253);
		text-decoration-color: initial;
	}
	.nv-page-title-wrap.nv-big-title .nv-page-title {
		border-bottom-color: rgb(54, 54, 54);
	}
	.article-content-col .content {
		border-bottom-color: rgb(54, 54, 54);
	}
	.nv-sidebar-wrap.nv-right {
		border-left-color: rgb(54, 54, 54);
	}
	.footer-bottom-inner {
		background-color: rgb(36, 41, 46);
	}
}