How to invoke Minimal Theme's extended colors in inline style attributes?

I’m trying to create custom highlights using the Minimal Theme’s extended colors. I want to use the variables like --red, --orange, etc. in inline style attributes.

<span style="background-color: var(--red); color: var(--text-normal);">Highlighted text</span>

The styles using the theme variables don’t get applied. I don’t want to simply use the colors’ HEX values because I want the colors to change dynamically depending on light/dark mode. Is there a way to make this work? :thinking:

Try var(--color-COLOR) instead. e.g.

<span style="background-color: var(--color-red); color: var(--text-normal);">Highlighted text</span>

<span style="background-color: var(--color-purple); color: var(--text-normal);">Highlighted text</span>

<span style="background-color: var(--color-pink); color: var(--text-normal);">Highlighted text</span>

From Minimal’s theme.css:

1 Like

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