Forum Dark Mode discussion thread 🥹

It seems to be possible to enable an option to have this forum in dark mode. Could this possibly be enabled?

(Disclaimer: I didn’t read the whole thread, but the first post seems to be pretty straight-forward to my not-very-tech-versed-understanding. I can’t find anything regarding colour themes under Preferences > Interface in my profile, so I’m pretty sure it’s not enabled yet.)

2 Likes

Update: I recently completed the advanced user tutorial, and @discobot explicitly sys:

I know it’s barely been a week since I requested this, just wanted to confirm that it must be possible. (And also wanted to quote @discobot, they’re great! Such fun tutorials. :smiling_face_with_three_hearts:)

2 Likes

Hi! To find out what I can do, say @discobot display help.

1 Like

bumping this thread because it’s once again late and dark and my eyes don’t like looking at this website, despite my brain wanting to. :p who do i need to ping to make this happen? :see_no_evil:

1 Like

Reminding us here was good, thank you!

I’ve enabled dark mode but there’s a HUGE caveat: :wink:
A dark mode colour palette had to be created from scratch so I’ve used my absolutely non-existent graphic design skills to choose some colours, with possibly hideous results. THAT will make you sorry you asked! :laughing:

It seems to work okay on my phone with the browser set to dark mode, but it might behave wildly differently elsewhere.

If anyone has any feedback about any text, buttons, etc, etc that aren’t clear enough in dark mode, please post here. In particular, watch for on-hover effects, success/failure messages, and other special / less common elements.

I’ve posted below the colours that I choose. Anyone’s welcome to give us a better palette if you wish.

“Dark Mode Color Palette”: {
“primary”: “ffffff”, # white
“secondary”: “222222”, # black-ish
“tertiary”: “729fcf”, # blue
“quaternary”: “fcaf3e”, # orange
“header_background”: “222222”, # black-ish
“header_primary”: “ffffff”, # white
“highlight”: “8f5902”, # brown
“danger”: “e45735”, # red
“success”: “73d216”, # green
“love”: “fa6c8d”, # pink
“hover”: “babdb6”, # light grey
“selected”: “888a85” # dark grey
}

3 Likes

For anyone who does NOT want the forum to automatically switch to dark mode:

  • click on your profile icon in the top right
  • click the “profile” icon in the drop-down menu that appears
  • click “Preferences”
  • click “Interface”
  • untick the “Enable automatic dark mode color scheme” checkbox
2 Likes

@alys thank you so much, you are a magician!! :face_holding_back_tears::face_holding_back_tears::face_holding_back_tears:

i have absolutely zero graphic design training, let alone with regards to online spaces, so what i notice might all be completely wrong and make everything much worse, but i did bring this upon us, so i absolutely will give all the feedback i can in the hopes that at least some of it might be helpful!

i looked around quickly on my phone and laptop and noticed a few things. but first, possibly relevant info:
i have an android device and use the ecosia browser on my phone. it might also be relevant that my phone has an “eye comfort” blue colour filter enabled constantly, set to the warmest tone possible. i don’t believe that the difference shows up on screenshots, but in case i’m wrong i’ve included one image twice, with eye comfort mode enabled/disabled.
i use firefox on my laptop. i also have night mode enabled on my laptop (almost) constantly, set at 50% when i took the screenshots below. i’m not sure if that will register through the screenshots.

what i noticed:

  • the blue “bookmark” button doesn’t register terribly well as “clicked on,” especially when there’s no clock next to it. it just doesn’t look all that different to me compared to the grey buttons next to it. this is the screenshot i took twice, first with eye comfort mode enabled on my phone:

    and here without eye comfort mode enabled on my phone:

    so that you can see for yourself if there’s a noticeable difference, if that’s useful.

  • when you click on “insert date / time” in a forum message draft, the blue highlighted date / time selected doesn’t contrast terribly well against the rest of the pop-up, but i’m not sure if there’s any need for it to register better:

    also, but this is completely unrelated to the darkmode discussion, when i click on “advanced mode” in this pop-up, the final buttons (“insert” / “cancel” / “simple mode”) are cut off on my phone: image link, not embedded because this is a different problem. this is the furthest down i’m able to scroll. is there a thread for phone/android/mobile forum problems like this already, or should i create one?

  • the profile icon / menu dropdown looks not ideal, the text and background contrast badly for whichever setting is selected. this is especially noticeable when hovering over the text one wants to click on (“invites” in this case), but you can also see it on the bottom right here in this screenshot with the “profile” icon:
    photo_2023-05-07_11-38-20

    the same problem exists on mobile, but it only applies to the little icons on the right side, in my opinion. (you must always know what to click on before you click on it on mobile, on web you can sort of scroll through all options with a mouse and thus see them highlighted maybe before you know which you want to click on.—in any case you might not immediately click on a setting, and when you just hover there and can’t read well what you’re actually hovering over, that’s a bit distracting, i think.)

  • i was going to mention that the “bugabee” category colour is unreadable in dark mode, because it’s black/dark grey, until i noticed that the “meta” category colour is basically unreadable in light mode as well (image link), so this doesn’t feel like a darkmode-specific problem, and is probably too irrelevant in general to warrant addressing in either colour scheme.

  • hovertext looks okay for me! but it also looks identical to how it looks elsewhere, so this is almost certainly a firefox-design on top of any potential forum settings?
    photo_2023-05-07_11-41-47

anyway, thank you so so much for implementing this, @alys!! :face_holding_back_tears::face_holding_back_tears::face_holding_back_tears::face_holding_back_tears::face_holding_back_tears::face_holding_back_tears: it looks amazing already!! my eyes and myself are incredibly grateful to you!! :D :D :D

1 Like

THANK YOU, THIS IS AWESOME!!! I have wanted this for a long time. Is the main site going to get dark mode eventually?

3 Likes

@linux535 You’re welcome. :slight_smile: I’m not able to comment on the main site but I know it would not be as easy to change.

@enbee Excellent feedback, thank you! I’ll look into all of that, although it might not be until the weekend.

Probably best to create one, I’m not aware of an existing suitable thread.

1 Like

When adjusting colors, you can use WebAIM: Contrast Checker to check if the foreground/background contrast is “good enough”! I recommend aiming to pass WCAG AAA.

3 Likes

@rperce That was VERY helpful! Thank you!

@enbee I’ve made some changes to the colour scheme.

The blue bookmark button when it’s been clicked on and the blue colour in the calendar date picker should be clearer now. Both problems were the same in terms of colours, so both have the same fix, which was making the blue lighter.

The on-hover effect for the profile icon > menu dropdown textual links on web should be a lot better - I made the on-hover colour darker.

The on-hover and selected effects for the profile icon > menu dropdown icons are a little better. The colours do pass WCAG AAA contrast. I would have liked to increase the contrast more but can’t do that without affecting other things in less-good ways. I made the selected colour a bit darker (as well as the on-hover colour, from the previous point). The icons have the same colour as plain text (i.e., white) and it’s probably best that I don’t mess around with that much.

For the “bugabee” category colour, as you say it’s not a darkmode-specific problem. The category colours can’t be changed as part of theme changes, so I’d either have to change the bugabee category colour itself for all themes (which I don’t want to do since it might break our habitual recognition of the category) or I’d have to change the dark-mode page background so that it’s less dark, which then has knock-on effects for everything else. So I’m very much in favour of your assessment that it’s “probably too irrelevant in general to warrant addressing” - thank you! :smiley:


More feedback is welcome from anyone, even if it conflicts with what I’ve written here. Some of what I’ve done might have had unpleasant side-effects elsewhere on the site that I haven’t noticed yet, so any reports of ugly / unclear appearances may be helpful. I don’t guarantee that I can make things much better, but I can look into any remaining issues.

Here’s the new colours:

“Dark Mode Color Palette”: {
“primary”: “ffffff”,
“secondary”: “222222”,
“tertiary”: “88E7FC”,
“quaternary”: “fcaf3e”,
“header_background”: “222222”,
“header_primary”: “ffffff”,
“highlight”: “8f5902”,
“danger”: “e45735”,
“success”: “73d216”,
“love”: “fa6c8d”,
“hover”: “3E3F3B”,
“selected”: “545954”
}

2 Likes

Glad it was some help! The contrast tweaks are a great change, dark mode is looking fabulous!

3 Likes

thank your so much, @alys!! it looks amazing! :smiling_face_with_three_hearts::smiling_face_with_three_hearts:

2 Likes