Dark/light mode toggle now available in core

[Osama]

The Dark/Light Mode Toggle theme component, which adds a toggle to allow users to easily switch between light and dark modes, has been merged into Discourse core and it can be enabled via the interface color selector site setting.

In addition to various bug fixes and improvements, the core version differs slightly from the original theme component in that it has a third “Auto” option which makes the site’s color mode match the system preference of the user’s device.

The color selector can be configured via the interface color selector site setting to appear either in the site header next to the search icon, or in the sidebar footer.

Here’s a screenshot when it’s in the sidebar footer:

And this is when it’s in the header:

Existing users of the theme component

We’ve deprecated the theme component and pushed a final update to make it detect if the core version is available and alert admins to delete it and enable the core version. Here’s a screenshot of the admin alert:

Once the core version is enabled, the theme component will no longer have an effect on your site. However, you should still completely delete it to prevent potential breakages in the future since we will no longer do any maintenance for the theme component.

[Kevin7 (Kévin .)]

Hello, thank you for this new feature, but I wonder why the buttons still have black text and icons when switching to dark mode instead of simply turning white. How can I make the text and icons on the buttons turn white when dark mode is active? Thank you.

[Osama]

@Kevin7

I wonder why the buttons still have black text and icons when switching to dark mode instead of simply turning white. How can I make the text and icons on the buttons turn white when dark mode is active?

Can you share a screenshot of the issue you’re seeing?

[Kevin7 (Kévin .)]

Here’s an example: when I switch Discourse to Dark Mode, some button texts remain black. I believe it would make more sense for the text to be white. However, I found a solution using CSS that I think works well to fix this issue.

$button-text-color: dark-light-choose(#ffffff, $primary);

:root {
  --button-text-color: #{$button-text-color};
}

.btn-primary {
  color: var(--button-text-color) !important;
  
  .d-icon {
    color: var(--button-text-color) !important;
  }
}

[Osama]

@Kevin7

some button texts remain black.

That’s an intentional design decision on our part for primary buttons (the ones that have a blue background in the default color palette), so we won’t be changing it for everyone. That said, Discourse is very flexible and has a theming system for overriding core CSS.

[joo (slower)]

I have already made the setting, but I am unable to see the option. Could you kindly explain the reason?

[Osama]

Do you have a light and dark palette selected in your preferences at /my/preferences/interface? The toggle will only appear if both a light and a dark palette are selected:

[patrickemin]

Hi, I do not see that color palette setting in my preferences, only “Theme” and “Dark mode”:

[Osama]

I believe if you enable the dark mode checkbox (I assume “Mode sombre” means dark mode in French), then the toggle will appear for you. Can you give that a try?

The color palettes preference in my last post above shows up if your site has multiple dark palettes that users can select from. If there’s only 1 color palette available, the dropdown menu is replaced with the checkbox that you see.

[Andrew_Rowe]

Really sorry… where is the setting for turning this feature on?
It doesn’t need install?
with new admin interface I’m a little disheveled

[StefanoCecere]

doesn’t show on mobile / iphone

on desktop: perfect.

i remember previous version (the Component version) showed.

[Jagster (Jakke Lehtonen)]

Just showing that some iPhones and forums works.

It is in the core… that means it should show up when trying safe-mode, I guess. If that happens then it is conflict with some other componen, theme or plugin.

Otherwise

• Discourse isn’t fresh enough
• the toggle isn’t enabled in the site settings
• dark mode isn’t enabled on site level or in the user settings

[StefanoCecere]

strange because it was working until a few days ago

i’ll come back in a few days… lets’ see
thank you

[StefanoCecere]

i don’t have these two options… just the regular…

[StefanoCecere]

got it! but it was hard
in a mix of several settings and personal preferences… i think we should make it easier to give a theme the two color schemes (dark and light)

[patrickemin]

@Osama

I believe if you enable the dark mode checkbox (I assume “Mode sombre” means dark mode in French), then the toggle will appear for you. Can you give that a try?

Well no, it doesn’t appear in the sidebar footer.

[Osama]

@Andrew_Rowe

Really sorry… where is the setting for turning this feature on?
It doesn’t need install?
with new admin interface I’m a little disheveled

If you go to /admin/site_settings/category/all_results?filter=interface_color_selector on your site you should be able to see the setting.

@patrickemin

Well no, it doesn’t appear in the sidebar footer.

If you switch your system preference in your phone/computer from light to dark (or vice versa), does your discourse interface change to match the system preference or does it remain unchanged (in light or dark mode)?

Given that the core selector is working here and many other sites, there must be a configuration issue somewhere on your end that’s causing the selector to not be shown. Can you share the output of these commands when you run them in your browser console while you’re logged into your account?

(({dark_scheme_id, color_scheme_id}) => { return {dark_scheme_id, color_scheme_id}} )((await (await fetch(`/u/${Discourse.User.current().username}.json`)).json()).user.user_option)

Discourse.SiteSettings.default_dark_mode_color_scheme_id

[patrickemin]

Hi my setting is ok (bottom of sidebar). If I switch to Dark mode on mobile or PC, no it doesn’t give any change, and for the console, I do no know how to use it, sorry

[Jagster (Jakke Lehtonen)]

But your dark color settings in system settings and/or your oersonal settings aren’t propably right.

[patrickemin]

Well probably, I always had difficultly about that type of settings, but it’s not so important, I’ll leave it like that, thanks for trying to help.