The constraint: Ghost gives you one color

Ghost themes get exactly one brand color from the admin: --ghost-accent-color . That value often needs to carry most of the UI: links, buttons, hovers, subtle backgrounds, borders.

You can add more theme settings, but it is possible to treat that single accent as the source of truth and derive everything else in CSS.

With one custom property in package.json , the theme can generate tints, hover states, borders and soft backgrounds using color-mix() and, where helpful, oklch() . No extra admin fields are required.

Starting point: normalize the accent color

Ghost exposes the accent color as --ghost-accent-color on :root . A simple first step is to mirror it into a small set of semantic tokens so the rest of the CSS never touches the raw accent directly.

:root { /* from Ghost admin */ --ghost-accent-color: #ff1a75;

/* base semantic tokens */ --accent: var(--ghost-accent-color); --accent-text-on-solid: #fff; }

--accent is the only color that is really “brand”.…