Color schemes, preview, and dark mode

Preview toolbar, Theme Settings, and Ghost Admin each control color differently. This page explains which is which.

Preview toolbar

The preview toolbar controls the iframe only:

  • Preview size: One control opens Desktop, Tablet (768px), or Mobile (375px). This only changes the preview frame so you can check layout; it does not change what visitors see.
  • Preview color scheme: Follow theme, Light, or Dark for the iframe only. On Free, only Follow theme is available; forcing light or dark preview requires Pro.
  • Preview data: Opens a menu with two choices, Demo data and Connected site (offered when Ghost is connected and a snapshot is ready). Pro is required to load preview from your Ghost site; otherwise the preview stays on demo data.

The accent the preview uses is not something you set. When Ghost is connected and its snapshot carries a Brand accent, neutral palettes follow that accent. Otherwise the preview falls back to Fantasma's default accent.

Theme Settings: global palette

Open Theme Settings → Color Scheme to choose the palette that ships with your theme.

  • Color mode: Light, Dark, or System sets the default appearance on the live site. System (follow the visitor OS) is Pro on Free accounts.
  • Built-in schemes: Neutral palettes lean on your accent color; themed palettes ship fixed accent colors. You can hide built-in schemes you do not use. Hiding removes them from pickers; sections that already reference a hidden scheme keep working.
  • Per-section overrides: In section settings, choose a scheme other than Default to override the global palette for that section only.

Sections set to Default inherit the global palette and color mode. See Theme settings for posts per page, typography, and related options.

Custom color schemes

Create your own palettes instead of relying only on built-in schemes.

  1. In Theme Settings → Color Scheme, click Create custom color scheme (Plus button).
  2. Name the scheme and edit light and dark palettes separately.
  3. Adjust tokens such as accent, base, primary, secondary, muted, border, and input. Pair tokens include matching foreground colors where the editor shows them.
  4. Save. The scheme appears in the Custom row and in section color-scheme pickers.

You can keep up to 12 custom schemes per project. Edit and Delete are available from each custom scheme’s menu.

Dark mode

Dark mode is a Pro feature family: builder preview overrides, system color mode, visitor dark-mode controls in Navigation and Footer sections, and dark logo/icon support after the theme is installed in Ghost. Visitor controls are separate from preview switches.

Button and label text can be translated via theme locale files (for example locales/en.json in the downloaded or published theme).

Dark logo and dark icon (Ghost)

After you install the Fantasma theme in Ghost, set dark mode logo and dark mode icon in Ghost’s custom theme settings for the active theme (Ghost’s UI labels may vary by version). If those fields are empty, the standard logo and icon are used in dark appearance.

Brand accent on the live site

Ghost’s Settings → Site → Brand accent is what production uses. The builder preview follows that same accent once a connected site has a snapshot, and Fantasma’s default accent otherwise, so preview and production can disagree until Ghost is connected.

When preview and production disagree

  • Stale theme: Upload or publish the latest build after editing.
  • Accent source: Preview follows your connected site's Brand accent when a snapshot carries one, and Fantasma's default accent otherwise; production always uses Ghost Brand.
  • Demo vs live content: Lists and tags in preview may not match production until you use Pro connected-site preview or check the live site.
  • Caching: Browsers and CDNs can show older CSS or assets; try a hard refresh.

Related articles