Implement dark theme option

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

I still prefer to deal with invisible buttons and fix them manually on my end than the bright theme.

In any case I agree, this PR along Reread support for books, Manually specify favorite books and series and Content Tags / Genre Tags have to be pretty high there in things that would highly improve my experience with Natively…

3 Likes

FWIW, while this PR isn’t super prioritized, those other ones you mentioned are top priority after Korean, along with edition handling.

I’d love to spend some more time on styling though… good to know @seanblue that it’s broken enough where you aren’t inclined to use it.

3 Likes

I’m used to hack my way around websites with adblock cosmetic filters and tampermonkey, but I’m an extreme case :rofl:

3 Likes

that’s fills me with a bit of sadness and terror :joy:

2 Likes

The terror comes when I go to another browser and all my QoL hacks are gone :rofl:.

But yes, from time to time when a new thing is implemented I have to rework them, or disable them to properly report bugs/issues.

4 Likes

The Korean release just did some regression on the dark theme :sweat_smile:

Like the search bar, now it’s noticeable worse to read it:

image

2 Likes

What’s the status on dark theme implementation? Couldn’t find a way to activate it so I guess it’s not ready yet

3 Likes

https://learnnatively.com/?ft=dark should do it

@brandon sry I never followed up on this :sweat_smile:. I don’t use my PC a lot these days, and it hasn’t really been on my mind. If I get to it at any point, I’ll let you know.

Edit: tho now my phone’s back in dark mode, so maybe I’ll pay it more mind

3 Likes

It was shared in the middle of the thread. There’s also the link to change it back in case you don’t like to live with some display/visibility bugs.

I guess I’ll edit the first post to include them.

4 Likes

Sharing my comment from the main product thread, I think the biggest problem with the dark theme right now is low contrast, making it hard to read text in many places. Particularly where the background is also a lighter grey. I’d recommend referencing Discourse’s dark theme or if necessary asking a professional designer to help you out.

For example:
image

3 Likes

Agreed that low contrast is an issue in some areas, but I guess the specific area (your books library items) that you point out was not one I was expecting.

I see this, which i find quite contrasting… is this the same?:
Screen Shot 2024-01-20 at 12.23.23 PM

I know that I prefer lower contrast so there may be some differences of opinion, but definitely want to meet a minimum bar for people.

(my image seems to be a bit better… what browser are you on?)

Edit: This blueish gray color is something I need to fix, which pops up a few places i know:

Screen Shot 2024-01-20 at 12.30.04 PM

1 Like

Your font is slightly bolder, but otherwise they look the same to me. Both are hard to read.

2 Likes

They’re the same, and they’re perfectly legible to me. But I also prefer lower contrast. High contrast tends to hurt my eyes

3 Likes

To clarify, I’m not suggesting white on black, just something in between.

1 Like

I see, interesting. As that’s the basic font color and the standard lighter background, I now understand why you find the dark mode unusable. FWIW I did have a visual designer design that, but perhaps it’s just not enough contrast.

I’ll play around with it today and see what I can come up with for a bit more contrast. Maybe i’ll have to do two templates - one high, one low contrast, but we’ll see. I do prefer lower contrast like Natively to discourse.

You also don’t like the standard AniList dark mode too, right?


Which theme mode on AniList do you use? (I think AniList generally does a good job)

1 Like