Header Theme Toggle

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

ezgif-1-3a57fa471d85

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

:man_shrugging: How do I install a Theme or Theme Component?

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

:warning: 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

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

47 Likes

I like it, but it doesn’t play well with Hamburger Theme Selector

3 Likes

Ah, right I shouldn’t be reusing the same widget name there. I’ve just fixed it, so it should be better if you update the component.

8 Likes

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

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…

This is a great component Kris, thanks!

Just a quick suggestion, is it possible to remove the link from the current active theme? If a user is already on that theme they probably do not need to click on it again (or was there some thinking behind them both being links?)

1 Like

No reason really, I’ve just made a change that checks if the clicked theme is already selected (and it will no long change the cursor as if it’s a link).

4 Likes

Awesome, thanks Kris!! It’s perfect :ok_hand:

1 Like

For some reason, this isn’t working correctly for me in the same way on both my site and the Discourse Theme Creator (when converted to a theme).

It is technically there, but it’s very small (pictured below in Discourse Theme Creator) and you can change the theme if you click and drag around the area where it is for a bit.

I just tested it and it still works for me… I would double-check that both the themes added to the component’s settings have the “theme can be selected by users” box checked (in the individual theme’s settings)

1 Like

Hey, I can’t see Theme settings or confirmation of this plugin when installed :frowning: