Color schemes, preview, and dark mode

Several controls sound similar but do different jobs: preview-only tweaks in the builder, defaults baked into the downloaded or published theme, and Ghost Admin settings for the live site. This page ties them together.

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: site color mode

In Theme Settings (Fantasma), Color Scheme sets the theme’s default light, dark, or system appearance for the live site after you download or publish. System (follow the visitor OS) is Pro on Free accounts.

Neutral vs themed palettes affect how accent is applied; sections set to Default inherit these globals. See Theme settings for posts per page, typography, and related options.

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