> For the complete documentation index, see [llms.txt](https://pinathemes.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pinathemes.gitbook.io/docs/drift/customization/site-wide/color-scheme.md).

# Color scheme

The theme includes multiple color schemes, allowing you to choose the visual style that best fits your site.

### Step-by-step:

{% stepper %}
{% step %}
Go to the "**Design & branding**" settings in Ghost Admin and click "**Customize**".
{% endstep %}

{% step %}
Under the **Site wide** settings, locate "**Color scheme**".
{% endstep %}

{% step %}
Select your preferred option and click "**Save**".
{% endstep %}
{% endstepper %}

### Available Options

* Light
* Dark
* Olive *(default)*
* Harbor

{% hint style="warning" %}
The accent color is not available for all custom color schemes. This option only works with the **Light** and **Dark** schemes.
{% endhint %}

### Custom Color Scheme

Customize the color variables used throughout Drift’s theme. This advanced styling option allows you to override the default colors and create your own color scheme beyond the palettes included with the theme.

#### Step-by-step:

{% stepper %}
{% step %}
Go to Settings → Advanced → Code injection in the Ghost Admin.
{% endstep %}

{% step %}
Paste the following code into the Site Header field:
{% endstep %}

{% step %}

```
<style>
:root:is([data-theme="Light"]) {
    --base: #555555;
    --primary: #f7f7f6;
    --secondary: #eeeeed;
    --tertiary: #dededc;
    --heading: #252525;
    --text: #303030;
    --meta: #777777;
    --header-primary: var(--accent);
    --header-text: #f7f7f6;
    --submenu: var(--primary);
    --submenu-text: var(--text);
    --border: #e9e9e8;
    --shadow: #1c1c1c;
    --overlay: #1c1c1c;
    /* Dark Mode */
    --dark-primary: #1c1c1c;
    --dark-secondary: #222222;
    --dark-tertiary: #2d2d2d;
    --dark-heading: #f7f7f6;
    --dark-text: #f7f7f6;
    --dark-meta: #a0a0a0;
    --dark-header-primary: var(--header-primary);
    --dark-header-text: var(--header-text);
    --dark-submenu: var(--submenu);
    --dark-submenu-text: var(--submenu-text);
    --dark-border: var(--dark-tertiary);
}
</style>
```

{% endstep %}

{% step %}
Replace the color values with your preferred colors.
{% endstep %}

{% step %}
Click Save to apply the changes.
{% endstep %}
{% endstepper %}

#### Important

The `--header-primary` and `--dark-header-primary` variables use the theme's `--accent` color by default. This means the **Accent Color** selected in Ghost Admin is automatically used for the main header color unless you override it with a custom value.