Skip to main content
Prime Direction

Color Scheme

Break ships four palettes. All of them are built from one source, the Accent color you pick in Ghost's own design settings. The scheme decides how much of that color the page carries, not which color it is.

This keeps the page and Ghost's own windows in step. Ghost draws the sign-up window (Portal), comments and search inside frames the theme cannot style, and they take their color straight from your accent. Because every scheme is built from the same accent, the page and those windows use the same color.

Setup Instructions#

Set the accent color first, then choose the scheme.

  1. Go to ⛭ Settings → Design
  2. Click Customize
  3. On the Brand tab, pick your Accent color
  4. Open the Theme tab
  5. Choose a Color scheme
  6. Click Save

The preview updates as you change the color, so you can compare a scheme against several accents before saving.

Available Schemes#

SchemeHow it looks
ClassicNeutral greys. Your accent appears in small doses: buttons and links under the pointer, the current navigation item, markers. The default
TintedClassic with a light wash of your accent through the backgrounds, borders and text
AccentBackgrounds, borders and text are all mixed with your accent. Strongly colored, best with a confident brand color
ContrastPure black on white, with stronger borders. In dark mode the background is true black, which suits OLED screens

Every scheme has a light and a dark version. Which one a reader sees depends on the Dark mode setting and on the reader's own choice. See Dark Mode.

Text on the Accent Color#

Text on accent-colored surfaces switches between black and white by itself, based on how light your accent is. A yellow or pale accent gets black text. A dark accent gets white text. This applies to buttons under the pointer, to editor cards filled with the accent and to the square site mark in the top bar when you have no publication icon. There is no setting for it.

Older browsers that cannot work this out always use white text.

Notes#

  • Changing the accent color changes all four schemes at once. If a scheme looks wrong, try a different accent before switching schemes.
  • Tinted and Accent take their character from the accent's hue. A grey or near-black accent leaves both looking much like Classic.
  • The scheme does not change the colors inside Portal, comments or search. Those follow your accent color directly.
  • A tag with its own color set in ⛭ Settings → Tags keeps that color in the What do we cover? section, in the topics mega menu and in the tag list at the foot of a post.