前回のエントリーでは、ヘッダー部分をそのままにして逃げた感じだったんですが、
結局、ダークモード用の画像をそれぞれ用意して差し替えるようにしました。
トップのナビゲーションの色も1トーン下げました。
サイトロゴを白黒反転させる作業は、Wordでやっつけました。
ページの背景は#333333 に。いつの間にかWordでもHexで色指定ができるようになってました。
これを画面スクショ撮って、ペイントでジャストなトリミングを。んでもってコピーして、
IrfanViewで貼り付け。GIFで貼り付ける際に透過色をクリックで指定。
これを繰り返すわけです。
一方、ダークモードのときにダークモードの画像に差し替える方法はこんな感じ。<source>タグでダークモードの画像を呼び出すわけです。んでライトモードの通常の画像タグを並列させて<picture>タグで囲む、ってやつ？ HTML5の仕様だと思うんですけど、なぜかExpression Web 4では理解できないらしくてコードビューでエラーが出ます。
<picture>
<source srcset="（ダークモードの画像へのパス）" media="(prefers-color-scheme: dark)">
<img alt="" src="（通常の画像へのパス）">
</picture>
Windows 10のぱちょこんは自動的にダークモードにならないのでライトモードではこんな感じになります。
MacとかiPhoneとかiPadは日没とともに自動的にダークモードになりますけど。
ダークモードの調整をしているうちに、ダークモードの方が好きになってきたかもです。目に優しいし、コンテンツに集中しやすくなるかもかも？？
