# 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:** 95

<div class="post-metadata">

**Author:** ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)\
**Post date:** [May 10, 2023, 2:29pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/95 "2023-05-10T14:29:35Z")

</div>

> [@jordan.vidrine](#):
>
> Im trying to reproduce this locally and even when only one dark color scheme is selectable, I still am seeing the dropdown, instead of the automatic mode. (in admin settings)

Repro:

- out of the box empty Discourse install as of this morning
- see this in my profile → interface

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/e/9/4e9d27d8afb6d327662a716767f10cc937ec3185.png)

- remove dracula, solarized dark and WCAG dark color schemes
- go back to profile
- see the drop down disappear and the “dark mode” heading plus checkbox appear

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/2/6/1261ea54025a9660d2d9570d3d3fc127ca7eccea.png)

Controlled by `showDarkColorSchemeSelector` and `showDarkModeToggle` in [interface.hbs](https://github.com/discourse/discourse/blob/d3a5a493fa89077335968ed04a3dab5fa8885926/app/assets/javascripts/discourse/app/templates/preferences/interface.hbs#L4). See also the comment in [interface.js](https://github.com/discourse/discourse/blob/d3a5a493fa89077335968ed04a3dab5fa8885926/app/assets/javascripts/discourse/app/controllers/preferences/interface.js#L207)

```plaintext
  @discourseComputed("userSelectableDarkColorSchemes")
  showDarkColorSchemeSelector(darkSchemes) {
    // when a default dark scheme is set
    // dropdown has two items (disable / use site default)
    // but we show a checkbox in that case
    const minToShow = this.defaultDarkSchemeId > 0 ? 2 : 1;
    return darkSchemes && darkSchemes.length > minToShow;
  },

```

---

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