Alternative logos per theme

[Johani (Joe)]

This is a theme component that will allow you to add alternative logos on a per-theme basis.

Since August 2020, Discourse core supports uploading dark theme logo alternatives in core. See Automatic Dark Mode color scheme switching for details on how to set that up without this component.

The effects of this theme are purely visual. All functionality is intact / unchanged.

Repository link

https://github.com/discourse/discourse-alt-logo

Theme Creator Preview:

https://theme-creator.discourse.org/theme/Johani/alt-logo

Samples

To demonstrate what this theme does, here’s an example.

Let’s say this is your logo

You add it in your site settings or via the wizard and it looks like this

However, let’s say you want to also allow your users to be able to use a dark theme. Here’s what happens

The same goes with the small logo that shows up when you scroll and the mobile logo.

This theme attempts to address the issue by adding three theme settings that you can use to override the logos on a per-theme basis:

The end result is something like this:

You keep the default logo in themes which don’t have this component:

While being able to override it in themes that do have this component added:

How do I install this component?

Follow the official theme installation guide here

Then add the component to the themes you want to use it on and you’re all set!

If you’re new to Discourse themes, you can learn more about them here.

[erlend_sh (Erlend Sogge Heggen)]

This really ought to be baked into core, no custom component required.

1. Make alternative logo url and alternative small logo url a part of default settings.
2. Add logo selector to color editor which lets you pick between the default or alternative logo, something like this:
   
   

What say ye @sam @codinghorror?

[codinghorror (Jeff Atwood)]

Wouldn’t there need to be {x} different logos? I am not sure two would be sufficient.

[erlend_sh (Erlend Sogge Heggen)]

Yes. I was going for a first iteration, but ideally what we’d do is change logo url and logo small url to accept more than one image each, like so:

[davidkingham]

Are there any plans to add the mobile logo to this or should I hack it in css?

[Johani (Joe)]

Sure, there’s now a third setting to set an alternative mobile logo as well

[fearlessfrog]

We had an issue with beta5 today of dual or double logos, as it looks like #site-logo changed in our customized css on our dark theme.

This alternative theme component was ideal and allowed us to fix it quickly. Replied here in-case it helps others, plus people might search for double logos on dark themes or something.

EDIT: Only oddity we found was that we had to fill in both the alternate and mobile logos fields for mobile, as scrolling up (not scrolling down funnily enough) would show the primary logo incorrectly. I’d guess something to do with the recent mobile header change of showing the topic etc.

[uwe_keim]

I just saw, when switching to a dark theme here on Meta, that the Discourse logo changes to white text (after saving and refereshing the browser with F5).

When doing so on my own forum, the logo stays black and is not visible in dark mode anymore.

I searched through all settings in the admin area and found no way of specifying a logo for dark theme.

I also found no way to do so in the theme settings.

My question:

How does Meta provide an alternative logo for dark theme and how can I do this, too?

[Stephen]

That’s the purpose of the theme component above.

[uwe_keim]

OMG, I didn’t get it first, now I understand. Works as expected, thanks a lot.

[knewt]

Ever since I upgraded to beta8, I seem to be having problems with this, with the logos frequently showing up broken. Forcing a refresh fixes it for a while (and manually opening the logo url in the browser works fine), but after a while I get the broken image again. And it only seems to happen on themes with the alternate logo activated. Anyone else seen this?

[zuker (Matías)]

ive got the same problem. any updates?

[Johani (Joe)]

Welcome to Meta @zuker

I’m not aware of any recent changes in core or in this component that would cause this.

Can you or @knewt post a link to the site you’re seeing the issue on?

[zuker (Matías)]

Can you or @knewt post a link to the site you’re seeing the issue on?

Hi, my site is turiver.com

Thanks

[Johani (Joe)]

Are you sure you have this component installed and activated? I don’t see any changes in the logo when I switch between the light / dark themes on your site.

[zuker (Matías)]

Yes, you can see it now activated.

[knewt]

I’m afraid mine is currently private, invite-only. However, we’ve figured something out. When it’s not showing up properly, the url it’s trying to use is http, not https. Despite the paths in the component settings being https, and the forum being configured https-only. This explains why opening the image in a separate tab works, because it gets redirected to https. But on-page, you get a mixed-content problem.

[zuker (Matías)]

Hi @Johani any news regarding this? Thanks

[Stanzilla]

Could you maybe add an option to display the site title next to the logo as well?

[zuker (Matías)]

Im still having issues while logos are displaying wrong