OK I think the problem was that with each color scheme the “users can pick this…” or whatever wasn’t checked. works now
2 Likes
I have a syrsnge iddue thsy only seems to affrct 2 category.
If on Dark mode a refresh is displaying the Might Site Logo. .toggling to light back to dark mo resolves it. But will occur agsin on a regresh.
After refresh
Now to be more specific seems to be just the Logos topic. Other topucs in category seem fine. Other topics in this category are unaffected. Might be related to that topic having the 2 logos uploaded in it?
1 Like
Correction it seems to be when the page first loads as well. So maybe an issue wity Discourse’s browser detect dark mode?
2 Likes
I cant seem to reproduce this issue. Would you mind detailing the steps, browser, and device you were using?
2 Likes
Our users reported that after switching to dark mode manually, the forum switches back to light mode automatically once the device goes back to light mode.
To reproduce:
- Set your device settings to light mode
- Enable toggle button in sidebar
- Enable dark mode on your device
- Disable dark mode on your device
→ The discourse instance switches to light mode. Expected behavior is that forum stays in dark mode due to users choice of manually switching
Basically it would be great the get the option of the old behaviour to toggle between dark mode, light mode and automatic switching on/off.
3 Likes
Ivam running android 10 I think on an lg g8x thinq thev9ne with the dual screen case.
If I switch apps when I switch back it seema to load the light theme momentatily before swapping to Dark. Similar to skinning windows. The light logo remains up(mobile logo)
@jrgong explanation of how to reproduce and suspected cause is mine as well.
Browser is in light mode and the toggle is switching/forcing dark mode. Then Discourse is in part switching to light mode
1 Like
I see a momentary flash of the opposing color scheme on refresh or when I open a link in a new tab. I also see a similar flash after posting a new reply for some reason.
I have a light theme enabled, and my OS is set to dark mode. So I see the difference when I’m toggled back to light.
I guess the colors are switched on the client side, but it looks like user settings are left untouched? Is it possible to maybe update the user “color scheme” preference on toggle to avoid this? The client-side switch can provide the seamless transition, and changing the user preference can avoid the brief flash of the opposing color scheme on refresh?
5 Likes
@jordan-vidrine I just wanted to bring this up again. 
2 Likes
It should be showing up in the new header dropdown. (The one that is the “sidebar” but in dropdown form)
1 Like
@awesomerobot and @jrgong just an update. This will be looked into 
2 Likes
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!
2 Likes
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.
3 Likes
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.
When there is more than one dark color scheme that is user selectable, the two drop downs appear and the toggle icon shows.
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.
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. 
5 Likes
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
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.
- On the instance, I set the theme to Light.
- Visit a topic page.
- Initially, the correct logo is loaded but:
- Scroll down and up (header should switch from full logo > topic title > full logo.
- When scrolling back up (e.g. where topic title becomes fulllogo again, the wrong logo (white on white) shows up.
2 Likes
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
- 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
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
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
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