Choose a site theme

A theme is the look of your whole public site: six colours, two fonts, corners, buttons and the header layout. Changes save to the draft and go live when you publish.

Set your themeCopy Anchor Link

1. In the site editor, open Site theme. You need site.manage.
2. Pick one of the ten built-in themes. Night green is the starting theme. Picking one fills in everything below.
3. Adjust what you like:
   • Colours: six #rrggbb values. Dark, Light, High contrast and Warm fill all six as a starting palette.
   • Heading font and Body font: eight fonts that load from Statewide, so visitors' browsers never call another service. You can't upload your own font.
   • Corner radius: 0 to 22 pixels.
   • Buttons: Solid, Outline or Pill.
   • Header: a bar or Centered.

The logo and favicon come from Branding. Theme names, the colour roles and the fonts are listed in the reference.

The contrast checkCopy Anchor Link

Statewide checks four pairs against WCAG AA, a ratio of at least 4.5:1: text on background, text on surface, muted text on background, and button text on primary.

A failing pair shows a message such as "Text on background is 3.2:1; it needs 4.5:1." and Publish is off until these pass. A failing theme can't be published or restored, and the same check runs on a page theme. Fix the colours and the message clears.

A different theme on one pageCopy Anchor Link

Under Page theme in a page's settings, a page can follow the site theme, use a built-in theme, or, on a department page, use Department colors: the department's colour as the primary, with black or white text chosen to stay readable. The page's header, footer and menu follow it.