Is it possible to have two colors category of text for the normal mode and dark mode?

Anki Help
1

Hi,

I turn on dark mode and like it to use than normal mode, but all colors I customized for text fields in the decks, appear different than I defined, in this way some of them can’t be seen and read correctly and if I want to keep dark mode, studying would be difficult and bother eyes and seems there’s no way and I should change the customized colors values from scratch for text fields to be suitable with dark mode, and if I want to return to normal mode in future, then I have to bring back my current color values to body text. Is there an add-on to fix this issue and give us to have two color categories for normal mode and dark mode without changing color values? Couldn’t find any add-on for my purpose. I consider coloring text to be appropriate for both modes is better, but it’s difficult to find colors to match for both modes that look nice and read easily.

Thanks.

normal mode
normal mode1386×689 107 KB

desktop version
desktop version1466×697 95.2 KB

2

You can use CSS to customize your cards depending on mode:

2 Likes
3

I found this example most useful. Using black, gray, blue in daytime mode and white, pink, yellow for nighttime.

In CSS put:

.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
.card {
–text-color1: black;
–text-color2: gray;
–text-color3: blue
}

.card.night_mode {
–text-color1: white;
–text-color2: pink;
–text-color3: yellow
}

.black_white {
color: var(–text-color1);
}
.gray_pink {
color: var(–text-color2);
}
.blue_yellow {
color: var(–text-color3);
}

Then in the card put something like the following replacing Fieldname-n with the names of your fields to display:
<div style=‘font-family: Arial; font-size: 20px;’>
<div class=“blue_yellow”>{{Fieldname-1}}</div><br>

<div style=‘font-family: Arial; font-size: 20px;’>
<div class=“black_white”>{{Fieldname-2}}</div><br>

<div style=‘font-family: Arial; font-size: 20px;’>
<div class=“gray_pink”>{{Fieldname-3}}</div>

3 Likes
4

Hi

Sorry for the late response, Where is the CSS section?! Do you mean the “Styling” window under the “Card” button of a deck?

5

Yes, it’s the styling section.