Theming your site

Theming starts from one of seven palettes and then lets you change everything. Colours are checked for contrast as you type, with a plain-English message rather than a number.

Dark mode is not something you configure. Every published page carries a toggle, and your colours are adapted rather than inverted.

#Every control

A published site header in blue carrying the links Website, Trust and Status and a moon icon, above a row of space tabs. — Header links appear to the right of the published site's header, next to the light and dark toggle.

Logo, cover image and favicon are uploaded in the app, each stating the formats, size limit and size it expects.

Three stacked versions of the same site header for Capable Help Center, one blue, one dark red and one white, each with a search box and Website, Trust and Status links, with a row of space tabs under — The same header in three colour settings, showing how the header background and text colours carry through to the published site.

Control	What it does
Site logo	Shown at the left of the site header, linking to the site home. Without one the header shows the site title as text.
Favicon	The browser-tab icon.
Header background	The site header bar, in BOTH light and dark mode, the header is treated as a brand bar and keeps your colours whichever mode the visitor is in.
Header text	Site title and header controls. Graded for contrast against the header background.
Accent	Links, active items and highlights. Also tints hover states and the active sidebar row. Automatically lightened for dark mode so it stays legible.
Page background	The article canvas. If you pick a dark value it is kept as-is in dark mode.
Body text	Article body copy.
Headings	All heading levels inside the article.
Sidebar & panels	Sidebar background, blockquotes and table headers. A light value here is re-cast as a subtly raised dark surface in dark mode rather than glaring white.
Font family	Body text and headings together. Inter, Source Sans and Pagella download a webfont from Capable's CDN; the rest use fonts already installed on the visitor's machine and download nothing.
Header links	External links on the right of the site header. Always open in a new tab. Hidden on screens under 960px.
Announcement banner	A slim strip above the site header on every page, with its own background and text colour, a headline and an optional second line. Visitors can dismiss it, and editing the wording or colours makes it reappear for everyone.
Footer text	A line at the bottom of every page, ABOVE the fixed "Created with Capable Sites + Atlassian Confluence" credit.
Last updated date	A relative date under each page title ("3 days ago") with the exact date on hover. Labelled "Created" on a page's first version and "Updated" after that.
Author	Shows "Created by {name}" under each page title.
On this page panel	The right-hand table of contents. Pick the deepest heading level shown, or turn it off. It is hidden automatically on screens under 1200px regardless of this setting.
Default cover image	The social sharing image used for any page that has no cover image of its own.
Palette presets	One-click starting palettes in the create wizard's Theme step. Each fills the seven colour fields and everything stays editable afterwards. Choosing "Capable" clears all overrides back to defaults.
Dark mode	Every published page carries a dark-mode toggle in the header, remembered per browser and applied before the page paints so there is no flash. Visitors whose operating system prefers dark get the dark palette automatically. The dark palette
Contrast grading	Every colour you set is checked for legibility as you type, with a plain-English message per field, e.g. "Links reach only 3.8:1 against the sidebar, below the 4.5:1 accessibility minimum. Try a darker accent." Fields you leave blank are gr
Layout dimensions	Fixed: sidebar 280px (flexing between 18vw and 380px), "On this page" 220px (up to 300px), header 56px, article column max 820px.
Responsive breakpoints	"On this page" disappears below 1200px; header links below 960px; the space switcher's text label below 840px; and below 780px the search box, header links and header switcher all disappear while the sidebar becomes a hamburger drawer.

Contrast grading is the useful part. Each colour is graded as you set it, so you find out that links only reach 3.8:1 against the sidebar while you can still do something about it.

#Dark mode

Visitors get a toggle in the header, remembered per browser and applied before the page paints so there is no flash. Your header colours are kept in both modes because the header is treated as a brand bar. There is no way to turn dark mode off.

#A few things worth knowing

Three of the font choices download a webfont from our CDN; the rest use fonts already on the visitor's machine.
Layout dimensions are fixed, and several elements hide themselves below set screen widths.
A number of theme values exist in the data but have no field in the interface. See What is not configurable.

What is not configurable

The gaps worth knowing.

Spaces and navigation

Structure rather than style.

Your first site

Where theming starts.

Pick a palette. Change everything.