Alternative logo for dark themes

theme-component

(Joe) #1

This is a theme component that will allow you to add alternative logos for dark themes / light themes.

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

Repository link

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

Demo:

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


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:

And the same goes with the small logo that shows up when you scroll.


This theme attempts to address the issue by adding two theme settings that you can use to override the logo(s) 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:

How do I install a Theme or Theme Component?

Then add the component to your theme(s) as a theme component and you’re all set!



Color Scheme Contest (with Prizes!)
Developer’s guide to Discourse Themes
Color Scheme Contest (with Prizes!)
(Erlend Sogge Heggen) #2

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?


(Jeff Atwood) #3

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


(Erlend Sogge Heggen) #4

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


(David Kingham) #7

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


(Joe) #8

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