Change text color to all white for every card in the deck using Find and replace

[jonny18]

Hi, I wanted to use find and replace to change the text colour of every card in a deck to white (from black) using find and replace, but I do not know how to do so. I would appreciate it if anyone could tell me what I should input in to complete this change.

[dae]

If you click the <> icon at the top right of a field, it will show you the hidden formatting. Generally you’ll want to replace ‘color: …’ with nothing, to remove the explicit formatting.

[jonny18]

Thanks for the advice, I have been able to do that. However I can only do this for one card at a time and I have to do it manually, is there a way to apply the change of text color to the whole deck rather then changing the colour to white one card at a time.

[dae]

If you’ve identified multiple cards that have the same hidden styling, you can use find&replace to modify the cards in bulk.

[r.j.appleton]

Could you not use css for this?

For example if you have a common css stylesheet _common.css :

:root {
    /* these colours are only an example */
    --base03:   black;
    --base01:   white;
    --base1:     black;
    --base3:     white;
    
    --foreground-color: var(--base1);
    --background-color: var(--base3);
}

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: var(--foreground-color);
    background-color: var(--background-color);
}


.card.night_mode {
    --foreground-color: var(--base01);
    --background-color: var(--base03);

    color: var(--foreground-color);
    background-color: var(--background-color);
}

then on each card import the style sheet in the styling section

@import url("_common.css");

Using css variables will swap the colours according to the night mode selection, and if you ever need to change text colours in the future there is only 1 place that needs editing.

In addition, if you use different colours for fixed semantic purposes within your cards I’d recommend using a css class in the card design and defining the colours and font for the text in this common css file, eg

in the card:

<span class="grammar">{{grammar}}</span>

and in the css file:

.grammar {
    color: var(--cyan);
}

[dae]

My guess is the styling has come from copying&pasting content, and was not manually added.