Custom colours

Stretch keeps every colour in a CSS variable. You can change any of them with a few lines of CSS in Ghost Admin. You do not edit the theme files, so your colours stay when you update Stretch.

Try the settings first

Some colours have a setting. Use the setting when there is one:

• Colour scheme: Light, Dark, System, Pastel or Bold.
• Accent colour: buttons, highlights and the hero background.
• Background colour: the frame around the site card.

See Colours and fonts. Use custom CSS for the colours that have no setting, for example the text or the cards.

Add your CSS

1. In Ghost Admin, go to Settings → Code injection.
2. Open Site header.
3. Paste your CSS inside a <style> tag, like the example below.
4. Click Save.
5. Open your site and reload the page.

<style>
/* Light scheme */
:root {
    --color-accent: #2f7d4f;
    --color-text: #1d3b2a;
    --color-surface: #fbf8f1;
    --color-canvas: #e7e1d3;
}

/* Dark scheme */
:root[data-theme="Dark"] {
    --color-surface: #1b2b22;
    --color-canvas: #0f1a14;
}
</style>

Which scheme your CSS changes

Each colour scheme has its own colours. Your CSS changes only the scheme you name:

Selector	Changes
:root	Light, and System on a light device
:root[data-theme="Dark"]	Dark, and System on a dark device
:root[data-theme="Pastel"]	Pastel
:root[data-theme="Bold"]	Bold

The accent is different. --color-accent in :root changes the accent in Light, Dark and System. Pastel and Bold keep their own accent, unless you set it in their own block.

If you use System, give colours for both Light and Dark. Then the site looks right on every device.

How the accent colour works

• The accent you pick in Design & branding → Brand applies to Light, Dark and System.
• Ghost's default accent is pink (#FF1A75). If you do not change it, Stretch treats it as "not picked". Light then uses brown (#92400e) and Dark uses amber (#fbbf24).
• To change these defaults, set --color-accent-default in :root or in :root[data-theme="Dark"].
• To use Ghost's pink after all, set it with CSS: :root { --color-accent: #ff1a75; }.
• Pastel and Bold do not use the Brand accent. They have a fixed palette.
• Text on the accent is black or white. Stretch picks the one that is easier to read, also when you set the accent with CSS.

Colour variables

These are the variables you will change most. The full list is at the top of assets/css/tokens.css in the theme zip.

Accent

Variable	What it colours
--color-accent	Primary buttons, the focus ring, highlights and the hero background when there is no cover image. Card backgrounds and borders mix in a little of it.
--color-accent-default	The accent of a scheme when no accent is picked in Ghost Admin.

Text

Variable	What it colours
--color-text	All body text and headings. Links use it too.
--color-text-inverse	Text on dark areas in light schemes, and the other way round.
--color-text-on-image	Text over cover photos. It stays light in every scheme.
--color-text-on-canvas	Footer text, which sits on the frame outside the site card.
--color-error	Error messages in the sign-up form.

Backgrounds

Variable	What it colours
--color-canvas	The frame around the site card. The Background colour setting also sets it.
--color-surface	The site card and the post cards.
--color-surface-muted	Inline code, table headers and empty avatar circles.
--color-surface-accent	The author card, the featured post, the paywall box and related posts. By default it is a light tint of the accent.
--color-surface-inverse	The hero behind cover photos, and the subscribe band.
--color-overlay	The shade over cover photos. The Hero overlay setting controls how strong it is.

Borders, links and buttons

Variable	What it colours
--color-border-default	Thin lines in post content, tables and cards.
--color-border-accent	Post card borders and the share card. By default it is a tint of the accent.
--color-border-strong	Outlined buttons and form fields.
--color-link, --color-link-hover	Links in post content.
--color-canvas-link	Footer links on hover.
--color-focus-ring	The outline that shows which link or button has keyboard focus.
--color-button-primary-background	Primary buttons. By default it is the accent.
--color-button-primary-text	Text on primary buttons. Stretch sets it from the accent, so change it only if you also change the button background.
--color-mark-background	Highlighted text in posts.
--color-code-background, --color-code-text	Code blocks.

Tips

• Change a few variables at a time, then check the home page, a post and a tag page.
• Keep text readable. Text and its background need a contrast of at least 4.5:1. Free tools such as the WebAIM contrast checker show the number.
• A colour like --color-surface-accent is mixed from the accent. If you set it yourself, it stops following the accent.
• To undo everything, delete your CSS from Code injection and click Save.