Ankiで画像をダークモードにする方法

 

 画像のダークモードを実現させるには

 結論から言えば、CSSのfilter機能を用いればよい。これを使えば、画像の色を白黒反転させて、画像のダークモードを擬似的に再現できる。特に、テキストが主体の画像の場合に有効である。

 たとえば、Ankiでダークモードを使用すると画像の背景は白色のままだが...

 

CSSのfilterを用いれば、以下のように画像のダークモードが実現可能となる。

 

 コード配布

CSS(このコードをコピーしてAnkiの「書式（スタイル）」欄に張り付けると、画像のダークモードが実現できる)

.nightMode img {
    filter: invert(100%);
}

 

　ここまでが画像のダークモード化に関する記事である。以下では、さらにこのダークモードを快適にする小ネタを2つ紹介する。

 

 小ネタ1　一部の画像にだけダークモードを適用しないようにする方法 (2024/04/27加筆)

 イラストや風景写真など、ダークモードを適用したくない画像が一部存在する場合は、その画像のコードを

<img src="〇〇.jpg">

から

<img src="〇〇.jpg" style="filter: none;">

のように変更すればよい。このようにすれば、テキスト主体の画像はダークモードにしつつも、イラストや風景画像は通常の外観を維持できる。

 

 小ネタ2　テキストの文字色が薄い場合の対処法 (2024/05/19加筆)

　スキャンした画像（自炊した書籍など）をダークモードにすると、そこに書かれている赤色や青色の文字が見えにくくなる場合がある。この場合も、saturateというCSSの機能を使って画像の彩度を上げてやれば解決する。

　具体的には、「コード配布」にあるコードに、saturate(7)を付け加えて以下のようにする。(7)という数字の部分は好みに合わせて変更してよいが、5～10あたりの彩度がちょうどよくて視認性がよい。

.nightMode img {

filter: invert(100%) saturate(7);

}

 

▼コードを付け加えて文字が見やすくなった画像の例

 

 

おしまい！照れ