Theme Builder

Enterprise / Pro add-on

Theme Builder is a visual, point-and-click designer for Modern DFFS form themes. Configure colors, typography, spacing, and component styles through an interface — Theme Builder writes the CSS for you, so you can brand forms without hand-editing Custom CSS.

1. What you can style

Colors — background, text, accents.
Typography — fonts and sizing.
Spacing — padding and layout density.
Buttons — button styles.
Tabs — tab set styling.
Modals — dialog/modal styling.

Changes preview live as you adjust them.

2. Applying a theme

You have two ways to use a theme:

Option	Use when
Save to the form’s Custom CSS	You want to theme this one form. The generated CSS is written directly into the form’s Custom CSS.
Export to a file	You want to reuse the same theme across many forms. Save the theme to a file in a document library, then load it from each form via `@import` in Custom CSS.

Exporting and @import-ing keeps one source of truth: update the theme file and every form that imports it picks up the change.

3. Theme Builder and Enterprise centralization

On Enterprise, you can set a default tenant theme centrally so every form is on-brand by default — and the per-form Theme Builder is hidden to keep branding consistent. See the Reusable Content / centralization material for how the central site governs branding tenant-wide.

4. Worked example — a reusable corporate theme

Open Theme Builder on a form.
Set brand colors, your heading font, and rounded buttons; watch the live preview.
Export to a file in a shared document library (e.g. DFFS_Assets/themes/corporate.css).

In each form that should match, add to Custom CSS:

 @import url("https://contoso.sharepoint.com/sites/ModernDFFS_Central/DFFS_Assets/themes/corporate.css");

To update the brand later, edit the theme once — every importing form updates.

5. Tips

Prefer export + @import over per-form save when more than one form should share a look — it avoids copy-paste drift.
On Enterprise, use the default tenant theme to enforce branding everywhere without touching individual forms.
Theme files referenced via @import are fetched fresh on a new browser session, so brand updates roll out promptly.

6. Using the site’s theme colors in custom HTML & CSS

The colors from the site’s current SharePoint theme are published as CSS variables you can reference directly in any custom HTML section, Custom CSS, or Theme Builder value — so your form follows the site theme instead of relying on hardcoded hex colors.

<div style="color:var(--themePrimary)">Themed heading</div>
<div style="background:rgba(var(--themePrimary-rgb), 0.1)">Subtle themed tint</div>

The full palette is available — themePrimary, themeDark, neutralLight, bodyText, bodyBackground, link, and the rest of the SharePoint theme slots.
For transparent tints, each color also has an -rgb variant for use inside rgba(...) — e.g. var(--themePrimary-rgb).
Every token also has a --dffs- prefixed alias (e.g. var(--dffs-themePrimary)) in case another solution on the page already defines the plain name.
Forms follow the theme automatically, including a live Change the look switch — no need to re-save the form.

See what’s available on a site: open the browser console on a page with a DFFS form and type dffs_themeVars to list every color token and its resolved value.

These variables only fill in where SharePoint hasn’t already themed an element — they never override SharePoint’s own theming.
Writing the CSS by hand instead? The Custom CSS & custom HTML guide covers the same variables plus the field classes, print behavior and where custom CSS can come from — and it applies to every Professional and Enterprise license, with no Theme Builder add-on needed.

Start free trial Feature overview All documentation