Discourse auto dark-mode support, need updated Snowdrift theme

Improved Dark Mode support

Prefer seeing white text on a black background? Tired of having to enable a dark color scheme on every Discourse site you visit manually? Discourse now support automatic dark mode. Discourse will detect your system preference, and automatically select a light or dark color scheme as needed.

Admins can enable this feature by selecting the dark mode color scheme with the default_dark_mode_color_scheme_id site setting. Admins may also wish to add separate logos for dark color scheme users via the logo_dark , logo_small_dark , and mobile_logo_dark site settings.

If you have a custom theme, you might need to update the theme to use CSS custom properties for the colors. Without that, the theme might not be compatible with automatic dark mode switching.

Someday, we could update our theming to support this.

I agree this would be nice. However, it still requires us to have a dark color scheme to enable, first.
I actually took a crack at making a dark color scheme a while back and it was surprisingly hard to make a good one with our color scheme.

  • At first I tried to stick as close to the design guide as possible — maintaining green for links & buttons, blue for structural text, red for warnings. This looked nice enough, but was very blue. That’s a problem because (1) there’s the whole thing with blue light at night, and (2) more importantly[1], it impeded functionality. Blue is a dark color, and the range of blues that have enough contrast on top of black or dark gray is not very large. So I either ended up with too-dark elements that you couldn’t see well, or many similar shades of blue that you can’t tell apart, which was a problem because there’s structural elements on the page that are hard to pick out without color — it’s subtle and I don’t remember which ones they were, but I’d constantly get lost when I was looking for things on the page.

  • So, then I tried a different approach: derive a new, redder color palette by imagining what a scene with the Snowdrift colors would look like at sunset[2], then put them wherever they look nice, without regard for the meanings of the colors in the design guide. I didn’t really succeed at the “look nice” part — it ended up looking more like mud.

My takeaway is that if we’re going to have a dark theme, then it’ll need to be made by someone who’s good at that. Maybe if @mray thinks that sounds like fun… (edit: the overall point is that this isn’t trivial, so we have to weigh it against time spent on other things)

To enable the dark theme, you[3] have to go here and check the “theme can be selected by users” box. At this point the light theme is still the default; to use the dark theme for yourself, go to your own interface preferences[4] and select it. Then, to customize the colors, you can go to this page (or just click the “colors” tab from the page with the theme).

  1. after all, some people may want to use the dark theme during the day ↩︎

  2. My inspiration was looking at the drop shadow beneath the top bar, and imagining that this was the line of the horizon instead ↩︎

  3. if you're a site admin, or maybe mods can do it too? ↩︎

  4. If you're logged in this will redirect to your actual profile ↩︎

2 Appreciations

Honestly I’m not interested in spending time in this option for the forum. I know it can be tedious to find all elements and assign colors that still make sense and work, but that takes time. I’m willing to give smug responses to themes people came up with, though :wink:

2 Appreciations