Support for Secondary logo

Ideas
1

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.

2

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

3

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

4

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

5

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
6

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.

7

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.

8

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.