Header Theme Toggle

[awesomerobot (Kris)]

I’ve built a simple toggle for the header that switches between two themes on click.

Github repo: https://github.com/awesomerobot/discourse-header-theme-toggle

Install a theme or theme component

In the theme component’s settings, you can define the two themes:

Please note

• Both themes must have Theme can be selected by users enabled, and both themes must also have this theme component added.

• The theme name is used in the toggle. I strongly recommend short names!

• I have not yet added mobile support, so this only works on desktop for now

Inspired by @B-iggy’s Alien Night Theme & Theme Switcher Component, and heavily borrowing from @sam’s Hamburger Theme Selector

[Jugger]

Hey @awesomerobot is there a way to anchor this on middle, left side of the screen and stay middle through scrolling? My header is occupied by a custom button menu so they overlap.

[jrgong]

First of all great nifty component, I love it

A small suggestion: After the click it takes a while until the forum reloads. Can you display a spinning wheel on top of the buttons + grey out the buttons after the click when the reload setting is active?

Otherwise users might get confused why “nothing” is happening for first 3 seconds…

[Ben10]

Love this theme, super useful and just what I needed!
I am however not well versed in webdev and was wondering how difficult it would be to convert this theme to look like the minimalist switch you often see online? (example below)

[awesomerobot (Kris)]

This theme component does not currently work, and would need to be refactored to be compatible with our recent header changes.

If there’s some interest in reviving this, feel free to post here so we know there’s some demand, otherwise check out these other components:

• Dark/Light Mode Toggle
• Sidebar Theme Toggle