Implement dark theme option

Whoa! Yeah that’s not right …

For context, it looks right in my firefox:

1 Like

Found it on my side.

That field is being triggered by an adblock rule.

3 Likes

Really, huh. Well, if you think it’d be helpful to give more context, send me a DM. Otherwise happy you found the issue.

1 Like

Don’t worry, it’s self inflicted.

That field’s div was probably using the same name as the field div that was showing the e-mail in the front page before you removed it.

1 Like

I am assuming Megumin has access to some kind of test environment?
Or am I blind again? :eyes:

1 Like

See brandon’s post in the general natively chat!

2 Likes

Secret test environment

GO BACK

3 Likes

Cool, thanks. I am now part of the cool kids. :rofl:
Clearly, I do not read enough forum posts. :see_no_evil:

4 Likes

ngl, I kinda like this cyan of the coffee button with the grey:
image

I wonder if it would be too light to be used instead of the cobalt:
image
(Very much like the blueish grey of the Skips, though!)

or maybe a cerulean? :thinking:

3 Likes

Just my two cents but I have a condition with one of my eyes where certain light or bright colour themes can cause me issues with both my vision and tear production so I tend to use dark themes whenever possible or lower brightness if unable to change to a dark theme so I’d love for this to be implemented.

I quite like the lighter grey and the dark blue as they both seem to fit quite nicely and also don’t seem to strain my eyes as much as the darker grey does. My current dark theme is similar to the lighter grey but that’s my phone’s own version so doesn’t work on the main site like this would.

If this is implemented, would we be able to choose from a few options?

3 Likes

I think that could look nice, but feels like a different style. I agree though it could be jazzed up significantly :laughing:

And here i thought the contrast for the skips color was too low with the gray lol

Great to here! Have you checked out the current version in the alpha test? It’s still pretty broken (lots of things to fix) but that’s the general style we’ll be implementing.

As for different theme options, I love to but we’ll have to see how much complexity it adds. I’ve never done a website with multiple theme options before so I’m not entirely sure how much it’d slow me down with new feature development.

I would love a few different options for dark mode though if possible. At least one higher contrast version and one lower contrast version, as I think that’s a large issue for dark mode themes. I also personally love the blue theme. We’ll see though.

2 Likes

I think this is where the css variables are important. For example, Discourse uses variables for everything, and while a new feature might require choosing which variables to use for different components, it should eventually become obvious when to choose which variable (e.g. foreground, background, primary-button, etc.). And even if the choice is arbitrary, as long as the light and dark themes are built with some consistency in mind, whatever variable you choose should generally work well for both themes.

2 Likes

Right - I’m just not a terribly good designer or stylist, so I couched that statement with a caveat :laughing:

CSS variables should make things straightforward as long as you have standard designs and clear standard use for the variables, both of which I’d like to do, but cannot guarantee at this point.

3 Likes

Just had a chance to go check this out and find it pretty good. I like that the lettering isn’t too bright and has that little dimness to it but still contrasts pretty well with the background for me. I’d definitely use this if it becomes implemented. :blush:

Think this would be a great idea for it, one higher contrast and one lower contrast should cover most bases both for people’s personal preference and for those with eye problems where a dark mode helps physically as well.

2 Likes

I’m a light mode user with most things, so I’m not really the target audience, but I figured I’d give some feedback since accessibility in web design is important to me.

I agree that it’s too low-contrast. I’m a fan of the darker grey btw, but that’s mostly because of the higher contrast, and I think you could make the lighter grey work. Also, the blue used is too jarring. I was looking into dark mode design tips for project of mine and found this advice (source: halo lab), which shows basically the same color blue you’re using. Looking at this, I agree that a more cyan than cobalt would be better (as long as it’s not too neon).

Also, just curious, have you and your designer been using accessibility checkers when designing this? I recommend WAVE, also just using F12 works fine too.

6 Likes

These are all good thoughts. TBH I am not a designer by trade and I struggle to distinguish good, practical & accessible designs from just visually attractive designs.

I don’t believe the designer I’m using use those standards. I’ll try to to take a look at some of those thoughts you laid out.

I am finding though that implementing a readable but attractive dark mode design more difficult than a light one. I think the best approach for me is to first get a basic working version out with lots of custom variables and then try and figure out the best color scheme.

Could definitely use a lot more advice and more thoughts on the exact colors we’re using when it’s all rolled out.

3 Likes

Invisible writing. :wink:

2 Likes

I’m also a “developer, not quite designer”, but my previous jobs have involved some level of design and accessibility work - including adjusting color schemes.

If you’re not already aware of them, WAVE - Web Accessibility Evaluation Tool is very helpful for this, as well as WebAIM: Contrast Checker and if you’re on Chrome, https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf (extension version of the WebAIM checker). They’ll basically scan all the code and then tell you where and what the issues are + suggest a resolution. (Note: sometimes they get a little trigger happy

The alpha test looks pretty good overall. I’m probly gonna use it regularly (with some tweaks via Stylebot). If it would be helpful, I’d be happy to create a GitHub gist w/ the classes & attributes that I adjust, and some suggested values, when I have the spare time.

6 Likes

That’d be quite nice, thank you! :slight_smile:

Yeah I haven’t been working on this a lot recently, but it’d be great to improve.

With regards to accessibilty, really appreciate the links. I struggle quite a bit with navigating the tradeoff between having things look nice vs having things be accessible.

2 Likes

I hope this gets worked on in the relatively near future. Unfortunately the WIP dark theme still has too much unreadable text and sections that are still unexpectedly bright to be usable for me.

1 Like