Skip to main content

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; }

Token reference

Loading tokens…