はてなブログのグローバルヘッダーをダークテーマっぽくする【失敗】

今年の2月にブログのデザインを刷新した。

うおおお！ブログのデザインを刷新した！！！https://t.co/SK39QahrOn pic.twitter.com/JUobzRjpaz
— 今日の三井君 (@todays_mitsui) 2025年2月10日

せっかくなのでダークモードに対応させることにした。

なんとダークモード対応です。そんなまさかですよね。 pic.twitter.com/pzYMBkVuUY
— 今日の三井君 (@todays_mitsui) 2025年2月10日

我ながらいい感じである。CSS やってて良かった。CSS を "やる" とは？

グローバルヘッダー明るすぎ問題

一つ問題が残っている。はてなブログのグローバルヘッダーが白基調で明るすぎるのだ。

これをどうにかしてダークテーマっぽくしようと思う。
ちなみに結論を先に書くと、やってみたけど上手くいかなかった 。悲しいね。

色調を変えたいだけなのでカスタム CSS を書けばいけるかと思ったがなかなか難しい。
グローバルヘッダーは <iframe> で表示されているし、クロスオリジンなので JavaScript でコンテンツを改変しようにも制限がかかる。

よって <iframe> の外から調整してやるしかない。

CSS の filter プロパティでがんばることにした。

@media (prefers-color-scheme: dark) {
    #globalheader-container {
        filter: invert(80%);
    }
}

このように、グローバルヘッダー全体に { filter: invert(80%); } で色調反転を施してみる。

かなり "っぽく" なった。
ただ、右上の「購読リスト」のところに出ている新着バッジが青緑で気持ち悪い。
幸いにこの箇所以外は無彩色なので { filter: hue-rotate(180deg); } で色相を反転させてあげれば赤っぽい色に戻るはずだ。

@media (prefers-color-scheme: dark) {
    #globalheader-container {
        filter: invert(80%) hue-rotate(180deg);
    }
}

invert(80%) してから hue-rotate(180deg) している。するとこうなる。

とてもいい。

と思ったら、はてなアカウントのアバター画像が大変なことになっていた。

はい、ダメでした。

私には難しかった。一応使えそうなネタとしては、

サイドパネルが開いているときだけ親ドキュメント (ブログ全体) の <body> に globalheader-expanded という class がつくので CSS を上手く分岐してあげればいいのかも
SVG フィルターってやつで何か上手いことできないかな？(ジャストアイデア)

といったところか。

たぶんはてな社のブログチームにはたらきかけたほうが早い。

私からは以上です。

invert(90%) からの hue-rotate(270deg) すれば良い感じではなかろうか。

@media (prefers-color-scheme: dark) {
    [data-hatena-star]::part(star-button-container) {
        filter: invert(90%) hue-rotate(270deg);
    }
}

こうなる。

Before	After

まぁいいんじゃない？