Providing per-Document styles

The CSS custom properties technique

Code you write in the CSS tab cannot call variables provides in the Document payload. That said, you can use CSS custom properties (a.k.a CSS variables) to pass variables to your CSS.

Let's say you want to pass a color in your data:

JSON payload

{
  "color": "#db2777"
}

You can create a custom property that will take its value and make it available to your CSS.

HTML

<style>
  :root {
    --color: {{color}};
  }
</style>

CSS

h1 {
  color: var(--color);
}