By Akbar Shah — 23 Dec 2025

Can I add dark mode / light mode switcher in Ghost Cms?

Yes, you can add a dark mode/light mode switcher in Ghost CMS. While Casper includes an "Auto" setting to match system preferences, it does not have a user-facing toggle button by default. You can add one using Code Injection or by editing your theme. Method 1: Code Injection (No Theme Files Needed)This is the easiest way to add a functional toggle to every page without downloading your theme.

Open Ghost Admin: Go to Settings → Advanced → Code Injection.
Save: Your site will now have a basic button that toggles Casper's built-in dark mode styles.

Add the Script: In the Site Footer box, paste this JavaScript to handle the switching and save the preference:html

<script>
  const toggle = document.getElementById('theme-toggle');
  const html = document.documentElement;

  // Check for saved preference
  if (localStorage.getItem('theme') === 'dark') {
      html.classList.add('dark-mode');
  }

  toggle.addEventListener('click', () => {
      html.classList.toggle('dark-mode');
      const isDark = html.classList.contains('dark-mode');
      localStorage.setItem('theme', isDark ? 'dark' : 'light');
  });
</script>

Use code with caution.

Add the Toggle Button: In the Site Header box, paste this HTML and CSS:html

<style>
  #theme-toggle {
    cursor: pointer;
    padding: 10px;
    background: none;
    border: 1px solid currentColor;
    border-radius: 5px;
    color: inherit;
    font-size: 14px;
  }
</style>
<button id="theme-toggle" aria-label="Toggle Theme">Toggle Dark Mode</button>

Use code with caution.

Method 2: Manual Theme Modification (Best for Placement)If you want the toggle to look professional (e.g., inside your navigation bar), you must edit your theme's Handlebars files.

Download Theme: Go to Settings → Design → Change theme → Advanced and download Casper.
Insert Toggle HTML: Open partials/navigation.hbs or default.hbs and place the button code where you want it to appear (e.g., next to the search icon).
Use CSS Variables: Casper uses the .dark-mode class on the <html> element to trigger its dark styles. Ensure your script targets this specific class.
Upload: Re-zip the folder and upload it back to Ghost.

Key Considerations for 2025

System Preference: You can supplement the script to automatically detect if a user prefers dark mode on their first visit using window.matchMedia('(prefers-color-scheme: dark)').
Flicker Fix: To prevent a "flash" of white before the dark mode loads, place the script that checks localStorage in the Site Header instead of the footer.

These resources demonstrate adding a dark mode toggle to your Ghost CMS, covering theme options and code injection:

Subscribe to Akbar Shah