# Light Dark theme toggle button

**URL:** https://meta.discourse.org/t/light-dark-theme-toggle-button/215574
**Category:** Marketplace
**Created:** [January 21, 2022, 5:13pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574 "2022-01-21T17:13:53Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### 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 21, 2022, 5:13pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/1 "2022-01-21T17:13:53Z")

</div>

What would you like done?

A theme component placed in the header to toggle between light and dark theme

![image_processing20200228-29984-1hwepvs](https://global.discourse-cdn.com/meta/original/3X/d/7/d728632b074f205697ef9f0342f75d236b329528.gif)

It can use the [GitHub - discourse/discourse-color-scheme-toggle: Color Scheme Toggler to switch between Dark / Light schemes set by the user's preferences · GitHub](https://github.com/discourse/discourse-color-scheme-toggle) component.

When do you need it done?

Next 7 days.

What is your budget, in $ USD that you can offer for this task?

100$

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 21, 2022, 5:15pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/2 "2022-01-21T17:15:00Z")

</div>

Have you seen this?:

[Alien Night Theme - A free Dark Theme for Discourse - theme - Discourse Meta](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [January 21, 2022, 5:23pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/3 "2022-01-21T17:23:35Z")

</div>

There is also the #Customization > Theme component

> [@Theme Switcher Component](https://meta.discourse.org/t/theme-switcher-component/113460):
>
> [[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 [https://github.com/B-iggy/discourse-them…](https://github.com/B-iggy/discourse-theme-switcher)

---

<div class="post-metadata">

### 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 21, 2022, 5:26pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/4 "2022-01-21T17:26:32Z")

</div>

It uses the alien theme dark mode, is not switching to the default dark theme.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 21, 2022, 5:31pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/5 "2022-01-21T17:31:11Z")

</div>

Have you raised an issue with the author?

---

<div class="post-metadata">

### 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 21, 2022, 5:32pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/6 "2022-01-21T17:32:41Z")

</div>

He hasn’t been active for a while but PM him meanwhile.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 21, 2022, 5:43pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/7 "2022-01-21T17:43:13Z")

</div>

I see you’ve been active in his Topic already a while ago 👍

If the original author is not able to support what you need then please don’t let me stop you hiring someone … as you were! 🙂

---

<div class="post-metadata">

### 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 21, 2022, 5:45pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/8 "2022-01-21T17:45:02Z")

</div>

Sure @merefield, thanks for the pointers.

---

<div class="post-metadata">

### Author: ![Ahmed\_Gagan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ahmed_gagan/32/161985_2.png) [@Ahmed\_Gagan](https://meta.discourse.org/u/Ahmed_Gagan)
#### Post date: [January 21, 2022, 5:50pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/9 "2022-01-21T17:50:28Z")

</div>

Hi @Mr.X_Mr.X  
Can you try this theme component?  
[https://github.com/discourse/discourse-color-scheme-toggle](https://github.com/discourse/discourse-color-scheme-toggle)

---

<div class="post-metadata">

### 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 21, 2022, 5:52pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/10 "2022-01-21T17:52:09Z")

</div>

I’m using this one, is just that I need the button to be in the header and not in the hamburger menu. Users who are not well versed in setting up their interfaces seem to not be aware of the hamburger menu at all.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [January 21, 2022, 5:54pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/11 "2022-01-21T17:54:23Z")

</div>

> [@Mr.X\_Mr.X](#):
>
> I’m using this one, is just that I need the button to be in the header and not in the hamburger menu. Users who are not well versed in setting up their interfaces seem to not be aware of the hamburger menu at all.

This is a pretty good request. When I have some time, I could look into adding a setting for that component to either display it in the hamburger menu, or in the header.

Would you mind closing this current topic, and making this suggestion as an addition on the topic for the theme component?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 21, 2022, 5:56pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/12 "2022-01-21T17:56:27Z")

</div>

> [@jordan.vidrine](#):
>
> as an addition on the topic for the theme component?

FYI I’m not sure that exists, hence all the links to GitHub 😉

---

<div class="post-metadata">

### 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 21, 2022, 6:00pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/13 "2022-01-21T18:00:30Z")

</div>

> [@jordan.vidrine](#):
>
> Would you mind closing this current topic, and making this suggestion as an addition on the topic for the theme component?

Below is the component but as @merefield mentioned it doesn’t have a topic in meta.

[https://github.com/discourse/discourse-color-scheme-toggle](https://github.com/discourse/discourse-color-scheme-toggle)

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [January 21, 2022, 6:43pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/14 "2022-01-21T18:43:01Z")

</div>

Whoa! I can’t believe I never made a topic for this…

_starts making topic_

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [January 21, 2022, 6:50pm UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/15 "2022-01-21T18:50:55Z")

</div>

> [@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…

Here ya go!

---

<div class="post-metadata">

### Author: ![osioke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osioke/32/238946_2.png) [@osioke](https://meta.discourse.org/u/osioke)
#### Post date: [January 25, 2022, 9:04am UTC](https://meta.discourse.org/t/light-dark-theme-toggle-button/215574/16 "2022-01-25T09:04:27Z")

</div>


