# Forum Dark Mode discussion thread đŸ„č **URL:** \ **Category:** Meta\ **Created:** [January 9, 2023, 9:53am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733 "2023-01-09T09:53:53Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![enbee](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/enbee/32/4796_2.png) [@enbee](https://forum.beeminder.com/u/enbee)\ **Post date:** [January 9, 2023, 9:53am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/1 "2023-01-09T09:53:53Z")
It seems to be possible to enable an option to have [this forum in dark mode](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593). 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.) ---
**Author:** ![enbee](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/enbee/32/4796_2.png) [@enbee](https://forum.beeminder.com/u/enbee)\ **Post date:** [January 17, 2023, 7:54am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/2 "2023-01-17T07:54:04Z")
Update: I recently completed the advanced user tutorial, and @discobot explicitly sys: > [@On another topic](https://forum.beeminder.com/t/10746/3): > > As an _advanced_ user, have you visited [your preferences page](https://forum.beeminder.com/my/preferences) yet @enbee? There are lots of ways to customize your experience, such as selecting a dark or light theme. 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. đŸ„°) ---
**Author:** ![discobot](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/discobot/32/1638_2.png) [@discobot](https://forum.beeminder.com/u/discobot)\ **Post date:** [January 17, 2023, 7:54am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/3 "2023-01-17T07:54:06Z")
Hi! To find out what I can do, say `@discobot display help`. ---
**Author:** ![enbee](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/enbee/32/4796_2.png) [@enbee](https://forum.beeminder.com/u/enbee)\ **Post date:** [May 7, 2023, 1:19am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/4 "2023-05-07T01:19:58Z")
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? 🙈 ---
**Author:** ![alys](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/alys/32/4726_2.png) [@alys](https://forum.beeminder.com/u/alys)\ **Post date:** [May 7, 2023, 8:22am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/5 "2023-05-07T08:22:22Z")
Reminding us here was good, thank you! I’ve enabled dark mode but there’s a HUGE caveat: 😉 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! 😆 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 } ![screenshot showing the colours defined by the colour codes listed above](https://us1.discourse-cdn.com/flex019/uploads/beeminder/original/2X/d/d7377c9b01103c53c9eb89e0a8fc672d23a52580.png) ---
**Author:** ![alys](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/alys/32/4726_2.png) [@alys](https://forum.beeminder.com/u/alys)\ **Post date:** [May 7, 2023, 8:26am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/6 "2023-05-07T08:26:39Z")
## 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 ---
**Author:** ![enbee](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/enbee/32/4796_2.png) [@enbee](https://forum.beeminder.com/u/enbee)\ **Post date:** [May 7, 2023, 10:59am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/7 "2023-05-07T10:59:49Z")
@alys thank you so much, you are a magician!! đŸ„čđŸ„čđŸ„č 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:** - 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: - 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](https://us1.discourse-cdn.com/flex019/uploads/beeminder/original/2X/4/4665784549571f116b1cd6ab876c63024dd41309.jpeg) - 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](https://forum.beeminder.com/uploads/short-url/ipywuv2ZaIgtMJhaDTMRDUrwZf4.png)), 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](https://us1.discourse-cdn.com/flex019/uploads/beeminder/original/2X/3/3a35152c7c68a4b724611efd5b9c17c28174f379.jpeg) anyway, thank you so so much for implementing this, @alys!! đŸ„čđŸ„čđŸ„čđŸ„čđŸ„čđŸ„č it looks amazing already!! my eyes and myself are incredibly grateful to you!! `:D :D :D` ---
**Author:** ![linux535](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/linux535/32/4914_2.png) [@linux535](https://forum.beeminder.com/u/linux535)\ **Post date:** [May 7, 2023, 2:29pm UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/8 "2023-05-07T14:29:29Z")
THANK YOU, THIS IS AWESOME!!! I have wanted this for a long time. Is the main site going to get dark mode eventually? ---
**Author:** ![alys](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/alys/32/4726_2.png) [@alys](https://forum.beeminder.com/u/alys)\ **Post date:** [May 8, 2023, 10:40am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/9 "2023-05-08T10:40:47Z")
@linux535 You’re welcome. 🙂 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. > [@enbee](#): > > is there a thread for phone/android/mobile forum problems like this already, or should i create one? Probably best to create one, I’m not aware of an existing suitable thread. ---
**Author:** ![rperce](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/rperce/32/4197_2.png) [@rperce](https://forum.beeminder.com/u/rperce)\ **Post date:** [May 8, 2023, 4:41pm UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/10 "2023-05-08T16:41:20Z")
When adjusting colors, you can use [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/) to check if the foreground/background contrast is “good enough”! I recommend aiming to pass WCAG AAA. ---
**Author:** ![alys](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/alys/32/4726_2.png) [@alys](https://forum.beeminder.com/u/alys)\ **Post date:** [May 14, 2023, 8:54am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/11 "2023-05-14T08:54:29Z")
@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! 😃 * * * 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” } ![Screenshot showing the colours defined by the colour codes listed above](https://us1.discourse-cdn.com/flex019/uploads/beeminder/original/2X/9/99611e752cf25c715e604ad5f6fd8a439db5ca7a.png) ---
**Author:** ![rperce](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/rperce/32/4197_2.png) [@rperce](https://forum.beeminder.com/u/rperce)\ **Post date:** [May 15, 2023, 4:52am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/12 "2023-05-15T04:52:11Z")
Glad it was some help! The contrast tweaks are a great change, dark mode is looking fabulous! ---
**Author:** ![enbee](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.beeminder.com/enbee/32/4796_2.png) [@enbee](https://forum.beeminder.com/u/enbee)\ **Post date:** [May 16, 2023, 9:21am UTC](https://forum.beeminder.com/t/forum-dark-mode-discussion-thread/10733/13 "2023-05-16T09:21:36Z")
thank your so much, @alys!! it looks amazing! đŸ„°đŸ„°