Change of Card Background Colour remains after card is actioned

Anki Card Design
1

Hi all,

I am using Anki for language learning. As part of it, I have a script set-up to change the background colour of the back of a card if the card is a gendered noun.
The styling is set-up to have a white background unless changed by the script.

The script is:
<script>
var g = document.getElementById(“gender”).textContent;
var bg = document.querySelector(“.card”);
if (g == “m”) {
bg.style.backgroundColor = “#96C4E4”;
} else if (g == “f”) {
bg.style.backgroundColor = “#DC9097”;
} else if (g == “t”) {
bg.style.backgroundColor = “#f7d3bb”;
}else if (g == “c”) {
bg.style.backgroundColor = “#c8bfe7”;
}else if (g == “p”) {
bg.style.backgroundColor = “#915f64”;
}
</script>

For example, for a masculine noun Front->Back Card.
Front Card: White Background
Back Card: Blue Background

The issue I am having, is that when I action the card (Again, Good, etc.), the background of the next card remains blue.

This only does not happen if it gives me a Back->Front card with that script enabled to change to a different colour.

I want it to turn back to the original white background once the next card appears.

This issue occurs both when working on the cards, and when flipping between “front preview” and “back preview” when editing the card - so it appears to be something built into Anki causing this problem.

Is there a simple script line I can put onto the front of the card to force Anki to return the card to the white background?

I have tried using a <divstyle="card"></div> to wrap around the front template, but then it causes only a rectangular section of the card to return to white - enough to encompas the whole “card” - but the remainder of the screen background remains to that changed colour.

I do not have this issue on AnkiDroid, only with Anki desktop.

Many thanks for any help you can provide!

2

No AnkiDroid, geralmente há recarga completa do WebView entre os cartões, por isso você não percebe o mesmo efeito lá.

No seu caso, se o verso de um cartão deixa o fundo azul, o próximo cartão só volta a fundo branco se algum código ou estilo no próximo cartão o obrigar a fazer isso.

:white_check_mark: Como corrigir

Sim, há uma solução simples:

→ Basta forçar o fundo branco no modelo da frente.

No seu template Front, coloque este pequeno script:

html

CopiarEditar

<script>
document.querySelector(".card").style.backgroundColor = "white";
</script>

Ou, se preferir CSS puro (ainda melhor, se não for sobrescrito depois):

No seu template Front (dentro de <style> ou no campo “Styling”), adicione:

css

CopiarEditar

.card {
    background-color: white !important;
}

Contudo, seu próprio script no verso sobrescreve isso quando necessário, então tudo funciona bem.

:check_mark: Implementação prática

Método 1 — CSS no modelo Front

Styling (CSS)

Coloque no topo do seu CSS (antes dos outros estilos):

css

CopiarEditar

.card {
    background-color: white !important;
}

Método 2 — Script no Front

Se preferir JS, adicione isto apenas no Front Template:

html

CopiarEditar

<script>
document.querySelector(".card").style.backgroundColor = "white";
</script>

Melhor prática

A maneira mais limpa é o CSS, pois evita piscadas visuais ao alternar entre cartões e não depende de execução de script. Assim, recomendo fortemente usar o CSS no Front Template.

:warning: Importante

  • Não use aspas “inteligentes” (aspas curvas) no JavaScript, use aspas normais (" " ou ' ').
  • O seletor .card funciona se seu cartão tiver <div class="card">. Caso esteja usando outro contêiner, ajuste o seletor.

:white_check_mark: Exemplo final (CSS)

No campo Styling do Anki, deixe assim:

css

CopiarEditar

.card {
    background-color: white;
    /* outros estilos que já existam */
}

E mantenha o seu script no verso. Assim, toda vez que um cartão Front for mostrado, ele garante o fundo branco, eliminando a “herança” da cor anterior.

Solução recomendada

→ Use este CSS no seu Styling:

css

CopiarEditar

.card {
    background-color: white !important;
}
3

Thank you!

I had the styling already set to
.card
background colour:
etc. as per solution 1

But the code you gave me in solution 2 - the document.querySelector - worked perfectly!

Thank you very much for your quick response, it is greatly appreciated!

Obrigado!

2 Likes