# Theme Switcher Component
**URL:** https://meta.discourse.org/t/theme-switcher-component/113460
**Category:** Theme component
**Tags:** deprecated
**Created:** [April 4, 2019, 4:52pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460 "2019-04-04T16:52:10Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@B-iggy](https://meta.discourse.org/u/B-iggy)
#### Post date: [April 4, 2019, 4:52pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/1 "2019-04-04T16:52:10Z")
[[deprecated](https://meta.discourse.org/t/theme-switcher-component/113460/40)]
Hey Discourse Community,
after a lot of requests I share a Theme Switcher component, encapsulated from my [Alien Night Theme](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175).
For now, once pressed the button it will switch your theme into a dark mode theme.
Later on I can maybe implement a setting page, where you can define your own global CSS class your theme should switch into.
Or just toggle between the first two themes you allowed for users to choose from…
### Installation & Download
> [@Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682):
>
> bookmark This is a guide for installing and managing themes and theme components in Discourse. person_raising_hand Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…
[https://github.com/B-iggy/discourse-theme-switcher](https://github.com/B-iggy/discourse-theme-switcher)
### Preview
> **['Discourse Theme Switcher' by @B-iggy](https://discourse.theme-creator.io/theme/B-iggy/dark-theme-switcher)**
>
> A customization for Discourse shared on Discourse Theme Creator
If you have feedback or questions, just let me know :slight_smile:
---
### Author:  [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [April 4, 2019, 5:51pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/2 "2019-04-04T17:51:29Z")
> [@B-iggy](#):
>
> Later on I can maybe implement a setting page, where you can define your own global CSS class your theme should switch into.
> Or just toggle between the first two themes you allowed for users to choose from…
You can let admins select which themes they want to use. We have two different themes and each theme has it own dark mode.
> [@B-iggy](#):
>
> If you have feedback or questions, just let me know
When we click the switch to change light to dark, this component below should have change the logo’s color to light as the opposite. Now it doesn’t work with this switch.
[https://meta.discourse.org/t/alternative-logo-for-dark-themes/88502](https://meta.discourse.org/t/alternative-logo-for-dark-themes/88502)
---
### Author:  [@B-iggy](https://meta.discourse.org/u/B-iggy)
#### Post date: [April 4, 2019, 5:55pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/3 "2019-04-04T17:55:04Z")
> [@Anatolia](#):
>
> You can let admins select which themes they want to use. We have two different themes and each theme has it own dark mode.
>
>  B-iggy:
Ok, I’m not advanced in Discourse modding but I try to implement it.
Help from professional guys are appreciated :smirk: @Johani
> [@Anatolia](#):
>
> When we click the switch to change light to dark, this component below should have change the logo’s color to light as the opposite. Now it doesn’t work with this switch.
Hmm, good point. Not sure how I can make a cross-component-compatibility-mode.
I’ll think about it.
Thanks for the first feedback so far!
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 4, 2019, 6:02pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/4 "2019-04-04T18:02:39Z")
Defining the themes in the settings is possible, but will complicate things. The hamburger menu theme selector is a good working example of how you’d change the theme based on ID.
[https://github.com/discourse/discourse-hamburger-theme-selector/blob/master/common/header.html](https://github.com/discourse/discourse-hamburger-theme-selector/blob/master/common/header.html)
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 5, 2019, 2:31am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/5 "2019-04-05T02:31:57Z")
I had some time tonight, so I worked on modifying the hamburger theme selector to toggle between two themes: [https://meta.discourse.org/t/header-theme-toggle/113496](https://meta.discourse.org/t/header-theme-toggle/113496). Thanks so much for inspiring this with your theme @B-iggy!
---
### Author:  [@B-iggy](https://meta.discourse.org/u/B-iggy)
#### Post date: [April 5, 2019, 6:04am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/6 "2019-04-05T06:04:53Z")
Good Morning @awesomerobot ,
oh wow, that was quick :smile:
Much better than I could have done anyways.
I think this topic here is obsolete/redundant then :thinking:
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 5, 2019, 2:44pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/7 "2019-04-05T14:44:02Z")
> [@B-iggy](#):
>
> I think this topic here is obsolete/redundant then
Not necessarily, there are some benefits of switching the CSS rather than switching the entire theme. Everything’s self contained and you don’t need to fully refresh for all the changes to take effect.
---
### Author:  [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [April 5, 2019, 9:03pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/8 "2019-04-05T21:03:58Z")
Your component might be better with some improvements. I hope you continue to develop :handshake:
---
### Author:  [@szergely](https://meta.discourse.org/u/szergely)
#### Post date: [April 6, 2019, 9:29pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/9 "2019-04-06T21:29:13Z")
Awesome plugin! How can i force it to be in the first place (next to the search bar)?
---
### Author:  [@B-iggy](https://meta.discourse.org/u/B-iggy)
#### Post date: [April 7, 2019, 6:06am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/10 "2019-04-07T06:06:40Z")
Good Morning @szergely
glad to hear you like it :slight_smile:
Instead of changing the code on your end I think it makes sense to have it next to the search icon per default.
So I pushed this change now. Let me know if it’s fine :slight_smile:
[https://github.com/B-iggy/discourse-theme-switcher/commit/b223cea92fee96ecd0760e0180e03841c79f010c](https://github.com/B-iggy/discourse-theme-switcher/commit/b223cea92fee96ecd0760e0180e03841c79f010c)
---
### Author:  [@szergely](https://meta.discourse.org/u/szergely)
#### Post date: [April 7, 2019, 8:34am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/11 "2019-04-07T08:34:28Z")
Yes now its there! Thank you for the fast support, i really like this light/dark button! :heart_eyes:
---
### Author:  [@B-iggy](https://meta.discourse.org/u/B-iggy)
#### Post date: [December 21, 2019, 6:50am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/13 "2019-12-21T06:50:58Z")
Unfortunately I can’t edit my own post at the top :roll_eyes:
Hence the important notice that the preview link got updated:
> **['Discourse Theme Switcher' by @B-iggy](https://discourse.theme-creator.io/theme/B-iggy/dark-theme-switcher)**
>
> A customization for Discourse shared on Discourse Theme Creator
I pushed a new version and the regular “Update to Latest” was broken, so I reinstalled it :roll_eyes:
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [December 30, 2019, 12:33am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/14 "2019-12-30T00:33:17Z")
Made it wiki, you should be able to update it now :hugs:
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [January 21, 2020, 10:29am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/15 "2020-01-21T10:29:19Z")
When using Dark mode with Sam’s minimal theme, it looks like this:
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [January 23, 2020, 1:22pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/16 "2020-01-23T13:22:22Z")
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
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [January 28, 2020, 3:05am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/17 "2020-01-28T03:05:05Z")
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.
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [February 17, 2020, 10:21am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/18 "2020-02-17T10:21:03Z")
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:
> **[🚀 Liebling Theme](https://liebling.eddiesigner.com/)**
>
> Thoughts, stories and ideas.
---
### Author:  [@PatrickH](https://meta.discourse.org/u/PatrickH)
#### Post date: [February 28, 2020, 8:04pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/19 "2020-02-28T20:04:43Z")
Can i use this also for the material design theme ?
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [March 26, 2020, 3:06pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/20 "2020-03-26T15:06:51Z")
Is there any way to move the plugin from the header to the drop down user panel?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 27, 2020, 1:14am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/21 "2020-03-27T01:14:33Z")
No trivial way, you would need a new component.
[Next page](https://meta.discourse.org/t/theme-switcher-component/113460.md?page=2)