> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hedwik.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Color Mode

> Explore how Skalven’s color modes work and learn how to customize them to match your brand. This page explains the structure of light and dark themes, the variables they use, and how you can override them using Code Injection or theme files. Whether you want subtle adjustments or a completely unique palette, this guide walks you through the process step-by-step.

## **1. How to Change the Color Style**

1. Navigate to **Settings** → **Design & branding** in your Ghost dashboard.
2. Click on **Site-wide** in the sidebar settings menu.
3. Locate the **Color Scheme** (or *Theme Style*) dropdown.
4. Choose one of the 5 available presets listed below.
5. Click **Save** to apply the new atmosphere to your site.

***

## **2. Theme Toggling & User Preference**

You can control whether your readers are allowed to switch between Light/Dark modes or if they experience a fixed visual atmosphere.

### Enabling the Switcher (Auto Mode)

To display the **Theme Switcher button** in your navigation bar, you must select **Auto**.

* **Behavior:** This empowers your visitors to choose their preferred reading experience (Light or Dark).
* **Default:** Initially, the site will respect the user's operating system settings (e.g., if their OS is Dark, the site loads in Dark).

### Enforcing a Fixed Style

If you want to maintain a strict visual narrative—ensuring your site *always* looks a specific way (e.g., always **Royal** or always **Matrix Dark**)—select that specific theme directly.

* **Behavior:** The Theme Switcher button will be **hidden**.
* **Result:** Every visitor will see the exact color palette you have chosen, regardless of their personal device settings.

***

## **3. Available Palettes**

Skalven includes five meticulously curated color schemes to match the tone of your content:

| Style Name        | Aesthetic & Mood   | Palette Description                                                                                                          |
| :---------------- | :----------------- | :--------------------------------------------------------------------------------------------------------------------------- |
| **Default Light** | Clean & Minimalist | A classic, paper-white background with high-contrast typography for maximum readability.                                     |
| **Default Dark**  | Modern & Sleek     | A balanced dark gray interface that reduces eye strain while maintaining a professional look.                                |
| **Dune Light**    | Warm & Organic     | Inspired by desert landscapes. Features **warm yellow and sand tones** for a soft, storytelling vibe.                        |
| **Matrix Dark**   | Tech & Futuristic  | A deep, digital aesthetic. Combines **dark backgrounds with terminal-green accents**, perfect for developers and tech blogs. |
| **Royal**         | Luxury & Premium   | A bold statement. Uses deep **Bordeaux (Maroon) backgrounds paired with Gold/Yellow accents** for a prestigious feel.        |

***

## **4. Creating a Custom Color Theme**

Instead of using the pre-built themes, you can create a color palette that perfectly matches your brand identity.

Skalven is built on **Oklch**, the most advanced color palette available today. It manages colors using specific CSS variables to ensure consistency across your site.

### **How to Customize Your Colors**

While you can edit the theme files directly (`assets/css/core/themes.css`), we strongly recommend using **Ghost Code Injection**. This method is safer, easier, and prevents your changes from being lost if you update the theme later.

### **Understanding the Variable Logic**

Skalven organizes colors into three categories. Each category has 4 levels (from 0 to 3) to create depth and contrast:

* **`Backgrounds (--bg):`** Controls the page and card backgrounds.
  * `0` is the main background.
  * `1`, `2`, and `3` become progressively different (darker in light mode, lighter in dark mode) to highlight elements.
* **`Borders (--border):`** Controls lines and dividers.
  * `0` is the faintest border, `3` is the strongest.
* **`Text (--text):`** Controls typography.
  * `0` is the primary text (highest contrast).
  * `3` is the subtlest text (for metadata or footnotes).

### **Reference: The Default Variable Structure**

<CodeGroup>
  ```Default Light theme={null}
  [data-theme='default-light'] {
    --bg-0: oklch(100% 0 280);
    --bg-1: oklch(97% 0.0024 280);
    --bg-2: oklch(94% 0.0024 280);
    --bg-3: oklch(91% 0.0024 280);

    --border-0: oklch(96% 0.0024 280);
    --border-1: oklch(93% 0.0024 280);
    --border-2: oklch(90% 0.0024 280);
    --border-3: oklch(86% 0.0024 280);

    --text-0: oklch(8% 0.0024 280);
    --text-1: oklch(36% 0.0024 280);
    --text-2: oklch(52% 0.0024 280);
    --text-3: oklch(68% 0.0024 280);
  }
  ```

  ```Default Dark theme={null}
  [data-theme='default-dark'] {
    --bg-0: oklch(12% 0.0012 240);
    --bg-1: oklch(18% 0.0012 240);
    --bg-2: oklch(24% 0.0012 240);
    --bg-3: oklch(30% 0.0012 240);

    --border-0: oklch(20% 0.0012 240);
    --border-1: oklch(26% 0.0012 240);
    --border-2: oklch(32% 0.0012 240);
    --border-3: oklch(38% 0.0012 240);

    --text-0: oklch(90% 0.0012 240);
    --text-1: oklch(80% 0.0012 240);
    --text-2: oklch(60% 0.0012 240);
    --text-3: oklch(45% 0.0012 240);
  }
  ```
</CodeGroup>

### **Understanding Oklch Color Mode**

You might see values like `oklch(90% 0.01 240)`. Here is how to read it easily:

1. **Lightness (First number, %):** How bright is the color?
   * `0%` is pitch black.
   * `100%` is pure white.
2. **Chroma (Second number):** How vivid or saturated is the color?
   * `0` is gray (no color).
   * `0.3` is extremely neon/vibrant.
3. **Hue (Third number):** Which color is it?
   * This represents the angle on the color wheel (0–360). Changing this number changes the color family (e.g., from Blue to Red).

> **Note:** If Oklch feels too complex, you can still use standard **HEX**, **RGB**, or **HSL** codes in the variables. The choice is yours.

### **Pro Tip: Use AI to Generate Your Palette**

You don't need to be a designer to get perfect harmony. Copy the code injection block provided below and use it with ChatGPT (or any AI assistant).

**Prompt example:**

> *"I want a 'Midnight Blue' dark theme and a 'Warm Beige' light theme. Please update these Oklch values to match that style while keeping the contrast hierarchy."*

<Tip>
  When prompting an AI to generate a new color palette, please reference the default light theme code above. If you want a dark version, [use the default dark theme code](#reference:-the-default-variable-structure) as your reference instead.
</Tip>

### **The Code Injection Snippet**

After creating your custom color palette, go to the Code Injection panel and paste your code inside the `<style></style>` tags under the Site Header section.

**Example:**

```
<style>
[data-theme='default-light'] {
  --bg-0: oklch(100% 0 280);
  --bg-1: oklch(97% 0.0024 280);
  --bg-2: oklch(94% 0.0024 280);
  --bg-3: oklch(91% 0.0024 280);

  --border-0: oklch(96% 0.0024 280);
  --border-1: oklch(93% 0.0024 280);
  --border-2: oklch(90% 0.0024 280);
  --border-3: oklch(86% 0.0024 280);

  --text-0: oklch(8% 0.0024 280);
  --text-1: oklch(36% 0.0024 280);
  --text-2: oklch(52% 0.0024 280);
  --text-3: oklch(68% 0.0024 280);
}
</style>
```

### Having difficulties?

Just [**contact us**](https://hedwik.io/contact) — we provide free assistance.