Changing Font Color for Dark Mode

Anki Card Design
1

Hi. I know there have been topics on this before and I’m aware of the manual as well, but I cannot figure out a way to change the font color when using Dark Mode. I am using a shared deck that has its own formatting, so I don’t know if that is messing things up. For the deck, I’ll share the styling in case anyone can let me know what I need to add/remove in order for the text to be white while in Dark Mode. Thanks.

.card {
  font-family:palatino;
  font-size:4.5vw;
  text-align:center;
  color:black;
  background-color:lightgray;
}

div.front {
  height:21vmax;
  position:relative;
}

.greek {
  position:absolute;
  top:5vh;
  left:50%;
  transform:translateX(-50%);
  text-align: center;
  color:darkblue;
  font-size: 5.5vw;
  margin-right: -20%;
}

.label {
  font-family:monospace;
  text-align:right;
  vertical-align:top;
  font-size:4vw;
  line-height:1.5;
  width:12vw;
  color:black;
}

.labeledDef {
  text-align:left;
  vertical-align:top;
  font-size:5vw;
}

.definition {
  position:relative;
  height:20vmax;
  font-size:5vw;
  text-align:center;
  color:darkblue;
}

.info {
 font-family:sans-serif;
 font-size:4vw;
 color:black;
}

.datum {
 color: darkblue;
 font-family: sans-serif;
}

.scripture {
  text-align:left;
}

.art {
  color:black;
}

.contrast {
  width: 100%;
  position:relative;
  top:10vh;
  text-align: center;
  color:darkblue;
  border-collapse:separate;
  border-spacing:0 10px;
}

td.con {
  width: 45%;
  border: 1px solid black;
  border-bottom:none;
  padding:5px;
}

hr {
 border: 1px solid black;
}

a {
  color: black;
}
2

Wherever there is color or background, it needs to be changed:

.card {
  --font-color: black;
  --bg-color: lightgray;
  --blue-color: darkblue;
  
  font-family: palatino;
  font-size: 4.5vw;
  text-align: center;
  color: var(--font-color);  
  background-color: var(--bg-color);
}
.card.nightMode {
  --font-color: white;
  --bg-color: black;
  --blue-color: lightblue;
}


div.front {
  height: 21vmax;
  position: relative;
}

.greek {
  position: absolute;
  top: 5vh;
  left: 50%;
  transform:translateX(-50%);
  text-align: center;
  color: var(--blue-color);
  font-size: 5.5vw;
  margin-right: -20%;
}
.nightMode .greek {
	color: var(--blue-color);
}


.label {
  font-family: monospace;
  text-align: right;
  vertical-align: top;
  font-size: 4vw;
  line-height: 1.5;
  width: 12vw;
  color: var(--font-color);
}
.nightMode .label {
	color: var(--font-color);
}

.labeledDef {
  text-align: left;
  vertical-align: top;
  font-size: 5vw;
}

.definition {
  position: relative;
  height: 20vmax;
  font-size: 5vw;
  text-align: center;
  color: var(--blue-color);
}
.nightMode .definition {
	color: var(--blue-color);
}

.info {
 font-family: sans-serif;
 font-size: 4vw;
 color: var(--font-color);
}
.nightMode .info {
	color: var(--font-color);
}

.datum {
 color: var(--blue-color);
 font-family: sans-serif;
}
.nightMode .datum {
	color: var(--blue-color);
}

.scripture {
  text-align: left;
}

.art {
  color: var(--font-color);
}
.nightMode .art {
	color: var(--font-color);
}

.contrast {
  width: 100%;
  position: relative;
  top: 10vh;
  text-align: center;
  color: var(--blue-color);
  border-collapse: separate;
  border-spacing: 0 10px;
}
.nightMode .contrast {
	color: var(--blue-color);
}

td.con {
  width: 45%;
  border: 1px solid black;
  border-bottom: none;
  padding: 5px;
}

hr {
 border: 1px solid black;
}

I finally decided to use variables here, so you can delete this block wherever “.nightMode” appears. I just left it in case you change your mind and want a separate, distinguishable color for dark mode specifically for this class.

3

Thank you for this. That’s super helpful. So if I want the Dark Mode color to be white, do I simply change

.card.nightMode { --font-color: white; --bg-color: black; --blue-color: lightblue;

to

.card.nightMode {
--font-color: white;
--bg-color: black;
--blue-color: white;

? Basically, I’m trying to make it as easy to see in daylight settings when using Dark Mode, so I figured white would be the best.

4

Try it and you’ll understand. And yes, you need to change the variables, and you’re right that white on black has the highest contrast. But sometimes I use yellow and red on black, sometimes even an entire black background, or I can use a yellow background for a specific word, and the font color will always be black. I have publicly available decks where you can see this: https://ankiweb.net/shared/info/115901085

5

Great. Thanks so much for your help!