How to make the automatic dark theme the same as the selected dark theme?

[Laurent]

We have a dark theme that looks like this:

When we select the theme in the user profile, it looks as above, as expected.

However when it is enabled automatically via the profile option “Enable automatic dark mode colour scheme”, then it looks like this:

It makes most of the UI dark, but it takes the light theme CSS which means the header ends up like this.

Is there any way to make Discourse strictly pick the Dark theme, including CSS, etc. when it is automatically selected?

---

For information, these are our Light Theme options:

And Dark theme options:

[Lilly]

looks like you’re using 2 different color palettes. Joplin Default and Simple Dark. Are those different?

[Laurent]

Yes, the Default theme with Joplin Default colour theme is the light theme, and the other one is the dark theme. I guess it’s normal they have two different colour themes?

[tobiaseigen]

Many apologies! This is a confusing area in our admin interface, and we are working to improve it currently. I hope I am getting this right but let me explain the current functionality my way.

One change is that we are starting to talk only about “color palette” and no longer “color scheme”. That will change in the UI soon. As of now, palette and scheme are the same thing.

To make use of dark mode support in discourse, I’ve had the best luck with the following:

• have only one theme enabled
• specify the light mode color palette in the settings for the enabled theme
• specify dark mode color palette in the default dark mode color scheme id site setting.
• dark mode operating system setting of your members is respected
• dark mode toggle theme component works to toggle light/dark mode
• your members can see the light and dark mode options in their user preferences (and do not see the theme selector because there is only one theme)

If you have customized your dark theme beyond the color palette used and you don’t want people to use the light mode theme with dark colors, then you can’t use the dark mode selector. You would:

• have two themes enabled
• light mode theme has light colors
• dark mode theme has dark colors
• default dark mode color scheme id setting is not specified
• dark mode operating system setting of your members is NOT respected
• the dark mode toggle theme component does not work
• in your user preferences your members can choose their preferred theme

And finally, if you only want one light or dark theme, just enable one theme and one palette, and don’t specify any palette in the default dark mode color scheme id site setting.

[Laurent]

Thank you for your answer. We actually have three different themes, and two of them are customised with CSS (to change the header for Halloween, Christmas). So if I understand correctly, with this setup it’s not possible to get automatic dark theme to work properly, is that correct?

It’s not ideal but I guess I could live with this. Maybe we need to change our headers so that the light mode header works in dark mode too.

[Jagster (Jakke Lehtonen)]

@Laurent

with this setup it’s not possible to get automatic dark theme to work properly, is that correct?

No, if you don’t offer light and dark color palettes. Yes, if you do.

[Laurent]

I have several color palettes, the main ones being “Joplin Default” (used in the default light theme) and “Simple Dark” (used in the default dark theme).

Is there something I need to configure here to fix the problem I mentioned in the top post?

[Jagster (Jakke Lehtonen)]

Tell what are default color palettes of light and dark in settings of a forum. Set default light in settings of themes. Start using the switcher. That’s it.

The diffuculties starts when an user changes color palettes on personal settings. That is… awful system is too much, but it is hard system to understand. And my opinion is we have too many fallbacks with colors settings are here, there and everywhere. Palettes should set only in themes. Sure, that limits user’s option to choose colors, but…

[Moin]

@Laurent

Is there something I need to configure here to fix the problem I mentioned in the top post?

How did you customize the header? The problem is that your header customization depends on the theme selected, but the dark/light toggle only changes the color palette. The result is the same if you select the dark palette in combination with the light theme in your preferences.

The Versatile Banner uses different background images and colors depending on whether a light or dark color palette is active. You could do something similar for your header.

[Laurent]

Yes the header is indeed set via the custom CSS of each theme. Is there any way to identify that the current color palette is dark or light?

I tried the following:

@media (prefers-color-scheme: dark) {
  .d-header {
    background-image: url(https://imgur.com/LdcvIcp.png); /* Dark background image */
  }
}

But that didn’t work while the dark color palette was active, and just to be sure I tried the same with @media (prefers-color-scheme: light) and it works. So it seems that the dark color palette identifies itself as a light color scheme somehow? Any other way to know that the current color palette is the dark one?

I looked at the HTML and search for “dark” but nothing useful came up. I was hoping there could be a top selector like .is-dark-theme that would tell me that.

[Moin]

Does tbe way the versatile banner changes the background work? You could install the component, add a background image for dark mode and try by using the preview.

Then you could use dark-light-choose which was for example explained in Update themes and plugins to support automatic dark mode - #5 by pmusaraj and is also used for the banner

discourse/discourse-versatile-banner/blob/da2beb71a367506ceb51ae606d18e656707d018c/common/color_definitions.scss