nightmode

最近ダークモードが流行ってますね
Windows などの OS が対応したり、ウェブページでもダークモードが選べるようになってたり

簡単に作れていい感じなら流れに乗ってこのブログも入れようかなーと思ってちょっと試してみました

とりあえず黒背景で白文字にすればいいのかな?
でもそれだと色的に見づらくなる場所もあるような・・・

適当にいくつかのページのダークテーマを見てました
背景と文字色以外の色も変わってます
と言っても、新しく色を設定し直したと言うより反転しただけみたい
赤系のが青系になってたり、色を反転してるだけみたい?

それだけでいいならおてがるそう!
とりあえず反転してみました!









invert-filter-blog


・・・・・・ホラーサイトかな?

却下


エディタみたいなずっと見ているツールならまだしも、ブログでダークモード対応してもあまり需要なさそうですしこのままにします
常にダークじゃないと生きていけない!とかいう人はウェブページ側に頼らずブラウザ拡張機能など使ってるでしょうし

ちなみにこんなダークモードも(NightMode セクションのところ)

ところで

上の画像では、画像部分の色が反転してたりしてなかったりしてますね
見た感じ img タグはそのままで CSS の background なら反転されてるようです

反転には Vivaldi の機能を使いました
右下の方にあるフィルタから「色調反転フィルター」を選べば反転してくれます

気になったのでどうやってるのか調べてみました
結果は単純に CSS を追加してるだけみたい
ファイルはここ

C:\Program Files\Vivaldi\Application\2.11.1811.52\resources\vivaldi\user_files\Filter_Invert.css

※インストール場所や Vivaldi のバージョンで変化します
CSS はこれ⇩

html {
color: #ffffff;
background: #000000;
filter: invert(100%) !important;
}

/* Inverting images or video does not do any good */
img, video {
filter: invert(100%) !important;
}

すごくシンプル!