idomizu theatreがダークテーマに対応しました
TL;DR
オタクすぐ TL;DR。当ブログをダークテーマにする際、何をしたのかを備忘録的に書いておく。
環境
WordPress 5.4.2、テーマは Coldbox 1.9.1。その他:
背景色
以前ブログをダークテーマにするかどうか、するなら背景の色はどうするかを悩んでいた際に、Twitter でアンケートを取ったところ「9割以上の人がダークテーマを好んでいる」「有機 EL のために真っ黒がいいという人が多い」ということが分かった。なお、このアンケートは主にガジェット好きな方々にお答えいただいたものなので、バイアスはかなりあるとは思う。
この結果を元に実際に背景真っ黒 (#000) を試してみたのだが、なんだかつまらない見た目になった上、ページによっては昔のアングラサイトのようになってしまい、あまりデザイン的によろしくなかった。そのため、2番目に多く、かつ Material Design で推奨されているダークグレー (#121212) を採用することにした。
A dark theme uses dark gray, rather than black, as the primary surface color for components. Dark gray surfaces can express a wider range of color, elevation, and depth, because it’s easier to see shadows on gray (instead of black).
Dark gray surfaces also reduce eye strain, as light text on a dark gray surface has less contrast than light text on a black surface.
The recommended dark theme surface color is #121212.
Dark theme – Material Design
なお、有機 EL のスマホでダークグレー (#121212) と真っ黒 (#000) を比較したところ、節電効果に大した差を見いだせなかったという実験結果もある。
that would mean the dark gray theme consumes an additional 0.063% of the device’s battery per hour.
No, “AMOLED Black” Does NOT Save More Battery Than Dark Gray
具体的な作業としては、Coldbox のテーマカスタマイズ機能の「色」でメインカラーや背景色をダークグレーに設定。これで周囲の背景は黒くなったが、本文などの背景は白いままだったので、追加 CSS 機能で以下のように設定。
.content-box, .sidebar .widget, .footer-widget-area, .grid-view .post-inner {
background-color: #121212;
}文字色
文字色を黒いまま背景を暗くすると、当然文字は見にくくなる。そのため、文字を白くする必要がある。追加 CSS 機能で色を調整してみたが、単純に body を指定するだけではだめだった。本文の文字色は Material Design に従い、コントラストを上げすぎず (目に優しく) 下げすぎず (読みやすさを保ちつつ)、真っ白ではなく #E1E1E1 とした。
body, .entry p, .entry blockquote li, .widget a, .widget .textwidget a, .meta-label, .related-posts .post-category a, .related-posts .post-category, .comment-tabmenu .active>a, #comment-list .comment-author .fn, ul.page-numbers {
color:#E1E1E1;
}見出しや太字は他の文字よりも明るくして目立たせるため、本文よりも明るめに。
h1, h2, h3, h4, h5, h6, .entry strong {
color: #F0F0F0;
}太字に関しては黒字ならともかく白字だと色を変えるだけでは他の文字と差別化されているようには見えなかったため、少し大きくした。
.entry strong {
font-size: 1.1em;
}パンくずリストや更新日、記事の抜粋などは少し暗めの #A5A5A5 とした。
header, .entry blockquote, .post-excerpt, .grid-view .post-date, .post-meta, .post-meta.content-box a, .post-meta.sns-buttons.single-bottom a, ul.page-numbers span.page-numbers.current, .widget_recent_entries .post-date {
color: #A5A5A5;
}画像のキャプションも少し暗めの #A5A5A5 とした上で、文字を少し小さくした。
.entry figcaption {
color: #a5a5a5;
font-size: 0.8em;
}文字を選択した際の網掛けの色が Coldbox のデフォルトだと黒のため、背景色と同化してしまう。これを回避するため、選択時の網掛けの色をライトグレー (#BBBBBB) 、文字色をほぼ白に近いライトグレー (#F0F0F0) とした。
::selection {
background: #BBBBBB;
color: #F0F0F0;
}古い Firefox (61以前) では上記では動かないらしいので、別途設定しないといけない。
::-moz-selection {
background: #BBBBBB;
color: #F0F0F0;
}参考: ::selection – CSS: カスケーディングスタイルシート | MDN
その他の要素の色
この段階でもある程度ダークテーマ化は完了したが、ここから細かい追い込みを始める。
区切り線の類や引用の枠が明るかったため、 #505050 に指定。
hr {
border-color: #505050;
}
.content-box, .sns-buttons.single-bottom {
border-bottom: 1px solid #505050
}
.entry blockquote {
border: medium solid #505050;
}特に意味はないが、本文を #505050 の枠で囲んでみた。
.content-inner {
border: 3px solid #505050;
}トップページの記事一覧のタイル、投稿者のタイル、関連記事のタイル、埋め込みコードの背景色を、ブログ全体の背景色 (#121212) より少し明るいダークグレー (#191919) に変更。
.grid-view .post-inner, .author-box, .related-posts .post ,.entry pre {
background-color: #191919;
}Coldbox 標準の見出しは文字が大きくなるだけだったので、背景を #191919 とした上で、ボックスの左と下にアクセントカラーの枠を置いてみた。左の枠は下の枠より太くしている。
.entry h2 {
border-bottom: solid 3px /*ここに任意のアクセントカラーを挿入*/;
border-left: solid 10px /*ここに任意のアクセントカラーを挿入*/;
padding: 0.25em 0.5em;
margin-top: 2em;
margin-bottom: 1em;
background: #191919;
}背景を最も暗く、その上に乗っている要素を背景より明るい色にする点は Material Design を参考にした。
Depth: At higher levels of elevation, components express depth by displaying lighter surface colors
Dark theme – Material Design
隣り合った関連記事のタイル同士がくっついてしまったため、背景色と同じ色の太い枠をつけることで、擬似的に枠と枠の間にスペースがあるように見せかける。
.related-article {
border: thick solid #121212;
}コメントフォームの入力欄自体を暗くすることはできなかったが、せめてその白っぽい枠だけでもなくしてみた。
#respond .comment-form {
padding: 0px;
}表のセルの背景と枠線の色の変更。実際はサイズ以外にも色々指定しているが、この記事のために簡略化して表記している。
.entry table th {
color: #000;
background-color: /*ここに任意のアクセントカラーを挿入*/;
border: solid 1px #505050;
}
.entry table td {
background-color: #191919;
border: solid 1px #505050;
}奇数列と偶数列、交互に背景色を変えるためには
.entry table tr:nth-child(odd) td {
background-color: #202020;
}埋め込み記事のダークテーマ化は追加CSS機能ではどうしようもなかったので、テーマの functions.php (Coldbox の場合 wp-content/themes/coldbox/functions.php) に以下のコードを挿入 (※3行目のディレクトリは使用中のテーマに合わせたものを指定)。
if ( ! function_exists( 'my_embed_styles' ) ) {
function my_embed_styles() {
wp_enqueue_style( 'wp-oembed-embed', '/wp-content/themes/coldbox/assets/css/wp-oembed-embed.css' );
}
add_action( 'embed_head', 'my_embed_styles' );
}テーマの CSS フォルダ (Coldbox だと wp-content/themes/coldbox/assets/css) に wp-oembed-embed.css を以下の内容で新規作成。
.wp-embed, .wp-embed a, .wp-embed-heading a {
color: #E1E1E1;
}
.wp-embed {
background: #191919;
border: none;
overflow: auto;
}ここでも Material Design に従い、文字色は本文と同じく #E1E1E1 とし、ブロックの背景をサイト自体の背景よりやや明るい #191919 とした。
参考: URLを貼り付けるだけで埋め込まれるWordPress内部リンク（oEmbed）をカスタマイズする方法 | HPcode
埋め込みツイートのダークテーマ化も追加CSSでは不可能。変更するには、テーマの header.php (Coldbox の場合 wp-content/themes/coldbox/header.php) の <head></head> 内に以下のコードを挿入。
<meta name="twitter:widgets:theme" content="dark">参考: Overview — Twitter Developers
背景色は選べず、ライトテーマ(デフォルト)かダークテーマかの選択肢しかない。ダークテーマだと背景が真っ黒になってしまい、これは Material Design に反するが、どうしようもない。
おわりに
作業は一筋縄では行かず、想像していたよりも大変だったが、最終的になんとかそれっぽくなった。今回の作業では、Chrome の F12 開発者ツールがかなり役に立った。「色を変えたいところがあったらとりあえず F12 押しとけ」みたいな。結果、なかなかいい感じになったのではないかと思う。今後はダークテーマ/ライトテーマの手動切替機能を実装してみたい。
