Alternative logos for dark / light themes

This is a theme component that will allow you to add alternative logos on a per-theme basis. So, you can have two different sets of logos - one for your dark themes and one for your light themes.

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.

36 Likes

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?

7 Likes

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

5 Likes

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:

image

4 Likes

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

2 Likes

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

8 Likes

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. :slight_smile:

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.

5 Likes

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?

That’s the purpose of the theme component above.

4 Likes

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

2 Likes