Allow CSS styling based on card state

In the same way the nightMode css class is added to element when night mode is set, and win/mac/linux/mobile/etc css class is added dependent on the platform, it would be nice to have some kind of new/learning/relearning/etc css class added if the card is in any of those states.

Alternatively, a better solution might be to allow this indirectly by adding a {{State}} special field which evaluates to the card state (say New/Learning/Relearning/etc) and using it as a css class like <div class="{{State}}> within the card html editor.

I’m not overly familiar with the Anki codebase, but I assume this would be a relatively easy feature to implement and with very little maintenance cost.

An example use case: when using the “Mix new cards and reviews” option and going through a deck whose contents you haven’t seen before, it can be helpful to get an instant visual cue that the you’re seeing a new card for the first time, say by changing the background color of the card. This is helpful especially to those who intentionally hide the new/learning/relearning counts at the bottom.

Edit: If this feature seems compatible with the Anki project goals but is low-priority, I’d also appreciate confirmation of this as I may try to implement it myself and submit a pull request. Any tips as to how to implement it to someone currently unfamiliar with the Anki codebase would be helpful as well.

You could probably already accomplish this with The 2021 scheduler - Frequently Asked Questions