Sidebar theme toggle

[awesomerobot (Kris)]

	Summary	Sidebar Theme Toggle adds a theme selector in the sidebar menu’s footer provided there is more than 1 user selectable theme. This selector works with both logged-on users and anonymous users. Be sure to add this to all your user-selectable themes for easy toggling.
	Repository Link	https://github.com/discourse/discourse-sidebar-theme-toggle
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

We may do some additional work here in the future to make this a more comprehensive menu that allows users to choose colors, font-sizes, and theme from one menu — but for now this grants sites the same basic behavior as the Hamburger Theme Selector!

[Jagster (Jakke Lehtonen)]

Will it work someday with iPhone/iPad too?

[awesomerobot (Kris)]

It should already work on mobile devices, but let us know if there are any issues!

[Jagster (Jakke Lehtonen)]

Well… it doesn’t Not here, not on my own.

[awesomerobot (Kris)]

ah I see, I’ll have to double check the app, looks like the footer’s getting cut off there… thanks for mentioning it!

[Jagster (Jakke Lehtonen)]

You are totally right. The issue is the Hub.

[stuwest]

This is a great idea for a component, but I’m having a little difficulty getting it to work. I’ve installed it and included it in all my themes but the drop-down doesn’t appear. If I toggle the “hide theme name” setting, the keyboard shortcut icon moves from the left side of the sidebar footer to the right, but no theme selector.

[davidkingham]

Thanks Kris, unfortunately it’s not working on my site. Did a hard refresh of course, tried different themes that have no other components, don’t see anything relevant in the console or logs…

[MarcP]

Rebuild your instance. It will fix all of the issues mentioned above so far.

[awesomerobot (Kris)]

oh yes, I should have mentioned that if you haven’t updated Discourse in the past few days you should do that as well

[stuwest]

I think I’m on the most recent version…

I’ll try rebuilding later. Our users tend to freak out a bit if the site goes offline with no warning.

[MarcP]

@stuwest

I’ll try rebuilding later. Our users tend to freak out a bit if the site goes offline with no warning.

You should consider this

Add an offline page to display when Discourse is rebuilding or starting up

This guide is intended for advanced users, who are already using nginx outside the docker container. By following this guide you make your setup more complicated and will loose some speed benefits like HTTP2 if you’re not running Ubuntu 16.04 or later. Proceed with caution! When Discourse is rebuilding or starting up, your users will usually either see an error message from their browser… [image] …or a not-so-nice 502 error message from Nginx: [image] If you’re a perfectionist l…

[AquaL1te]

What about a dark theme selector? For light, dark and auto. That seems broken since I switched to the sidebar.

[dodesz (Don)]

Hello,

Thanks for the component

I have noticed a little issue with it. It seems on mobile (I tested on Android 10 Chrome 109.0.5414.117 and iOS 16.1.1 Safari) it only scrollable if the sidebar is scrollable. When the sidebar sections are collapsed the theme toggle is not scrollable for me. Thank you

[Canapin (Coin-coin le Canapin)]

Is it still the case? I can’t repro on my android phone.

[Moin]

I can. I cannot scroll if all sections are collapsed

If the sidebar is scrollable, the menu to choose a theme is too

[Canapin (Coin-coin le Canapin)]

I misunderstood the issue and I after trying again, I experience it as well.

[awesomerobot (Kris)]

I’ve added a fix here:

FIX: always ensure dropdown can scroll on mobile

I’ve updated the component on Meta, and it works fine for me on mobile now! Thanks for reporting it everyone!

[rahim123]

Hi, there has been a regression in the past few days of Discourse commits where the browser / OS scrollbar appears always visible with a few pixels of vertical slop when the Sidebar Theme Toggle is enabled. It’s happening here on Discourse Meta and also on my forum, currently on 3.1.0.beta3 (6b5743ba3c). It happens with Firefox and Chromium. I imagine that nobody has noticed it because most OSes these days are defaulting to skinny / disappearing scrollbars, but I’m rather old-school.

---

Edit: Looks like I can get rid of it with this quick dirty workaround for now:

.sidebar-footer-container {
    padding-bottom: .5em !important;
}