Branding & skins

Out of the box, SharePoint Forms365 forms follow SharePoint's theme. Three levers let you go further:

1. Theme tokens (per workspace)

Open Workspace settings → Branding. Override the global token set:

• Primary, accent colour for buttons, links, the orange bar on focus
• Surface, background colour of the form card
• Text / Muted, body and secondary text
• Border / Radius, control aesthetic between flat and soft

Tokens become CSS custom properties at the form root and propagate everywhere.

2. Per-form skins (custom CSS)

Sometimes a workspace-wide theme isn't enough, a customer-facing form needs its own colours. In the designer, open the Theme panel and choose Custom CSS.

Drop in a stylesheet scoped to the form:

.f365-form {
  background: #f5f0e8;
}
.f365-form h1 {
  font-family: 'Georgia', serif;
}
.f365-form button[type='submit'] {
  background: #2d6cdf;
  border-radius: 999px;
}

The runtime applies the stylesheet only when this form renders, no risk of bleed across other forms.

3. Logo and header

Each form can have a header image / logo via the property panel's Header slot. Drop in an image (PNG, SVG, JPG); it renders at the top of the form on every page.

Dark mode

SharePoint Forms365 respects the user's prefers-color-scheme. The default token set has a paired dark palette; custom CSS can override with @media (prefers-color-scheme: dark) { ... }.

Brand assets that travel with the form

Logos and other static images uploaded via the designer are stored in the site's Site Assets library. Cross-environment promotion (dev → test → prod) carries the URLs but not the files, you'll need to re-upload assets in the target environment.

Related

• f365.theme, reading tokens at runtime