Skip to main content

​
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 NameAesthetic & MoodPalette Description
Default LightClean & MinimalistA classic, paper-white background with high-contrast typography for maximum readability.
Default DarkModern & SleekA balanced dark gray interface that reduces eye strain while maintaining a professional look.
Dune LightWarm & OrganicInspired by desert landscapes. Features warm yellow and sand tones for a soft, storytelling vibe.
Matrix DarkTech & FuturisticA deep, digital aesthetic. Combines dark backgrounds with terminal-green accents, perfect for developers and tech blogs.
RoyalLuxury & PremiumA 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

[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);
}

​
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.”
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 as your reference instead.

​
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 — we provide free assistance.