DevExtreme font color, toggle based on variable value

Question

I would like to toggle the color of the font in DevExtreme chart.

The configuration example provided in the documentation is

<dxo-font color="black">

This is a hardcoded value, I would like to make it a variable, something like

<dxo-font color="{{lightMode?label-color-lite:label-color-dark}}" size="12" family="Roboto" weight="600">

So based on the value of lightMode, it should get the color from a variable.

I'm defining the color in the stylesheet (.scss) as

$LabelColorLite: #02437c;
$LabelColorDark: #FFFFFF;

:host .label-color-dark {
    color:#FFFFFF;
}

:host .label-color-lite {
    color:#02437c;
}

How to link the dxo-font with the defined scss

Answer 1

Define your color variable in global css file and use them as mentioned below

<dxo-font
      color="{{ lightMode ? $LabelColorLite : $LabelColorDark }}"
      size="12"
      family="Roboto"
      weight="600">

Answer 2

Shouldn't you assign the class property rather than the color? Since you're using the scss class name

Try this:

<dxo-font class="{{ lightMode ? 'label-color-lite' : 'label-color-dark' }}" size="12" family="Roboto" weight="600">