Implement dark theme option

[Biblio]

Invisible writing.

[暁のルナ]

@brandon

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’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.

[brandon]

@暁のルナ

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.

That’d be quite nice, thank you!

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.

[seanblue]

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.

[Megumin]

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…

[brandon]

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.

[Megumin]

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

[brandon]

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

[Megumin]

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

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.

[Megumin]

The Korean release just did some regression on the dark theme

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

[Redglare]

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

[暁のルナ]

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

@brandon sry I never followed up on this . 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

[Megumin]

@Megumin

GO BACK

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.

[seanblue]

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:

[brandon]

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?:

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:

[seanblue]

@brandon

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

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

[enbyboiwonder]

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

[seanblue]

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

[brandon]

@seanblue

Both are hard to read.

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)

[seanblue]

I’ve had that style overridden for so long, so I can’t say. Here’s what I have: