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 機能で細かく追い込んでいく。
背景
Material Design を参考に、背景を最も暗く、その上に乗っている要素を背景より明るい色にする。
Depth: At higher levels of elevation, components express depth by displaying lighter surface colors
Dark theme – Material Design
本文やウィジェットの背景は、ページ全体の背景である #121212 より少し明るい #1E1E1E を設定。
.entry-inner,
.content-box,
.sidebar .widget,
.footer-widget-area,
.grid-view .post-inner {
background-color: #1E1E1E;
}コード表示 (Highlighting Code Block)、インラインコード、引用、トップページの記事一覧のタイル、投稿者のタイル、関連記事のタイルを、本文の背景より更に明るい #2D2D2D に。
.entry kbd,
.entry pre,
.hcb_wrap pre,
.entry code,
.hcb_wrap pre code,
.entry blockquote,
.grid-view .post-inner,
.author-box,
.related-posts .post {
background: #2D2D2D;
}文字色
文字色を黒いまま背景を暗くすると、当然文字は見にくくなる。そのため、文字を白くする必要がある。追加 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;
}パンくずリストや更新日、記事の抜粋、画像のキャプションなどは少し暗めの #9B9B9B とした。
header,
.entry blockquote,
.post-excerpt,
.entry figcaption,
.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: #9B9B9B;
}画像のキャプションに関しては、文字を少し小さくした。
.entry figcaption {
font-size: 0.8em;
}文字を選択した際の網掛けの色が Coldbox のデフォルトだと黒のため、背景色と同化してしまう。これを回避するため、選択時の網掛けの色をライトグレー (#BBBBBB) 、文字色をほぼ白に近いライトグレー (#F0F0F0) とした。
::selection {
background-color: #BBBBBB;
color: #F0F0F0;
}古い Firefox (61以前) では上記では動かないらしいので、別途設定しないといけない。
::-moz-selection {
background-color: #BBBBBB;
color: #F0F0F0;
}参考: ::selection – CSS: カスケーディングスタイルシート | MDN
トップページの記事一覧のタイルなどにマウスカーソルを合わせると文字が黒くなってしまうのを回避。カーソルが合うと少し明るく。
.grid-view .post-inner a:hover .post-title,
.standard-view .post-title:hover,
.widget .widgets-list-layout li:hover a,
#respond .logged-in-as a:hover,
.standard-view .post-inner:hover .post-title,
.title-box a:hover,
.post-meta a:hover,
.post-meta.content-box a:hover,
.post-btm-tags a:hover,
p.post-btm-cats a:hover,
.related-posts .post:hover .post-title {
color: #F0F0F0;
}その他の要素の色
この段階でもある程度ダークテーマ化は完了したが、ここからさらに細かい追い込みを始める。
区切り線の類や引用の枠が明るかったため、 #505050 に指定。
hr {
border-color: #505050;
}
.content-box,
.sns-buttons.single-bottom {
border-bottom: 1px solid #505050
}Coldbox 標準の見出しは文字が大きくなるだけだったので、背景を #191919 とした上で、ボックスの左と下にアクセントカラーの枠を置いてみた。左の枠は下の枠より太くしている。
.entry h2 {
border-bottom: solid 3px #8AB4F8;
border-left: solid 10px #8AB4F8;
padding: 0.25em 0.5em;
margin-top: 2em;
margin-bottom: 1em;
}隣り合った関連記事のタイル同士がくっついてしまったため、背景色と同じ色の太い枠をつけることで、擬似的に枠と枠の間にスペースがあるように見せかける。
.related-article {
border: thick solid #1E1E1E;
}コメントフォームの入力欄自体を暗くすることはできなかったが、せめてその白っぽい枠だけでもなくしてみた。
#respond .comment-form {
padding: 0px;
}表のセルの背景と枠線の色の変更。実際はサイズ以外にも色々指定しているが、この記事のために簡略化して表記している。
.entry table th {
color: #000;
background-color: /*ここに任意のアクセントカラーを挿入*/;
border: solid 1px #555;
}
.entry table td {
background-color: #383838;
border: solid 1px #555;
}奇数列と偶数列、交互に背景色を変えるためには
.entry table tr:nth-child(odd) td {
background-color: #2D2D2D;
}埋め込み記事のダークテーマ化は追加CSS機能ではどうしようもなかったので、テーマの functions.php (Coldbox の場合 wp-content/themes/coldbox/functions.php) に以下のコードを挿入 (※3行目のディレクトリは使用中のテーマに合わせたものを指定)。
参考: URLを貼り付けるだけで埋め込まれるWordPress内部リンク（oEmbed）をカスタマイズする方法 | HPcode
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 を以下の内容で新規作成。ここでも Material Design に従い、文字色は本文と同じく #E1E1E1 とし、ブロックの背景をサイト自体の背景よりやや明るい #191919 とした。なお、埋め込み記事を標準フォント以外で表示したい場合は、別途フォントの指定も必要となる。
.wp-embed {
color: #E1E1E1;
background: #2D2D2D;
border: none;
overflow: auto;
}
.wp-embed a,
.wp-embed-heading a {
color: /*リンクの色*/;
}埋め込みツイートのダークテーマ化も追加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 押しとけ」みたいな。結果、なかなかいい感じになったのではないかと思う。今後はダークテーマ/ライトテーマの手動切替機能を実装してみたい。
