Custom CSS variable works in browser DevTools, but Themler preview ignores it (var() fallback not applied)

Hi, I tried adding a small custom CSS snippet to Themler:

:root {
  --hero-accent: #ff437a;
}


.hero-title {
  color: var(--hero-accent, #ff00ff);
}

In browser DevTools (Chrome + Firefox) the color shows correctly.

However, inside Themler’s preview, the color appears as black, indicating that neither the variable nor its fallback is being read.
There are no console warnings, and if I hard-code color:#ff437a; it works instantly.

It feels like Themler’s preview CSS parser is dropping the var() syntax entirely.

Is there somewhere in Themler where CSS variables need to be enabled, or a specific compatibility mode toggle?
Or does Themler’s live renderer only support static values and not var()/fallback syntax?

Any idea which file controls the CSS parser for the editor canvas?
Thanks!
Skyler, Pips NYT developer!

Last edited 01 November 2025 by pipsnyt2