idomizu theatreがダークテーマに対応しました
TL;DR
オタクすぐ TL;DR。当ブログをダークテーマにする際、何をしたのかを備忘録的に書いておく。
環境
WordPress 5.4.2、テーマは Coldbox 1.9.1。その他:
背景色
以前ブログをダークテーマにするかどうか、するなら背景の色はどうするかを悩んでいた際に、X (旧: 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;
}パンくずリストや更新日、記事の抜粋、画像のキャプションなどは少し暗めの #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
}隣り合った関連記事のタイル同士がくっついてしまったため、背景色と同じ色の太い枠をつけることで、擬似的に枠と枠の間にスペースがあるように見せかける。
.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">参考: Webpage properties | Docs | Twitter Developer Platform
背景色は選べず、ライトテーマ(デフォルト)かダークテーマかの選択肢しかない。ダークテーマだと背景が真っ黒になってしまい、これは Material Design に反するが、どうしようもない。
おわりに
作業は一筋縄では行かず、想像していたよりも大変だったが、最終的になんとかそれっぽくなった。今回の作業では、Chrome の F12 開発者ツールがかなり役に立った。「色を変えたいところがあったらとりあえず F12 押しとけ」みたいな。結果、なかなかいい感じになったのではないかと思う。今後はダークテーマ/ライトテーマの手動切替機能を実装してみたい。
