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 popover (Preview data settings). There you choose Demo data or Connected site (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.

When Demo data is selected, the popover includes Accent color for preview (neutral palettes use it). When Connected site is selected and Ghost returns an accent, the preview can follow that Brand accent instead.

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. Fantasma’s preview accent (demo data) or snapshot accent (connected site) helps you match the builder to Ghost, but the live site follows Ghost until you align both.

When preview and production disagree

  • Stale theme: Upload or publish the latest build after editing.
  • Accent source: Demo preview uses the popover accent; connected preview may use Ghost; production 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