Discourse Style and Themes Update


(Michael Friedrich) #1

Hi,

I’m a friend of keeping things simple - the more you modify, the easier something breaks on an upgrade. In the past weeks I’ve recognized that Discourse members are adding so-called “theme components” to allow enhancing the upper menu.

In terms of administration, these child themes can just be included in the main themes. This allows us to enable more themes, especially the dark theme fulfilling the request by some of you.

Light and Dark theme

Navigate to your account settings in the upper right corner, pick Interface and select the Dark theme. Note: There’s a glitch with the header component theme, please ignore this option.

06

Dark


Changes:

Right Upper Menu

This already has been put in place, and replaces the old Javascript in the Theme’s header section. We may of course add more icons and URLs there, just keep in mind that too many icons confuse everyone.

25

Top Navigation

Thought it might be a good idea to add “Site Feedback” on top. Let me know if you’d need anything else in there, or a replacement :slight_smile:

Cheers,
Michael


#2

Hi,

just a minor thing: It seems to be that the inverted logo is also displayed when using the light theme, is this on purpose? Maybe we should have two logos, one for the light theme (not inverted) and one for the dark theme (inverted) for better legibility.

Thank you for keep pushing on such updates for the site. :heart:

Cheers
Michael


(Michael Friedrich) #3

That’s “by design”. I haven’t found a way to replace the logo just for one theme, my CSS foo is not that good and my research did not unveil anything on meta.discourse.org … well, and actually I was fixing two Icinga 2 bugs and did only look when it compiled :smile:

Therefore I’ve decided to change the logo to something which can be rendered with black and white background, stored in the global site settings. I still don’t really like it, maybe I would just go for the atomic icon only.

Cheers,
Michael


#4

I took a little dive into this and found probably a solution for this.

As far as I understand this you need to place the CSS into the theme where you want a different logo. I couldn’t test this in a Vagrant box/docker container because I didn’t find a fast and almost automated way to setup a testing environment. :sweat_smile:

Regards
Michael


(Michael Friedrich) #5

I’ve been doing that already, and it did not work unfortunately (cache cleared, dev console, etc.). Thanks for looking though. Don’t waste time with a test setup in Vagrant, that’s a bit complicated with the requirement of a mail server. I’ll just test in production here :wink: