Theme Switcher Component

Unless @B-iggy can add an option to choose location? :smiley:

It’s not easy indeed.
If you mean something like this I can maybe try to merge it somehow.

I did not test it with every theme but let me know if something breaks.

What do you mean with bottom? This theme switcher component is rather horizontally align. Do you mean to reduce the width?

Replacing the logo based on toggling light or dark mode is not so easy and would require more options. I’ll note it down, maybe for the future.


My idea was in the panel menu (not the user panel menu):

Sorry it must have been a typo. I meant button :smiley: The link to the liebling theme was an example for alternative button

You don’t necessarily need to replace the logo. Maybe just using a fa-icon switching colors and box-shadow via CSS should do the job.

1 Like

It would be best to use this component : Hamburger Theme Selector - #63 by sam

It’s not a switch but what you’re asking might need too much work.

1 Like


Thank you for your component.

I wish this component had the translation support.

Hey @B-iggy thank you for this component!

I got a little confused on how I’m setting the two themes I’m gonna toggle between.
I have the classic “Light” and “Dark” theme and added both on the theme switcher.
When I toggle though it switches to alien theme and not the dark that I’d like to :thinking:

Is there a way to make it use only these two themes that I want?

Thank you for your time and contribution :rocket:


Hey @akapetzoglou1
wow, time is passing by crazy this year. Sorry for the delay. Currently struggling with certain things, hence contributing to Discourse unfortunately falls off.

It is not meant to toggle whole themes. Only a predefined dark and light one, I have configured in the CSS.
I think there is a theme switcher out there, that does what you want.
At least, if I understand it correctly.


Hey @B-iggy

is there any way to use the component to toggle between two color schemes
Now that there is a setting in the user profile for a dark mode, it would be neat to be able to toggle between the regular and the dark one.


Hey Sir I am using this theme component But after using it in classic default theme when i switch to dark mode The admin panel looks like this

All text Goes invisible
i have tried changing secondary color but if i change that it Changes Full theme background also Changes Which i don’t want i only want to change secondary text color so it is visible
Please if u have any solutions share it plz

There’s a theme switcher component in the Air Theme. However, the button is in the hamburger menu. Anyone able and having time to adapt the discourse-color-scheme-toggle with the Theme Switcher Component and have a header button to switch fast between Light and Dark theme?


I would love that too. I was trying to fit in some work to figure it out, but haven’t made any sense of it yet!
I implemented the one you’ve linked, but I was hoping for a you-cant-miss-it kind of header toggle.

1 Like

This theme component have bug, if user set dark mode on him device and set light mode in switch on the forum, logo not change, user view light-logo (for dark mode) on light mode.

This theme component doesn’t work with the sidebar, are there plans to support it? Thanks for considering and for what has been created already!

1 Like

Hi guys,
I’ve been busy the last months but I really wanted to give this component more love again :slight_smile:
I will try to check how much is needed with all the recent changes from Discourse and post an update here.


Alright, after reworking my Alien Night Theme, I realized that this component does not make much sense anymore.

The Dark/Light Toggle component is exactly doing what I tried to do with this component here. But much better.
In the long run, my approach to work with tons of classes and juggle them around, is not maintainable.
Instead this component below is just taking your 2 Color Palettes schemes and flip the proper css variables:

It’s currently, apparently broken (it works in my Alien Night Theme though), but in the future please use it instead.

I set my component here to Legacy/Deprecated for now.

1 Like