Support for Secondary logo

Dark mode is becoming increasingly popular in theme design. A common problem for the user is the logo that doesn’t match dark theme (when the light mode is also used).

The best solution is to have a separate logo for light and dark mode - however, this requires changes directly in the theme files.

So, I suggest adding a Secondary logo option in Ghost admin and new {{@site.logo_secondary}} helper.

This would be interesting, and it would be a nice addition. @eddiesigner recently had a fix workaround for me for this exact issue.

https://github.com/eddiesigner/weiss-pro/issues/10#issuecomment-647646912

Using invert is not a brilliant solution for dark and light version. If we got other options for uploading dark version logo, that will be perfect

It’s a better solution than the current one, though :wink:

I think the best solution is to use an SVG logo and style it with CSS. We do this on Ghost.org - you’ll see that the homepage has a dark header but the pricing page has a light one. Works really well.

Not likely that we’ll add additional logos to settings - would likely add more complexity than utility

2 Likes

Well, how do you use SVG logo, and especially with light mode/dark mode?

I’d also like to say that I greatly disagree with the decision to not have two logos. I mean, just having one for light mode and one for dark mode really doesn’t add much complexity - and removing the logo in dark mode is a bad solution. IMO, as a new Ghost-user this is a big problem with your platform overall: You’ve made just making the slightest changes extremely hard, while the dashboard is very bare bones and far from bloated. The UI has room for a couple of options like a few more colours, fonts and logos.

For all the free themes that I have tested, the following is applicable and can be used as a code injection (header):

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

That is how I do it. There might be a better practice, such as the one Kevin refers to - but this works fine too.

Thank you for the reply. Do you have example code for how to change black to white in an SVG logo using code injection on Ghost Pro? Running Ghost v5 w Casper Theme.