Header Theme Toggle

Theme component
1

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

ezgif-1-3a57fa471d85
ezgif-1-3a57fa471d85548×120 101 KB

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

:man_shrugging: Installing a theme or theme component

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

TwoThemes
TwoThemes1380×352 23.4 KB

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

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.

1 Like
7

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…

2 Likes
16

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

2 Likes
22

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: