ダークモードに対応

このサイトもダークモードに対応しておこうと思い、prefers-color-scheme を使って配色を分けるようにしてみた。

基本的な方法を解説しているブログは多数あるので、その上で必要だった工夫をメモ。

全体の構成の方針としては、CSS変数を活用してライトモードとの重複コード、または漏れを防ぐようにした。

以下はCSSの構成イメージ。

:root {
  /* 変数定義 */
}
@media (prefers-color-scheme: dark) {
  :root {
    /* ダークモードの変数定義 */
  }
}
/* 変数を使った定義 */
body {}
:

以下は、このブログ固有の事情で注意が必要だったその他のポイント。

意図しないライトモードの適用の回避

Syntax highlight には highlight.js を使用しており、このサイトのCSSの中に埋め込む構成をとっている。

当初、ダークモード用のテーマとライトモード用のテーマとで定義しているクラスに差分があった。最初は以下のように定義していたせいでダークモードでもライトモードの値が使用されてしまいおかしい配色になってしまった。

イメージ:

/* ライトモード用のhighlight.jsテーマ */
.x { ... }
.y { ... }
@media (prefers-color-scheme: dark) {
  /* ダークモードのhighlight.jsテーマ */
  .y { ... }
  /* .xはダークモードで上書きしていない */
}

そこで、ダークモードのときはライトモードのテーマを読み込まないように以下のように変更して対応した。

@media not all and (prefers-color-scheme: dark) {
  /* ライトモードのhighlight.jsテーマ */
}
@media (prefers-color-scheme: dark) {
  /* ダークモードのhighlight.jsテーマ */
}

アイコンのSVG化

ラベルのアイコンをbase64エンコードして埋め込んで作っていたが、背景色が透過していなかったためダークモードで目立つ状態になってしまった。これを機にSVGに変更してどちらでもまともな見栄えになるように修正。

コメント投稿フォームはそのまま(諦め)

Bloggerのコメント投稿フォームはウィジェットとして簡単に埋め込めるが、白い背景であり、ダークモードに合わない。スタイルを変更できればよいが、iframeで実装されておりCSSを親から適用することができない。これは避けることができないため、ポップアップで開く設定にすることでダークモードの画面内に埋め込まないようにした。

モバイル版ではなぜかポップアップにすることができなかったため、埋め込みのままとしている。

最初に一瞬白くなる(未対応)

おそらくテーマのデフォルトのCSSを先に読み込んでしまっているせいで、一瞬従来のライトモードの配色が反映されてしまう。 パフォーマンス改善 でCSS/に埋め込んだが、このCSSの中身もダークモード対応する必要がありそう。これは少し時間がかかりそうな気がするので一旦保留…。