How Should Default CSS Variables in Lightweight Templates Be Updated?

For example, should variables like --pn-font-family be redefined in :root, or added as styles in the CSS?

Today: Override the variable directly inside the widget's root selector in the widget's CSS tab. There is no central theme configuration yet, so each widget manages its own variable overrides.

Coming in Q3: A theme configuration application will be added to the publisher dashboard. It will let you manage themes and CSS variables centrally, without editing individual widget CSS. Until then, use the approach described below.

How to Override a CSS Variable Today

To change a default variable for a specific widget, override it inside the widget's root selector and then apply it with the matching CSS property. For example, to change the font family to "Roboto Mono" on an Offer widget:

The widget's default CSS:

.pn-offer {
  background-color: var(--pn-color-bg-main);
}

After overriding --pn-font-family:

.pn-offer {
  --pn-font-family: "Roboto Mono";
  font-family: var(--pn-font-family);
  background-color: var(--pn-color-bg-main);
}

Two changes are happening here:

The variable --pn-font-family is redefined inside .pn-offer, scoped to this widget only.
The font-family property is set to read from the variable, so the override actually takes effect.

Key Points

Override the variable inside the widget's root class (e.g., .pn-offer), not in :root. This keeps the change scoped to the specific widget and prevents unintended side effects on other widgets.
Redefining the variable alone is not enough — you also need to apply it using the corresponding CSS property (e.g., font-family: var(--pn-font-family)) if it isn't already used by the widget's default styles for the property you want to change.
This approach is the recommended method until the theme configuration application is released. Once available, it will offer a cleaner, centralized way to manage these variables across widgets.

Last updated: June 26, 2026