Even if you know how to code, you might not always want to experience the joy of editing raw HTML files when it’s time to update the copy on your website.

Content Management Systems, or CMSs, offer an interface to create and edit content such as images, blog posts, headlines, etc without having to directly touch a website’s code.

Just as feature flags are useful in traditional web and mobile applications, they could be used with a CMS to personalize a website for specific audiences, or run a/b experiments to refine your user experience, or gate rollouts of new features.

In this post you’ll learn how to add LaunchDarkly feature flags to a site hosted on the Ghost CMS to change your site’s styling at the flick of a switch.

Prerequisites

A hosted Ghost account - sign up for free here. This tutorial will walk you through the process of creating a new Ghost site.
A free LaunchDarkly account - sign up here

Why Ghost? 👻

Ghost, the company, is a non-profit organization founded in 2013.

Ghost offers a hosted CMS (paid, with a free trial), or you can use the free open-source guide and run your own infrastructure. To keep things simple today, we’ll be using the hosted version.

There are a ton of integrations to make your site a full-fledged, rich experience. Ghost has a built-in newsletter to reach your community’s inboxes and hearts.

Ghost requires no coding ability to create a site! But if you can code, you can customize your site more deeply by creating and modifying themes. Furthermore, Ghost provides modern developers tools such as a CLI, APIs, and webhooks.

Creating your first Ghost site

If you already have a Ghost site, you can skip this section. Make sure your site is using the default theme (source v1.4.1) or else the code shown won’t work.

When you sign up for a Ghost account, the UI walks you through a site creation flow.

Name your site whatever you want. Since I’m a vegan powerlifter who wants to publish some plant-based protein recipes, I’ll go with “Vegan Forklift.”

Screeshot of the initial dialog for creating your first Ghost site.

You need to enter a credit card if you are using a free trial account, but you won’t be automatically charged.

After you click “Continue” you’ll be taken to your site’s dashboard. Click “View site” to see how your site looks in production. Since we are using the default theme, it should be something like this:

Screeshot of a site created with Ghost's current default theme.

Make a note of the site’s URL since we’ll be revisiting it later.

Go to your settings in the Ghost admin panel, via https://your-site-url/ghost/settings/code-injection/.

Screenshot demonstrating where to click in the Ghost settings page to get to the Code Injection screen.

On the site footer tab, paste in the following code. You'll notice there's a placeholder for the client-side ID. We'll get the actual ID in the next steps, but go ahead and paste this whole snippet for now:

  // load the LaunchDarkly SDK
<script src="https://unpkg.com/launchdarkly-js-client-sdk@3"></script>
  <script>
    // Initialize the LaunchDarkly client-side SDK
    const client = LDClient.initialize("PUT YOUR CLIENT SIDE ID HERE", {
      anonymous: true,
    });
    client.on("ready", () => {
      const showDarkMode = client.variation("showDarkMode", false);
      if (showDarkMode) {
        console.log("showDarkMode is true");
        document.querySelector(".gh-header-image").style.display = "none";
        document.querySelector('body').style.background = 'darkgrey';
        document.querySelector('.gh-navigation-actions').style.background = 'darkgrey';
        document.querySelector('.gh-navigation').style.background = 'darkgrey';
        document.querySelector('h1').style.color = 'rebeccapurple';
        document.querySelector('input').style.background = 'lightgrey';
      }
    });
  </script>

What does this code do?

This code uses LaunchDarkly's JavaScript SDK to check if our dark mode flag (showDarkMode) is on, making it work for all visitors to your site. When the flag is on, it changes your site's styling: the background turns dark grey, the text becomes purple, the header image gets hidden, and the input boxes turn light grey.

Note - this code was written to work with the Ghost default theme (source v1.4.1). If you want to use a different theme, you will need to modify your querySelectors to work with the HTML elements and class names in your particular theme. Our friend Amit took a shot at this, but I can't guarantee it will work in every possible Ghost theme since there are a ton.

Click Save. Open your site URL in a new tab. Nothing should look different, since we haven’t created our feature flag yet.

Creating a LaunchDarkly feature flag

Head over to the LaunchDarkly app. Click “Create flag.” Use the following flag configuration:

Name: showDarkMode
Description: When enabled, change site styling to dark mode.
Configuration: Custom

Flag type: Boolean
Variations: true, false
When targeting is ON, serve true
Important! Check the box that says “SDKs using client-side ID”

On the next screen, click the … menu next to the environment you want to use. Here I used the “Production” environment but Test also works just fine. Highlight your client-side ID to copy it to the clipboard.

Click the toggle to turn your flag on, and then click “Review and save.”

Make sure the same environment you copied the SDK key from before is selected (has a border around it to indicate that it is active, as Production is in this example.) If your LaunchDarkly settings require it, enter a comment to explain why you’re enabling this flag ( perhaps, “my heart is a dark pit of darkness.”)

Back in your Ghost site settings page, paste the client-side ID into the code in your site footer tab. Save your code.

Finally, reload your Ghost site. Behold a muted color palette. Nice work!

Screenshot of what the Ghost site should look like in dark mode.

If you want to check the disabled state as well, turn the flag off in your LaunchDarkly environment and reload your Ghost site, now freshly pale. Extra credit to you for checking all the variations.

Troubleshooting

If it isn’t working, open your browser console. If you see a message that says “Environment not found” that means your client-side ID is incorrect. You can go back to the LaunchDarkly app and copy it.

Conclusion: toggling dark mode in your Ghost CMS with a LaunchDarkly feature flag

In this tutorial you have learned how to create a basic Ghost site and customize your CSS using a LaunchDarkly feature flag. Feature flags have so much more potential, though.

Here are some ideas about how to use feature flags in your CMS:

Run an experiment to test which style and copy variations best serve your users.
Manage a group of beta readers by using LaunchDarkly segments and email targeting to give your most loyal fans early access to your content.

Thanks so much for reading. Hit me up on Bluesky if you found this tutorial useful. You can also reach me via email (tthurium@launchdarkly.com) or LinkedIn.