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

50 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…

1 Like

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:

Hi @awesomerobot here is another of your beautiful theme-component I am using. Love it!

It was working perfectly until two days ago when I changed from AWS to DigitalOcean and restored the forum. Now the toggle button display a red color which is a real discomfort considering the others colors of my theme.

I tried changing the color profiles, also to create a new one… and finally tried on another Discourse forum I installed at the same time… but without restoring anything.

On the other forum, it is working fine, when I change the quaternary color the toggle button change color too.

Is there a way to make it happen also on the restored Discourse that you can find there ? https://hec.fm

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)
image

1 Like

I just made a change that updates the color variables (we changed some things about them over the past year). If you update the component I’d expect the correct theme colors to work… let me know if you’re still having trouble.

3 Likes

I updated and the right color came back, it’s working like a charm !
Thanks a lot Kris, you rock ! :wink:

1 Like