How to change theme on the fly?

Hi. I am trying to figure out how to change the theme on the fly as under User -> Preferences -> Interface -> Theme.


When you choose a theme from this dropdown box you can see the effect immediately. I want to have this behavior on some links but I don’t know how to do it. I tried looking at Sam’s Hamburger Theme Selector but I did not figure out how he did it, since I do not know JavaScript that much. Is there a way to do this? My final goal is to assign this events to a button to toggle between two different themes, which are designed to be day and night themes. Sam’s solution refreshes the page but the already present solution in the User Preferences page is what I am looking for.

2 Likes

I went for a full refresh cause themes can ship JavaScript, the text size solution and theme solution work on that specific page cause next navigation will trigger a full refresh.

Technically I guess we could add a theme setting on hamburger theme selector to update on-the-fly and trigger a full refresh on next navigation. Since we are exercising our theme system at the moment I think adding a setting like this makes sense. @david can you add it?

5 Likes

The hamburger theme selector now has an option to change the theme CSS ‘on-the-fly’, and then trigger a reload on the next page navigation.

https://github.com/discourse/discourse-hamburger-theme-selector/commit/8e20b1cc9a958955845deaf44ed1e6a389c9d7ed

I’ve put this behind a setting, and toggled it on Meta so you can try it out. Would you like me to make it default @sam?

@ggurbet to answer your #dev question directly, you can change the theme immediately by using

var themeSelector = require('discourse/lib/theme-selector');
themeSelector.previewTheme([themeId]);

That will set the CSS on the current page, but will not save the setting. If you want it to persist across navigations you also need

themeSelector.setLocalTheme([themeId], seq);

Check the code for the hamburger theme selector to see how to obtain a value for seq - you need to make sure not to cause an error for anonymous users (set the seq to 0 in that case).

11 Likes

@david that was fast, thank you! This is exactly what I wanted. I will now try to implement your solution for my forum.

4 Likes

I think you broke something. Because to try it out, I was playing with the themes on the hamburger menu. Then I clicked on Minima and now I’m stuck with it! The Minima theme doesn’t have theme selector in the hamburger menu so I went to my interface settings. I can choose another theme there and save the changes. However when I load any other page, I have the stupid Minima theme again. Nothing seems to help.

Yeah, this is a bug which has been around for a long time - it’s not related to these changes. You can get around it by going to your interface settings and unchecking the “set as default theme on all my devices” box, then save your changes.

It’s on my list to fix it properly.

9 Likes

That helped, thanks. What an annoying moment it was. :slight_smile:

1 Like