Lightning + WP Dark Mode (無料版)でヘッダーロゴ画像をダークモード対応する

個人的メモ。

WP Dark Modeでは、有料版ならダークモードオンオフに連動して画像を差し替えられるようだが、無料版でもCSSで何とかすればいけるのではと思った。

WP Dark Modeでは、ダークモードがオンになると< html >にwp-dark-mode-activeというクラスが付与されるらしい。
mihune-web.com

そこで、Lightningの追加CSSに以下を追加することでダークモード時にロゴ画像の色を反転することができた。

.wp-dark-mode-active .site-header-logo img{
    filter: invert(1) hue-rotate(180deg);
}

ロゴ画像は黒文字の透過PNGだがうまくいっている。