How to Add Different Logos for Dark & Light Themes in Ghost

Many Ghost themes provide different themes or color schemes, like dark & light theme. These usually detect the user preference and show your site in your users' preferred color scheme. Sometimes, however, this will cause problems with your logo. We will look at several methods you can use to tackle this issue.

CSS method

This method could be used if you have a simple logo, or if you don't mind changing your logo to plain white/black. This method can be done easily using Code Injection, in your Ghost Admin.

First, you need to identify how the dark theme is marked up in your case, it's usually a class or data attribute on the <html> or <body> tag. In our case the dark theme is indicated by a data attribute:

<html data-color-scheme="dark"></html>

Next step is to identify your logo's selector (css class or id), in our case that is .header-logo. You can use Inspect Element to find the selector in your case.

Now we have everything we need to target the logo when the dark theme is active. Here is the code to invert the logo on a dark theme:

html[data-color-scheme='dark'] .header-logo {
  filter: invert(1);
}

Here is the code to change a logo to white on a dark theme:

html[data-color-scheme='dark'] .header-logo {
  filter: contrast(0%) brightness(200%);
}

Warning

Depending on the original color of your logo you might need to play around with the contrast and brightness.

SVG logo

The second method is using SVG's, if you have your logo in SVG format, you can put that in your Ghost theme. Download the theme and find where the @site.logo is used and replace that code with your SVG code. Then the SVG can be styled using css.

One option is to use the filter property similar to how it's described in the first method(CSS) or depending on the SVG format and setup, you might need to change the fill and/or stroke values of the different elements.

To read more about the fill and stroke attributes check out this Mozilla Guide

Custom theme settings

Starting with Ghost 4.20.0 and the introduction of custom theme settings it's possible to define an image type custom setting, that can be used as an alternate logo for dark mode for example. You can define custom settings in the package.json file, like this:

{
	...
	"config": {
    "custom": {
      "dark_theme_logo": {
        "type": "image"
      }
    },
    "posts_per_page": 10,
		"image_sizes": { ... }
  }
}

After restarting ghost, you should be able to see the new option in your Ghost Admin under Settings > Design. This new image then can be used in the hbs files, like this:

{{#if @custom.dark_theme_logo}}
  <img
    class='header-logo dark-theme'
    src='{{img_url @custom.dark_theme_logo}}'
    alt='{{@site.title}}'
  />
{{/if}}

You can put this code in the header, next to the @site.logo code, then some css is needed to hide/show wither the original or the dark theme logo. This can be done similarly to the CSS solution explained above, you need the CSS selector to be able to target the elements. For example, in our case the code would look like this:

/* Hide dark theme logo by default */
html .header-logo.dark-theme {
  display: none;
}

/* Hide light theme logo on dark theme */
html[data-color-scheme='dark'] .header-logo {
  display: none;
}

/* Show dark theme logo on dark theme */
html[data-color-scheme='dark'] .header-logo.dark-theme {
  display: block;
}

That's it, your custom image should work.

Conclusions

There are plenty of options out there to make your logo work on the dark theme, especially with the addition of custom theme settings.

推荐订阅源

Example blog

CSS method

SVG logo

Custom theme settings

Conclusions