Variables

The Override Variables tab — the $ icon — gives one element a different value for a
global variable. Because variables are CSS custom properties, the new value flows down to
everything inside that element, and everywhere else on the site keeps the global one.

This is the tab for overriding a variable on an element. Creating variables, organising
them into collections, and binding a control to one are covered in
Variables.

Setting an override

1. Select the element and open the Override Variables tab.
2. Click Add Variable.
3. Pick the variable from the list, then type the value it should have here.

The row then reads back as the declaration it produces — --brand-accent: #16a34a — which
is a useful reminder of what's actually happening: the element gets that custom property
set on itself, and normal CSS inheritance does the rest.

Per-post theming with dynamic data

The value field can take dynamic data — click the database icon beside it and bind the
override to a custom field.

Put that on a template's outer container with an ACF colour field, and every post renders
in its own colour, from one template. This is the only place in the builder where a
variable's value can come from the database.