Theme & design variables

Igloo 17 themes the front end with CSS custom properties (variables) that are generated from your Design nodes — not from a single hand-edited theme file. Each Design produces a set of scoped classes, and blocks pick up the right values from the palette they're assigned.

v13 → v17 change

There is no ig-theme.css template with {themeColor} placeholders, and no global --theme / --grid-width variables. v17 supports multiple palettes and button variants per Design, output as scoped classes (.design-{key}, .palette-{key}, .variant-btn-{key}).

How it's generated

When a Design is saved, Igloo writes App_Plugins/Igloo/dist/css/igloo-variants.css. For every Design it emits:

• .design-{key} — spacing and typography variables for that design.
• .palette-{key} — colour variables for each palette, plus background-color / color.
• .variant-btn-{key} — colour/border variables for each button style.

The active design class is applied high up the page, and each block is given its palette class by <igloo-block-wrap> (e.g. class="component palette-3f2a…"). Because the values are CSS variables, a block automatically restyles when an editor picks a different palette.

/*! Auto-generated design variant styles */
@layer base {
  .design-7d3f… {
    --container-width: 1300px;
    --grid-spacing: 32px;
    --font-size-h1: 2.5rem;
    /* …spacing & typography… */
  }

  .palette-00ddb4f9… {
    --palette-background-color: #ffffff;
    --palette-text-color: #444444;
    /* …palette colours… */
    background-color: var(--palette-background-color);
    color: var(--palette-text-color);
  }

  .variant-btn-60712a52… {
    --variant-button-background-color: #3aa5ed;
    --variant-button-text-color: #ffffff;
    /* …button colours… */
  }
}

Design variables — spacing

Set on .design-{key}.

Variable	Default	From (Design field)
--container-width	1300px	Container Width
--container-width-small	850px	Container Width Small
--container-width-big	1600px	Container Width Big
--section-spacing	30px mobile / 80px from 1024px	Section Top/Bottom Padding
--grid-spacing	16px mobile / 32px from 1024px	Grid Padding (--grid-spacing-half is derived)
--component-spacing	16px	Component Padding
--logo-padding	12px mobile / 16px from 1024px	Logo Padding

Design variables — typography

Variable	Default
--body-font	"Roboto", sans-serif
--body-font-weight	normal
--body-line-height	1.6
--font-size	1rem
--font-size-small	0.75rem
--font-size-big	1.25rem
--heading-font	"Roboto", sans-serif
--heading-font-weight	bold
--heading-line-height	1.5
--font-size-h1 … --font-size-h6	2.5rem … 1rem
--hero-heading-font-size	3.75rem
--hero-heading-font-size-mobile	2rem

Palette variables

Set on .palette-{key}. Colours marked (+ variants) also emit -darken, -lighten and -rgb versions; (+ rgb) also emit an -rgb version.

Variable	Notes
--palette-background-color	+ variants
--palette-text-color
--palette-heading-color
--palette-secondary-heading-color
--palette-link-color / --palette-link-color-hover
--palette-border-color
--palette-icon-color
--palette-highlight-background-color	+ variants
--palette-highlight-text-color
--palette-highlight-icon-color	+ variants
--palette-error-color	+ rgb
--palette-success-color	+ rgb

Button variant variables

Set on .variant-btn-{key} — see Buttons.

Variable
--variant-button-background-color / -hover
--variant-button-text-color / -hover
--variant-button-border-color / -hover
--variant-button-border-radius (only when set)

Using the variables

Reference these variables in your own block CSS (e.g. color: var(--palette-text-color)) so custom markup inherits whatever palette the editor selects, exactly like the built-in blocks.