How to change the accent color for specific notes with cssclasses

Custom CSS & Theme Design
1

What I’m trying to do

I saw that by adding a cssclasses property to the YAML header you can apply css snippets on a note by note basis, and I managed to make it work for general text color, but not for text accent color.

Things I have tried

This is my snippet. It correctly modifies the text from orange to yellow based on the yaml property, but the accent color always stays as the one defined in the general body block no matter what (green in this case).

body .special_note {
  --accent-h:0;
  --accent-s:100%;
  --accent-l:50%;
  color: yellow;
}

body {
  --accent-h:100;
  --accent-s:100%;
  --accent-l:50%;
  color: orange;
}
  • Removing the general block doesn’t help, it just goes to the default.
  • Removing the keyword body before .special_note makes absolutely no difference as far as I could tell.
    Is this doable? And if not is there another way of achieving the same effect?
2

Could be something else is over-writing it. You might try adding ‘!Important’ to see if it will overcome that. eg.:
color: yellow !Important;

3

The color field works correctly, the issue is with the accent ones.
Unfortunately adding !important to any of them had no effect.