GravityView Theme: CSS Design Tokens

Every visual aspect of a GravityView 3.0 View is controlled by a --gv-* CSS custom property (design token). Override them to theme your Views without touching GravityView's stylesheet.

How theming works

Tokens are scoped to .gv-themed, which GravityView stamps on each opted-in View container, so only themed Views are restyled.
Defaults are declared at zero specificity (:where(.gv-themed) inside @layer gravitykit-base), so any unlayered rule on the container or a descendant wins without a specificity war.
Browser floor: @layer requires Chromium 99+, Firefox 97+, Safari 15.4+. @property typing enhances progressively above that.

Override on the container, never on `:root`

Set tokens on the View container (or a descendant selector). Overrides on :root lose to the container-level defaults and silently do nothing.

/* Works: targets a descendant of the themed container. */
body .gv-container { --gv-color-primary: #7a1f1f; }

/* Works: one View by ID. */
.gv-container-123 { --gv-color-primary: #7a1f1f; }

/* Does NOT work: :root loses to the container-level default. */
:root { --gv-color-primary: #7a1f1f; }

Target a View with placeholders

When you enter rules in GravityView's Custom CSS field (View Settings → Custom Code), GravityView swaps three placeholders for that View's own values as the page loads, so you can target a single View without hardcoding its container ID:

Placeholder	Replaced with	Example output
`VIEW_SELECTOR`	A high-specificity CSS selector targeting only this View	`.gv-container.gv-container-123`
`VIEW_ID`	The View's ID number	`123`
`GF_FORM_ID`	The connected Gravity Forms form ID	`5`

Prefer VIEW_SELECTOR for token overrides: its double-class selector (.gv-container.gv-container-123) outranks the layered defaults, so your values win without !important and without pinning the View ID by hand.

/* In GravityView's Custom CSS field. VIEW_SELECTOR resolves to this View. */
VIEW_SELECTOR { --gv-color-primary: #7a1f1f; }

Placeholders resolve only inside a View's Custom CSS/JavaScript field, not in your theme's stylesheet. Developers can add or change them with the gk/gravityview/custom-code/placeholders filter. See Adding Custom CSS to Your Website for the full walkthrough.

Using the tokens as data

The same tokens are published as JSON, in the Design Tokens (DTCG) format, if you want to pull them into Style Dictionary, Terrazzo, Tokens Studio or Figma. See Design Tokens (JSON).

Token reference