# 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:** 17 **Page:** 2
### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong) #### Post date: [March 27, 2020, 5:51am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/22 "2020-03-27T05:51:18Z")
Unless @B-iggy can add an option to choose location? šŸ˜ƒ ---
### Author: ![B-iggy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b-iggy/32/201234_2.png) [@B-iggy](https://meta.discourse.org/u/B-iggy) #### Post date: [March 31, 2020, 5:32am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/23 "2020-03-31T05:32:27Z")
Itā€™s not easy indeed. If you mean something like [this](https://meta.discourse.org/t/custom-user-menu-tab/130091) I can maybe try to merge it somehow. ---
### Author: ![B-iggy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b-iggy/32/201234_2.png) [@B-iggy](https://meta.discourse.org/u/B-iggy) #### Post date: [March 31, 2020, 5:33am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/24 "2020-03-31T05:33:18Z")
I did not test it with every theme but let me know if something breaks. ---
### Author: ![B-iggy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b-iggy/32/201234_2.png) [@B-iggy](https://meta.discourse.org/u/B-iggy) #### Post date: [March 31, 2020, 5:39am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/26 "2020-03-31T05:39:34Z")
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. ---
### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong) #### Post date: [March 31, 2020, 9:11am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/27 "2020-03-31T09:11:49Z")
> [@B-iggy](#): > > If you mean something like [this](https://meta.discourse.org/t/custom-user-menu-tab/130091) I can maybe try to merge it somehow. My idea was in the panel menu (not the user panel menu): ![Screenshot 2020-03-31 at 11.08.18](https://global.discourse-cdn.com/meta/original/3X/b/3/b3eb8b71850d37fb39666d8c80abb1aedeeae04c.png) > [@B-iggy](#): > > What do you mean with bottom? This theme switcher component is rather horizontally align. Do you mean to reduce the width? Sorry it must have been a typo. I meant button šŸ˜ƒ The link to the liebling theme was an example for alternative button > [@B-iggy](#): > > 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. 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. ---
### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven) #### Post date: [April 1, 2020, 4:15pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/29 "2020-04-01T16:15:11Z")
> [@jrgong](#): > > My idea was in the panel menu (not the user panel menu): It would be best to use this component : [Hamburger Theme Selector - #63 by sam](https://meta.discourse.org/t/hamburger-theme-selector/61210/63) Itā€™s not a switch but what youā€™re asking might need too much work. ---
### Author: ![Rahim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rahim/32/175936_2.png) [@Rahim](https://meta.discourse.org/u/Rahim) #### Post date: [May 12, 2020, 9:55am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/30 "2020-05-12T09:55:27Z")
Hi, Thank you for your component. I wish this component had the translation support. ---
### Author: ![akapetzoglou1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/akapetzoglou1/32/200426_2.png) [@akapetzoglou1](https://meta.discourse.org/u/akapetzoglou1) #### Post date: [October 5, 2020, 2:24pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/31 "2020-10-05T14:24:14Z")
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 šŸ¤” Is there a way to make it use only these two themes that I want? Thank you for your time and contribution šŸš€ ---
### Author: ![B-iggy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b-iggy/32/201234_2.png) [@B-iggy](https://meta.discourse.org/u/B-iggy) #### Post date: [November 25, 2020, 7:43am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/32 "2020-11-25T07:43:13Z")
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. > [@akapetzoglou1](#): > > Is there a way to make it use only these two themes that I want? 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. ---
### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong) #### Post date: [February 13, 2021, 11:20pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/33 "2021-02-13T23:20:11Z")
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. ---
### Author: ![TheSahil](https://avatars.discourse-cdn.com/v4/letter/t/bc8723/32.png) [@TheSahil](https://meta.discourse.org/u/TheSahil) #### Post date: [May 13, 2021, 6:18am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/34 "2021-05-13T06:18:41Z")
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 ![Screenshot (80)](https://global.discourse-cdn.com/meta/original/3X/e/0/e04f7ede386ca521c35b5b95ed1caa8194f8d0c1.png) **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 ---
### Author: ![Mr.X\_Mr.X](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mr.x_mr.x/32/126610_2.png) [@Mr.X\_Mr.X](https://meta.discourse.org/u/Mr.X_Mr.X) #### Post date: [January 20, 2022, 4:23pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/35 "2022-01-20T16:23:07Z")
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? [https://github.com/discourse/discourse-color-scheme-toggle](https://github.com/discourse/discourse-color-scheme-toggle) ---
### Author: ![Tara\_Walton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tara_walton/32/244402_2.png) [@Tara\_Walton](https://meta.discourse.org/u/Tara_Walton) #### Post date: [January 20, 2022, 4:48pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/36 "2022-01-20T16:48:20Z")
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. ---
### Author: ![DragonByte](https://avatars.discourse-cdn.com/v4/letter/d/41988e/32.png) [@DragonByte](https://meta.discourse.org/u/DragonByte) #### Post date: [June 21, 2022, 6:02pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/37 "2022-06-21T18:02:08Z")
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. ---
### Author: ![AquaL1te](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aqual1te/32/201966_2.png) [@AquaL1te](https://meta.discourse.org/u/AquaL1te) #### Post date: [October 4, 2022, 2:37pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/38 "2022-10-04T14:37:09Z")
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! ---
### Author: ![B-iggy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b-iggy/32/201234_2.png) [@B-iggy](https://meta.discourse.org/u/B-iggy) #### Post date: [November 28, 2022, 2:41pm UTC](https://meta.discourse.org/t/theme-switcher-component/113460/39 "2022-11-28T14:41:35Z")
Hi guys, Iā€™ve been busy the last months but I really wanted to give this component more love again šŸ™‚ I will try to check how much is needed with all the recent changes from Discourse and post an update here. ---
### Author: ![B-iggy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b-iggy/32/201234_2.png) [@B-iggy](https://meta.discourse.org/u/B-iggy) #### Post date: [November 30, 2022, 8:58am UTC](https://meta.discourse.org/t/theme-switcher-component/113460/40 "2022-11-30T08:58:16Z")
Alright, after reworking my [Alien Night Theme](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175), 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: > [@Dark/Light Mode Toggle](https://meta.discourse.org/t/dark-light-mode-toggle/215585): > > discourse2Summary Dark/Light Mode Toggle adds a clickable toggle color scheme button in the hamburger menu. The toggle switches between a light or dark color scheme for one theme.hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-color-scheme-toggle](https://github.com/discourse/discourse-color-scheme-toggle)open_bookNew to Discourse Themes? [Beginnerā€™s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features This component allows a dark/light mode toggle icon on your Discourse forum. Itā€¦ 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. [Previous page](https://meta.discourse.org/t/theme-switcher-component/113460.md?page=1)