Get the kit

How to apply a custom theme in SharePoint Online

Beyond the built-in colours: how SharePoint theming actually works, how to build an accessible brand palette, and how to apply it across your sites.

SharePoint Online ships with a set of default themes, but matching a real brand - and doing it consistently and accessibly - takes more than picking a colour swatch. This guide explains how theming works under the hood and how to apply a polished, on-brand theme.

How SharePoint theming works

A SharePoint theme is essentially a palette of colour slots - a primary ("theme primary"), a range of darker and lighter shades, plus neutral (grey) and body colours. The UI maps those slots onto buttons, links, navigation, accents and backgrounds. Get the slots right and the whole site updates coherently; get them wrong and you'll see clashing accents or unreadable text.

The native options and their limits

  • Change the look → Theme offers a few presets plus a basic custom option.
  • Tenant admins can upload custom themes via PowerShell, but generating a full, balanced colour ramp by hand is fiddly and error-prone.
  • There's no live preview across real components, and no built-in accessibility check - so contrast problems often ship unnoticed.

Building an accessible brand palette

  1. Start from your three core colours: primary, text and background.
  2. Generate a tint/shade ramp from the primary so hovers and accents feel consistent.
  3. Check contrast ratios - body text should hit WCAG AA (4.5:1); large text and UI 3:1. This is the step most teams skip.
  4. Preview on real surfaces - buttons, links, cards, callouts - not just a colour grid.
  5. Consider a dark variant if your audience uses dark mode.

SharePoint Kit Theme does exactly this from one web part: enter your base colours, it generates the full ramp, previews it live across real SharePoint components, flags AA/AAA contrast, shows a dark-mode version, then applies the theme to your site.

Applying it consistently

The biggest branding failure on intranets is inconsistency - different sites with slightly different looks. Decide your palette once, document the hex values, and apply the same theme everywhere. A theme applied through SharePoint persists in the tenant theme store, so it sticks.

Related

Make SharePoint beautiful

SharePoint Kit gives you custom headers, theming, a modern staff directory and a multi-calendar view - installed on your tenant in minutes. 14-day free trial.