Twenty Seventeenの背景色を完全に真っ黒にする

今まで長い間Twenty Elevenを使ってきましたが、Twenty Seventeenもいいかなと思い、テーマを切り替えることにしました。

なんと言っても、Twenty Seventeenはヘッダー画像に大きな画像が使えるし、黒っぽい色を基調にした背景色も選べるところがいいですよね。

しかし、Twenty Seventeenは完全に真っ黒というわけではなく、黒に近いグレーなんです。真っ黒にしたいですよね。

まずは、これです。こちらを参考にしました。

.site-content-contain {
background-color: #000000 !important;
}

しかし、これだけだと、まだ灰色の罫線が入っているので、それを取る必要がありました。

tr {
border: #000000;
}

li {
border: #000000 !important;
}

上のtrの設定は、アクセス・カウンターのtableの部分です。

検索ボックスも、真っ黒にするには、下記のコードが必要でした。これが一番やっかいでした。

input {
background:#000000 !important;
}

svg {
background-color:#000000 !important;
}

button.search-submit {
background-color:#000000 !important;
}

こうしてついにTwenty Seventeenを真っ黒にすることができました。

関連ページ:
Twenty Seventeenの背景色を変える(ほたるのブログ)
Twenty Seventeenをお勧めする理由

追伸:
しかし、検索窓の虫眼鏡マークが黒くなりすぎてしまいました。この部分はもう少し白っぽい灰色の方がいいですよね。取りあえず、#ccccccあたりにしておきました。それにはsvgの設定を下記のコードに変更すればいいです。

svg {
background-color:#000000 !important;
color:#cccccc;
}

結局、真っ黒にするためのコードは全体として下記のようになります。

.site-content-contain {
background-color: #000000 !important;
}

tr {
border: #000000;
}

li {
border: #000000 !important;
}

input {
background:#000000 !important;
}

svg {
background-color:#000000 !important;
color:#cccccc;
}

button.search-submit {
background-color:#000000 !important;
}