In Dawn theme, how would I add an alternate logo for dark mode?

Themes
1

I found instructions for Dawn to add an alternate image for dark mode (so you’d have a white logo):

White Logo

When it’s in dark mode, a white version of the logo will be needed unless you’re using a text logo. In this case, you can enter the logo URL in partials/customize/config.hbs file.

white_logo: 'yourblog.com/content/images/IMAGE_URL.jpg',

Note: Remember to restart your Ghost when you made a change in hbs file.

These instructions don’t work since there is no partials/customize folder. So how do I do this with the current version of this theme?

Also, changes to the CSS don’t seem to push or update on Ghost, but I guess I can use code injection instead, unless someone has some idea.

2

Hey!

I think the instructions you have are out of date. The new ones are:

If your logo image isn’t recognizable in dark mode, you can set a white version of the logo in Code injection > Site Header field.

<script>
    var gh_white_logo = 'https://example.com/content/images/white-logo.png';
</script>

The up-to-date version is also available on GitHub:

1 Like
3

Thank you!

Do you know how I might store this image on Ghost Pro? I can add it in the theme assets, but I don’t know how to refer to it in the URL.

4

I ended up storing it on S3. What’s frustrating is that despite being the same size image, the theme is making the white version smaller.