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
1
{
2
"color": "#db2777"
3
}
Copied!
You can create a custom property that will take its value and make it available to your CSS.
HTML
1
<style>
2
:root {
3
--color: {{color}};
4
}
5
</style>
Copied!
CSS
1
h1 {
2
color: var(--color);
3
}
Copied!
Last modified 3mo ago
Copy link