Changing Front Text Colors on Status (New, Learning, Review)

[ar.vxv]

Hi!
I want to change the Text color of the front card based on its status (New, Learning, Review). I have tried editing the CSS and Front HTML with AI but haven’t been successful. Thank you for any help!

<div class="card">
    <div>{{Verb}}</div>
</div>

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
   }

.card.new div {
    color: blue !important;
}

.card.learning div {
    color: green !important;
}

.card.review div {
    color: coral !important;
}

[Danika_Dakika]

Allow CSS styling based on card state

I’m just going to list what I’ve learned from reading the above: The “Custom scheduling” javascript is a monkey patch, while it runs the states object exists, but states is not accessible from the normal card design. If we want to expose states, it can be injected directly into the HTML. (shown later) I’m assuming states is not exposed on purpose to avoid API surface increase. Custom scheduling: // expose states e = document.createElement("script") e.text='var states='+JSON.stringify(states)…

[ar.vxv]

Thank you for your guidance. Although I’m not sure where to start, at least the AI can guide me through the rest. Here’s the modified code for anyone with similar needs.
Custom scheduling:

// expose states
e = document.createElement("script")
e.text = 'var states=' + JSON.stringify(states)
document.body.appendChild(e)

// add ankiState_* to body class, e.g. ankiState_new
ankiState = Object.keys(states.current.normal).shift()
document.body.classList.add('ankiState_' + ankiState)

// Add classes for review and learning states
if (states.current.review) {
  document.body.classList.add('ankiState_review')
}
if (states.current.learning) {
  document.body.classList.add('ankiState_learning')
}

CSS:

body.ankiState_new .notifier {
  color: cyan;
  font-size: 20px;
  white-space: pre;
}

body.ankiState_learning .notifier {
  color: coral;
  font-size: 20px;
  white-space: pre;
}

body.ankiState_review .notifier {
  color: #55ff00;
  font-size: 20px;
  white-space: pre;
}