ダークモードに適切な配色って？

とりあえず、わにちゃんどっとこむをダークモードに対応させました。うちんとこのサイトでは独自でCSSを書かないとうまくいかないです。

「ワニchanのぱそこんわーるど」がグレー基調で一番シンプルな配色なので、ダークモードに対応するには一番手っ取り早いです。ヘッダー部分はダークじゃないんですけど、ロゴの色反転とか面倒なので、背景色を薄いグレーでごまかしました（逃

f:id:wanichan:20200626100324p:plain

ダークモードにいきなり真っ白な背景とか飛び込んでくると眩しいので、明るさを抑えるフィルターをかましました。

ダークモードのメディアクエリは

/* ダークモード */
@media (prefers-color-scheme: dark) {
（ここにダークモードのスタイルコードを記述）
}

「ワニchanのぱそこんわーるど」のダークモード部分を抜粋してみましょう。

/* ダークモード */
@media (prefers-color-scheme: dark) {
body {
	background-color: #222;
}
h1, h1 a:link, h1 a:visited, h2, h3, h4, h5, h6, h2 a:link, h3 a:link, h2 a:visited, h3 a:visited, aside h3, .left_col h3, .right_col h3, .table-of-contents a:link {
	color: #CCC;
}
header{
	background-color: #E6E6E6;
}
ins,img{
	filter: brightness(95%);
}
#container, .comment{
	filter: brightness(90%);
}

footer,#page_content,#sidebar {
    background-color: #333;
    color: #fff;
  }

.topic_path, .lead, ul.table-of-contents,.table th,.index,.rel {
	background-color: #444;
	color: #fff;
}
a:link {
	color: #99CCFF;
}
a:visited {
	color: #3399FF;
}
}

ダークモードのポイントとなる配色の掟は