Dark/Light Mode Toggle

Customization Theme component
,
95

Repro:

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

image
image401×281 5.77 KB

  • 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
image445×222 3.03 KB

Controlled by showDarkColorSchemeSelector and showDarkModeToggle in interface.hbs. See also the comment in interface.js

  @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;
  },
2 Likes