PartGrid.ai
Documentation menu

Embed theming

Control embed styling with assigned themes and runtime CSS variables so each published viewer can match the right brand context.

Why it matters

PartGrid embeds are often deployed across different storefronts, dealer portals, and regional experiences. The theming model lets teams assign branding once and have the embed apply the right runtime styling automatically, instead of maintaining one-off CSS overrides for every implementation.

Assignment model

Theme assignment is managed in PartGrid, then resolved when the public embed loads. That keeps branding decisions with the catalog or implementation owner while giving developers a stable rendering contract.

  • Assign a theme directly to a schematic when a single published diagram needs a distinct look.
  • Assign a theme to a collection when several related schematics should share a visual system.
  • Use the company default when no more specific theme assignment is present.

Runtime contract

Public customization endpoints return both theme tokens and an embed runtime object. The preferred contract for the frontend is embed_runtime.cssVariables, which exposes canonical --pf-* variables for the viewer surface.

Name
theme_tokens
Type
object
Description
Resolved theme token payload returned by the public customization API.
Name
embed_runtime.cssVariables
Type
object
Description
Canonical runtime CSS variables applied by the embed renderer.
Name
--pf-*
Type
CSS custom properties
Description
Viewer variables used across panels, controls, hotspots, cards, and quote or cart surfaces.
json
{
  "theme_tokens": {},
  "embed_runtime": {
    "cssVariables": {
      "--pf-primary": "#6C5DD3"
    }
  }
}

What updates automatically

When a valid theme assignment is returned, the embed runtime can style the main viewer surfaces consistently without requiring storefront-specific CSS patches.

  • Viewer panels and surrounding chrome
  • Buttons, controls, and interaction states
  • Hotspots and diagram selection accents
  • Part cards, list surfaces, and supporting UI treatments
  • Quote and cart-oriented interaction surfaces exposed by the embed

Implementation notes

Start with the embed guide for iframe setup, then use this theming contract when you need branding control across multiple embeds or channels. If you are building a custom integration layer, the relevant public customization endpoints are documented in the API reference.

Testing

Validate the public embed in the target storefront or portal context to catch spacing or container issues.

  • Confirm the schematic or collection is public before validating runtime styling.
  • Verify the expected theme assignment level: schematic, collection, or company default.
  • Inspect the customization response and confirm embed_runtime.cssVariables is present.
  • Test the same embed in the target storefront or portal context to catch spacing or container issues.
Embed theming | PartGrid documentation