Dark/Light Mode Toggle

theme-component
83

It should be showing up in the new header dropdown. (The one that is the “sidebar” but in dropdown form)

1 Like
84

@awesomerobot and @jrgong just an update. This will be looked into :+1:

2 Likes
85

Unfortunately it did not. But I now know why.

navigation_menu is set to Header-Drop-Down but I could not see the option. But when I turned off add_color_scheme_toggle_to_header it appeared in the drop down. So it seems that it only shows at one location.

Thank you! :slight_smile:

2 Likes
86

This component is able to select between “light” and “dark” color schemes, but it does not switch between light and dark modes, as in: @media (prefers-color-scheme) is not honored.

A theme component that looks like this

CSS

@media (prefers-color-scheme: light) {
    .darkonly { display: none; }
}
@media (prefers-color-scheme: dark) {
    .lightonly { display: none; }
}

and HEAD

<script type='text/x-handlebars' data-template-name='/connectors/above-site-header/darkdetector'>
    <span class="darkonly">Dark</span><span class="lightonly">Light</span>
</script>

Will show the text “light” even if dark “mode” is enabled (or better phrased: will say “dark” or “light” depending on the operating system dark mode, and regardless of the chosen color scheme).

Is there any solution for this? There are quite many things that depend on those media queries.

2 Likes
87

If discourse is similar to windows xp try having the browser/os in light mode and have duscourse in Dark mode. In windows xp the color scheme is always overlayed overtop of the default.

88

When there is more than one dark color scheme that is user selectable, the two drop downs appear and the toggle icon shows.

image

When there is only one dark color scheme that is user selectable, the Dark drop down disappears and instead, the “automatic dark mode” checkbox appears.

image

When a user thinks “Hey, I don’t want it to be automatic, I want to use the toggle” and deselects the “automatic” checkbox, the toggle disappears.

So to get the manual toggle, you have to enable automatic switching. :thinking:

5 Likes
89

So the notch on an iPhone gets its color using the

<meta name="theme-color" media="(prefers-color-scheme: ...)" content="#...">

tags that are injected into the header HTML. That means that if your device is in dark mode and the toggler has selected a light color scheme, or when the device is in light mode and the toggler has selected a dark color scheme, the iPhone notch color is off.

1 Like
90

I think this behavior is not wanted:

Currently system color is set to Dark mode. I use a black/white logo for light/dark theme.

  1. On the instance, I set the theme to Light.
  2. Visit a topic page.
  3. Initially, the correct logo is loaded but:
  4. Scroll down and up (header should switch from full logo > topic title > full logo.
  5. When scrolling back up (e.g. where topic title becomes fulllogo again, the wrong logo (white on white) shows up.
1 Like
94

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)

95

Repro:

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

image

  • 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

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
96

:star_struck: Thanks for such a detailed response. I was only “not allowing” these dark themes to be selectable, I will now do some testing with deleting these themes all together.

1 Like
97

So yes, this is a good edge-case you’ve found. This toggle will only work in this scenario if the user also has this discourse-core personal preference enabled.

We will work on getting this working in that instance as well.

4 Likes
99

I think I have a fix for this now in FIX: Case when user has disabled auto-switching by pmusaraj · Pull Request #24 · discourse/discourse-color-scheme-toggle · GitHub, can you give that a try @jordan-vidrine.

To be clear, the PR addresses this use case:

When the user has disabled auto-switching, the component will now make a request for the site’s default dark color scheme. If there is one, it will load it, and then it will be able to toggle it.

4 Likes
100

For weeks the dashboard notifies me that this component is not up to date . But there is no update. Where is the bug…

1 Like
101

It is telling you this specific component is out of date? Can you share a screenshot?

102

Screenshot from 2023-07-07 18-29-43
Screenshot from 2023-07-07 18-29-57

1 Like
103

Would you mind trying in a different browser? I wonder if this could be cache/history related.

104

this survives both the emptying of caches and the switching of browsers, it has also persisted for the last couple of weeks now, I am only now at the point of being annoyed enough to report it :wink:

105

This is going to sound like a very “IT” response lol, but would you mind trying to uninstall it, and reinstall it?

2 Likes
106

It is a valid response LOL :slight_smile:
So disabling and enabling didn’t do the trick but deleting and reinstalling it seemed to have eliminated this update nag. I will keep an eye out and report back should it return. Thanks for indulging me :slight_smile:

3 Likes