# Dark/Light Mode Toggle

**URL:** https://meta.discourse.org/t/dark-light-mode-toggle/215585
**Category:** Theme component
**Tags:** deprecated, dark-mode-toggle
**Created:** [January 21, 2022, 6:50pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585 "2022-01-21T18:50:36Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [January 21, 2022, 6:50pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/1 "2022-01-21T18:50:36Z")

</div>

> [@](#):
>
> ⚠ this theme component has been deprecated. Please see [Dark/light mode toggle now available in core](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991)

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **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. |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-color-scheme-toggle](https://github.com/discourse/discourse-color-scheme-toggle) |
| 📖 | **New 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

> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=dark-mode-toggle "Ask for support on configuring and using Dark/Light Mode Toggle") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=dark-mode-toggle "A bug report means something is broken, preventing normal/typical use of the theme component") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=dark-mode-toggle "Discussion about the user interface of Dark/Light Mode Toggle, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=dark-mode-toggle "Discussion about how existing Dark/Light Mode Toggle features can be improved or enhanced, and how proposed new features could work")

### Features

This component allows a dark/light mode toggle icon on your Discourse forum. It will also automatically switch if you change your system OS to a mode other than your current color scheme.

You can choose to have the toggle display in the new Discourse Sidebar or in the header alongside other icons.

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/1/7/d170aad7bc2da6e5e8577657aa24c11a530ecf12.png)

#### Sidebar

![Kapture 2022-12-02 at 10.55.59](https://global.discourse-cdn.com/meta/original/4X/4/2/7/427841e02086eb49cd076dc04c1527991247951f.gif)

#### Header

![Kapture 2022-12-02 at 10.57.54](https://global.discourse-cdn.com/meta/original/4X/5/d/2/5d27adb31149c78d28b8b3a867fe63eab575d4a3.gif)

### Important Steps

For this to work properly, at least 2 color scheme choices need to be enabled in your `/admin/customize/colors` area. At least two colors need to have `color scheme can be selected by users` enabled.

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/7/b70d149b335128a5f71914db3f703def1f48376b.png)

A default color scheme needs to be set for dark mode: `/admin/site_settings/category/basic?filter=dark`

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/e/ce09baa36606de7f3d9fcfc8f8e0b986eb4cc783.png)

Once this is done, users should be able to choose between two color schemes as their `light` and `dark` preferences in their user preferences interface menu.

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/8/184e79ce3851b9feb965117b68a97e5e7de00b93.png)

### Settings

| Name | Descriptions |
| --- | --- |
| svg icons | |
| add color scheme toggle to header | Add color scheme toggle button to site header |

| Translation | Default |
| --- | --- |
| toggle\_button\_title | Toggle color scheme |

> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.

> Last edited by @Osama 2025-02-07T02:35:50Z
> 
> > **Check document**
> >
> > Perform check on document:

---

_[View the full topic](https://meta.discourse.org/t/dark-light-mode-toggle/215585)._