If you set a text color in Anki and then switch from light mode to night mode (dark mode), that color sometimes becomes hard to read. The reason is that a color you set in light mode carries over unchanged into night mode (dark mode). Anything you didn't set a color for switches automatically to something readable when the mode changes, but colors you set yourself don't. So if you use night mode (dark mode), you need to set a separate color for it yourself that will still show up there.
Why colors don't change in night mode (dark mode)
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 approach
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 night mode (dark mode) colors 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.
How to edit it directly with CSS
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. If there's anything you'd like to change, feel free to adjust the values
directly.
Which colors work well in night mode (dark mode)
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.
How to give each note type a different background color
Sometimes it's not the text color you want to change but the background itself. If you review a mix of card types — English vocab, subject terminology, general trivia — every card looking exactly the same makes it hard to tell which one you're actually looking at. Leave English cards white, make subject-terminology cards blue, and general-trivia cards red — a difference that clear lets you recognize the card type the instant a card appears.
The how-to is simple. Click an empty area of the card to select the whole card, then pick a color from Background color under Text Style. Stick to light tones: a dark background hurts contrast with the text, making it hard to read. Check the preview as you go to make sure the text still reads clearly against it.
Here's the misconception that trips people up. You might expect "a different color per deck," but that's not how it works — Anki templates apply at the note type level, not the deck level. If you already keep a separate note type per subject, this behaves exactly as expected; but if one note type is shared across several subjects, all of those cards end up the same color. So if you want a different style per subject, you'll need to create a separate note type for each one.
There's something else to note here too —
the background color you just set doesn't survive night
mode. Anki repaints the background dark, and that rule beats the
note type's .card background — the same rule this
article explained above. So if you study mostly at night and still
want your note types to stand apart, either give the card a
night-only background color using the method above,
or skip
the background and distinguish note types with text color or a
divider instead.
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 closely matches the background 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 change colors automatically?
Partly, but not entirely. The overall background color changes, but anything you set yourself 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 How to Thicken the Divider in Anki, which covers color choice as well. To change the card background itself, see Giving each note type its own background color.