Theme Switcher Component

Also is there any workaround to add an alternative logo? My current one is not readable on dark bg, hence I want to add a inverted one for the dark mode

My theme has lots of hardcoded colors and only works properly with a light color scheme. Open to fixing this but for now it does not work right in dark mode.


Any thoughts about making the bottom smaller? When using additional component, it takes a lot of space in the header. For example I like the dark mode button in this ghost theme at top right:

Can i use this also for the material design theme ?

Is there any way to move the plugin from the header to the drop down user panel?

No trivial way, you would need a new component.

1 Like

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.