Howto: fix illegible cloze colour in dark-mode Anki (black mode in AnkiDroid)

    •    

I use Anki to memorize quotes and learn poetry. Built-in support for “cloze tests” is perfect for this. It hides part of the text to check how easily I can recall it.

Most of the time, I study on my phone which features an OLED screen. These are capable of displaying perfect black, so I use “black mode” in AnkiDroid (version of Anki for Android). Unfortunately, clozes are downright unreadable in “black mode”:

White text on black background saying: "Plans are nothing; planning is everything. — Dwight D. Eisenhower, 34th president of USA". The word "nothing" is highlighted in dark blue, which is extremely hard to read on a black background

“Dark mode” is only marginally better:

The same quote, this time as white text on dark-grey background. The word "nothing" is still highlighted in dark blue, which is somewhat readable on this background but not comfortably so

Judging by responses from the developer, this is not a bug. Indeed, each card type has its own styles for its cards. As far as I understand, the style is filled in when the card type is created, and from there on, it can only be updated manually. Any type created before Anki introduced “night mode” will have the contrast problem shown above.

Luckily, this is easy enough to fix, if only a bit tedious. All one has to do is go through all the card types and edit their .cloze styles. Here are the specific steps, both for desktop Anki and mobile AnkiDroid.

What to do in desktop Anki

  1. Open Anki.

  2. Go to Tools → Manage Note Types, or press Ctrl+Shift+N.

Anki dialog with a list of note types and various buttons to edit them

  1. For each type, select it in the list on the left and press Cards.

  2. In the dialog that opens, choose Styling radio button on the left, and scroll the styles to find .cloze.

    If there is no such style, simply exit the dialog and continue to other note types.

Anki dialog with settings for a particular card type

  1. When you find .cloze style, add a more specific version that’s only active in dark/black modes, like so:

    .cloze {
     font-weight: bold;
     color: blue;
    }
    
    .nightMode .cloze {
     color: lightblue;
    }

    lightblue can be any color supported by CSS. Don’t be afraid to experiment! The preview on the right shows the results you’re getting. You can reveal the cloze by clicking Back Preview radio button, and hide it again by clicking Front Preview.

  2. Once you’ve got the desired colour, click Save and move on to the next type.

What to do in AnkiDroid (Anki for Android)

  1. Fire up AnkiDroid.

  2. Tap the three vertical dots in the top right and choose Manage note types.

AnkiDroid dialog with a list of note types

  1. For each type, tap Edit cards.

  2. In the dialog that opens, choose Styling at the bottom right and scroll the styles to find .cloze.

    If there is no such style, simply exit the dialog and continue to other note types.

Anki dialog with settings for a particular card type

  1. When you find .cloze style, add a more specific version that’s only active in dark/black modes, like so:

    .cloze {
     font-weight: bold;
     color: blue;
    }
    
    .nightMode .cloze {
     color: lightblue;
    }

    lightblue can be any color supported by CSS. Don’t be afraid to experiment! Tap the “eye” icon at the top right to preview how it’ll look.

  2. Once you’ve got the desired colour, tap the checkmark button to save and move on to the next type.

Your thoughts are welcome by email
(here’s why my blog doesn’t have a comments form)