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

**URL:** <https://forums.ankiweb.net/t/changing-front-text-colors-on-status-new-learning-review/51832>\
**Category:** Help\
**Created:** [November 12, 2024, 2:24am UTC](https://forums.ankiweb.net/t/changing-front-text-colors-on-status-new-learning-review/51832 "2024-11-12T02:24:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ar.vxv](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/ar.vxv/32/21902_2.png) [@ar.vxv](https://forums.ankiweb.net/u/ar.vxv)\
**Post date:** [November 12, 2024, 2:24am UTC](https://forums.ankiweb.net/t/changing-front-text-colors-on-status-new-learning-review/51832/1 "2024-11-12T02:24:35Z")

</div>

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!

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

```

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![Danika\_Dakika](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/danika_dakika/32/17815_2.png) [@Danika\_Dakika](https://forums.ankiweb.net/u/Danika_Dakika)\
**Post date:** [November 12, 2024, 4:42am UTC](https://forums.ankiweb.net/t/changing-front-text-colors-on-status-new-learning-review/51832/2 "2024-11-12T04:42:59Z")

</div>

> [@Allow CSS styling based on card state](https://forums.ankiweb.net/t/allow-css-styling-based-on-card-state/13196/4):
>
> 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)…

---

<div class="post-metadata">

**Author:** ![ar.vxv](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/ar.vxv/32/21902_2.png) [@ar.vxv](https://forums.ankiweb.net/u/ar.vxv)\
**Post date:** [November 12, 2024, 7:42am UTC](https://forums.ankiweb.net/t/changing-front-text-colors-on-status-new-learning-review/51832/3 "2024-11-12T07:42:48Z")

</div>

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:

```auto
// 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:

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [December 12, 2024, 7:43am UTC](https://forums.ankiweb.net/t/changing-front-text-colors-on-status-new-learning-review/51832/4 "2024-12-12T07:43:28Z")

</div>

Closed on December 12, 2024, 7:43am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.