Customizing Theme Colors and Fonts via Code Injection

Every CCLY Studio theme uses CSS custom properties (variables) for colors, fonts, and spacing. You can override any of these via Ghost's Code Injection feature — no theme editing required.

Where to add custom CSS

Go to Settings → Code Injection → Site Header in Ghost Admin. Add your overrides inside a <style> tag.

Change the accent color

The accent color is used for buttons, CTAs, drop caps, blockquote borders, and tag highlights.

<style>
:root {
    --color-accent: #2563eb;
    --color-accent-hover: #1d4ed8;
    --color-accent-text: #ffffff;
}
/* Also override dark mode */
[data-color-scheme="dark"] {
    --color-accent: #60a5fa;
    --color-accent-hover: #93bbfc;
    --color-accent-text: #1a1a2e;
}
</style>

Change link colors

<style>
:root {
    --color-link: #7c3aed;
    --color-link-hover: #6d28d9;
}
</style>

Change fonts

Option 1: Ghost font picker (easiest)

Ghost 6 includes a built-in font picker at Settings → Design → Brand → Typography. Fonts selected there automatically override the theme's heading and body fonts.

Option 2: Custom Google Fonts via Code Injection

<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
    --font-heading: 'Lora', Georgia, serif;
}
</style>

Adjust spacing and layout

<style>
:root {
    --content-max: 760px;     /* Wider article text */
    --container-max: 1400px;  /* Wider page container */
    --radius-md: 16px;        /* Rounder corners */
}
</style>

Find all available variables

Each theme's documentation includes a full Design System section listing every CSS variable with its default value and a color swatch. See:

• Vestige Design System