Accent Color Tweaks Beyond the Ghost Setting

Ghost gives you exactly one accent color (Settings → Design & branding → Accent color), and every theme receives it as a CSS variable named --ghost-accent-color. One color is often not enough: you might want a softer accent in dark mode, a different accent on one landing page, or a proper hover shade for buttons. Because the variable itself comes from Ghost — not from your theme — overriding it works on every theme that uses the accent variable (all official Ghost themes and all Luxe themes do).

Change the accent in dark mode

Bright accents that work on white often glow harshly on dark backgrounds. This softens the accent when the visitor’s system is in dark mode. Paste into Settings → Code injection → Site header:

<style>
  @media (prefers-color-scheme: dark) {
    :root {
      --ghost-accent-color: #8ab4f8; /* your dark-mode accent */
    }
  }
</style>

If your theme uses a class-based dark mode (a toggle that adds .dark-mode), scope it to the class instead:

<style>
  html.dark-mode {
    --ghost-accent-color: #8ab4f8;
  }
</style>

Different accent on one page

Ghost adds a .page-<slug>/.post-<slug> class to the body of every page and post. To give a landing page its own accent (slug black-friday in this example):

<style>
  .page-black-friday {
    --ghost-accent-color: #d97706;
  }
</style>

Everything on that page that follows the accent — buttons, links, highlights — switches at once.

A real hover shade for accent buttons

Most themes reuse the same accent on hover. color-mix() (supported in all current browsers) darkens it slightly without you picking a second hex:

<style>
  [class*="button"]:hover,
  button[class*="submit"]:hover {
    background-color: color-mix(in srgb, var(--ghost-accent-color) 85%, black) !important;
  }
</style>

The attribute selectors above are deliberately broad; if your theme’s buttons use a specific class (check with right-click → Inspect), target that class directly for cleaner results.

How It Works

Ghost injects --ghost-accent-color on the page root from your admin setting; themes reference the variable instead of hard-coding a color. CSS variables can be re-declared at any scope — a media query, a body class, a single page — and every element reading the variable follows along. You’re not fighting the theme; you’re redefining the value it reads.

Works With

Any theme built on --ghost-accent-color — all official Ghost themes and all Luxe themes. A theme that hard-codes its colors (rare in modern themes) won’t respond; the per-theme snippet route covers those cases.