how to change colors with css variables in plotly?

Hi, I would like to be able to change colors with css variables so that when other parts of my React code changes that css variable dynamically, it should reflect the change inside of plotly frame as well. (It’s jupyterlab app, so some widgets are React and some are python plotly) How can I achieve something like this? Thanks

# for example it would be great if the following code would work
fig.add_annotation(
    bgcolor="var(--custom-color-var-that-dynamically-changes)",
)

Hi @terlan8892 ,

As far as I knowbgcolor keyword only filled by color and its alias. So you cannot put CSS var in bgcolor, it will lead ValueError.

But it will be another thing if you put CSS styles in text keyword using <span> html tag. For example to change the color of the annotation text.

fig.add_annotation(
    text = "<span style='color: blue;'>Some text annotation </span>",
)

If you have your CSS var, I think you can do something like this

fig.add_annotation(
    text = "<span style='color: var(--blue)'>Some text annotation </span>",
)

Hope this help.