The short answer: give those elements a separate night-only color. Anki's night mode darkens the card background and the default text color, but it leaves any color you set yourself alone. So the blue answer text or the dark-gray note you picked while looking at a white background stays exactly as it was — and disappears into the dark. Anki does not invert your colors, and that is deliberate.
Why the background darkens but your colors don't
When night mode is on, Anki marks the card with nightMode and overrides
that card's background and default text color with its dark theme. That is why the
default note type still turns dark even though its template says
background-color: white.
But that override only applies to the card as a whole. A color you set
on an element inside the card — say .answer painted blue, or the
.cloze highlight — is a more specific instruction than the card-wide one, so
it wins. CSS always follows the more specific instruction.
In practice that shows up as:
- the background darkens fine, but the blue answer text sinks into it
- light-gray examples or footnotes become nearly invisible
- a highlighter-style background is painfully bright
Nothing is broken. Anki handles the card as a whole; the individual colors are yours to set.
Anki's own default template already does this
Open the styling of the Cloze note type that ships with Anki and you will find these two lines:
.cloze { color: blue; }
.nightMode .cloze { color: lightblue; }
The first is the everyday color; the second applies only in night mode. Blue sinks into a dark background, so it is swapped for a light blue. This is the pattern Anki's own developers ship in the default template, and it is exactly what we do: for each element that carries a color, add one more color for night.
How to set it in ankieditor
You can build it by clicking — no CSS required.
- Import your template, then tick [Night Mode] above the preview. The card switches to the way it looks in Anki's night mode.
- With night mode on, click the part that's hard to read. Click empty space to target the whole card.
- Pick a color under Text Color or Background Color on the left. That color applies only in night mode — your everyday color stays as it is.
- To undo, press [Clear night colors for this target] below the color pickers. Only the night color is removed; the everyday color survives.
- When you're done, press [Copy Code] and paste the template back into Anki.
While night mode is on you can only change colors. Font, size, alignment and line height are dimmed and locked. Those have no reason to differ between day and night, and pinning them separately for night means that later, when you change the everyday size, night mode would silently keep the old one. Turn night mode off to change them, and they apply to both.
The CSS this produces
ankieditor writes rules like these into your template's styling:
.card.nightMode { background-color: #2f2f31; }
.nightMode .answer { color: #7fb2ff; }
The whole card is .card.nightMode; an element inside the card is
.nightMode followed by that element. These are the two forms the Anki manual
documents, and the desktop app, AnkiDroid and AnkiMobile all use the same marker, so they
work on every device. If you'd rather type it yourself, paste these lines straight into
your styling.
Which colors to pick
On a dark background, move to a lighter shade of the same hue. Changing the hue itself alters the character of the card and reads as a different card.
- Blue → light blue (
#1e6fd9→#7fb2ff) — the most common pairing for answers and cloze highlights. - Red → salmon or soft pink (
#c0392b→#ff9b8a) — for warnings and incorrect-answer markers. - Dark gray → light gray (
#666666→#aaaaaa) — for examples and sources that should sit below the main text. - Highlighter background → dark background with light text — a yellow background with black text is glaring at night. Drop the background to a deep amber and lighten the text instead.
Avoid pure white (#ffffff). Maximum contrast on a dark background makes text
look like it's blooming, which is tiring over a long review session. A very light gray
(around #e8e8e8) is easier on the eyes.
Things to watch out for
The dark background differs slightly by device. Anki deliberately does not pin the night background in the template; each client picks its own. Desktop and mobile can differ subtly, so a color that hugs the background — a dark gray text barely lighter than the backdrop — may only work on one of them. Leave yourself margin.
Divider colors stay the same at night. A color on a divider is an element-level color, so night mode never touches it. If you picked a very light gray line, it vanishes on a dark background. Give the divider a night color too, or pick a mid-tone from the start.
Each note type is separate. Styling is stored per note type, so if you use several, each one needs its own night colors.
Frequently asked questions
Doesn't Anki night mode invert colors automatically?
It doesn't. It changes the card background and the default text color to its dark theme and leaves any color set in your template alone. Automatic inversion would wreck colors you chose on purpose, so it works this way deliberately. Individual colors need their own night version.
Will a color I pick in night mode change my everyday color too?
No. Night colors are written as separate rules that apply only in night mode. Your everyday color stays intact, and turning night mode off in ankieditor shows you the original right away.
I didn't change the background, but my card is still white.
Your template most likely already sets a night-specific background. With night mode on, click empty space on the card and press [Clear night colors for this target] to return to Anki's default night background.
For dividers that disappear at night, see Thicken the Divider When Front and Back Blur Together, which covers color choice as well. To change the card background itself, see Give Each Note Type Its Own Card Background Color.