画像のダークモードを実現させるには
結論から言えば、CSSのfilter機能を用いればよい。これを使えば、画像の色を白黒反転させて、画像のダークモードを擬似的に再現できる。特に、テキストが主体の画像の場合に有効である。
たとえば、Ankiでダークモードを使用すると画像の背景は白色のままだが...
CSSのfilterを用いれば、以下のように画像のダークモードが実現可能となる。
コード配布
CSS(このコードをコピーしてAnkiの「書式(スタイル)」欄に張り付けると、画像のダークモードが実現できる)
.nightMode img {
filter: invert(100%);
}
ここまでが画像のダークモード化に関する記事である。以下では、
小ネタ1 一部の画像にだけダークモードを適用しないようにする方法 (2024/04/27加筆)
イラストや風景写真など、ダークモードを適用したくない画像が一部存在する場合は、その画像のコードを
<img src="〇〇.jpg">
から
<img src="〇〇.jpg" style="filter: none;">
のように変更すればよい。このようにすれば、テキスト主体の画像はダークモードにしつつも、イラストや風景画像は通常の外観を維持できる。
小ネタ2 テキストの文字色が薄い場合の対処法 (2024/05/19加筆)
スキャンした画像(自炊した書籍など)をダークモ
具体的には、「コード配布」にあるコードに、saturate(7)を付け加えて以下のようにする。(7)という数字の部分は好みに合わせて変更してよいが、5~10あたりの彩度がちょうどよくて視認性がよい。
.nightMode img {
filter: invert(100%) saturate(7);
}
▼コードを付け加えて文字が見やすくなった画像の例
おしまい!![照れ](https://stat100.ameba.jp/blog/ucs/img/char/char3/007.png)