Implement dark theme option

Description of your request or bug report:

The site can be a bit bright and hard to look at at night. It would be great if there was a dark theme option.


Alpha test:

The theme option gets saved in the browser session. The only way to go back is to click on the Restore or clear browser data. It is currently not saved to the account.


Trello link:

As discussed, approved :slight_smile:

I’ve been wanting this for a while now, so I had a designer mock up a potential dark theme. Of course the colors are pretty easily changed, but I think it looks pretty awesome! Let me know :slight_smile:





3 Likes

I think maybe it’s a bit too blue. :laughing:

By the way, and this is just personal preference, but I think I prefer when the lighter shade is the main theme and the darker shade is the secondary theme. Let me give you an example.

Here is AniList’s current dark theme:

Here is AniList’s old dark theme, which I actually forced it back to via custom style sheets:

I personally find this second one much easier on the eyes. I find the first one pretty harsh actually, and “harsh” is my same initial reaction to those mockups.

(Unfortunately not much constructive to add since I’m really not a UX specialist.)

5 Likes

I actually think this is mostly due to the juxtaposition between the black here and the dark blue… it looks much less blue when it’s by itself.

I see, hmm. I personally think I like it this way better (and prefer anilists current dark theme) as it decreases the overall ‘lightness’ of the UI. I do understand though your perspective. My guess is that you find it easier to read text on the darker background? Just like it’s easier to read dark text on a lighter background?

I’ll definitely think on that :slight_smile:

Well shoot :joy:. If you found it less blue, would that make a difference? Is the darker foreground a must? Would you still use it?

And let’s see what others think too. I will say that I’m inclined to get a dark theme option implemented first and then debate the finer points of the colors, possibly offering a few options if we find preferences are that wide.

3 Likes

I guess my thing is that a dark theme doesn’t have to mean black or incredibly dark. It just has to not be a bright white (or in Natively’s case tan). I tend to keep the lights dim while using my computer in the evenings, so bright background colors are jarring.

I think it’s a recent trend (last 3-5 years) that dark themes have started using black backgrounds instead of some shade of grey, probably due in part to OLED displays. Before that medium to dark greys seemed to be more popular, and I liked those a lot better.

See the above comment, but also I think it’s generally frowned upon to have too much contrast in dark themes. (This is probably where my “harsh” feeling comes from.) So white on black is not really recommended. (For example, the Discourse dark theme seems to use #222 for its background instead of black, and I think it’s pretty good.) Of course, having too little contrast is bad as well. For example, the blue links on the blue background in the mockups are very hard to read.

The darker foreground is definitely not a must. I just happened to like that better on AniList compared to the opposite (and possibly in part due to their specific color choices).

Less blue would definitely help. I think you’re probably leaning too much into the main site theme. If you could find a way to use more neutral colors for the main background with only a touch of the blue theme I think that would help. (Perhaps some neutral grey background like Discourse uses with the lighter blue still in the foreground parts. Hard to say without a mockup.) I certainly can’t answer “would I still use it” until there’s a final version and I can try it side by side with the current theme. I will say that I use dark themes very often, but there have been times where I don’t because I don’t like the specific implementation.

3 Likes

My first impression is that the neon green buttons look out of place on this blue background, which might also be helped by desaturating the blue as suggested above. Also, I think blue-dark themes tend to shift the hue just a bit more towards purple than what’s in the mockup above, which makes them feel less intense. These are just some quick thoughts though, you’ll have to try out different things and see what works!

4 Likes

I’d have to see it in action to be 100% sure, but as @seanblue said, it looks too blue for me.

It’s probably a thing with the contrasts. For example I find these not really easy on the eyes:

image
image
image

Despite this, I still prefer it over the flashbang white that I get sometimes when I load natively late at night

2 Likes

Fair enough, thanks all for the feedback! I think I agree with you all too after thinking about it more. I have a few more versions, just on the search page. Haven’t focused on the buttons, but the designer I"m working with created a de-saturated dark blue, a super dark gray and then a lighter gray (but could probably still go lighter). What do we all think?@Megumin @Athakaspen @seanblue

LIGHTER GRAY

DARK GRAY

DARK BLUE

3 Likes

I like all of these better! Side by side, I think I prefer the two grays (and if pressed I think the lighter one is my favorite), but I’d probably be fine with any of these color schemes.

1 Like

Indeed they feel better.

By order of preference for me:

Dark Gray
Lighter Gray
Dark Blue

6 Likes

I agree with this too.
The blue is just a little too saturated for me.

1 Like

The blue is cray cray. Go for Dark Gray!

The green buttons still needs to be a little less uhhh vivid.

2 Likes

I like the gray versions more too, with a slight preference for the darker.

The medium blue text on a dark background is a bit hard for me to read. It’s fine when all the words are in English because it’s my native language and I don’t need to clearly see words to understand them, but I have a harder time reading Japanese under those conditions. My phone automatically switches to night mode, changing my Anki background from white to black, and I’ve tried using a bright medium blue shade similar to the ones in these mockups to indicate important words in sentence cards, but it turned out I can’t see them well enough in night mode and ended up using a different color with more contrast.

2 Likes

I might be the only one, but I like the dark blue the best, and then the lighter gray after that. The blue text is a bit hard for me to read on all of them.

1 Like

I like them all, though light grey might be easiest on the eyes. But overall, I’d desaturate or darken both the blue and the green a bit more… the contrast is a bit jarring. :thinking:

2 Likes

I prefer the grey options over the blue option. (Slight preference for the darker grey I think, but the light grey is good too.) I agree that the green is still pretty jarring against the dark background.

1 Like

Thanks everyone for the opinions! I think I’m leaning towards the lighter gray for now.

For the ones who preferred the darker gray, I think the lighter gray looks a little washed out in the image I’ve linked (and I think the darker gray looks better here too), but I think the lighter gray looks better when implemented on the site.

I do think that the grays are a bit boring… I prefer the dark blue too @Mizuki! At some point i’ll probably implement the dark blue as an additional option as it looks much softer and aesthetic to me, but for now, I’ll do the popular and safe option :slight_smile:

Will work on reducing the contrast of those colors!

5 Likes

You could make the grey less boring by still using the blue in the header and footer. If you don’t think it clashes. (Nothing wrong with boring though.)

3 Likes

Issues I found with the Dark mode:

Hard to read (Bad contrast IMHO):

  • Below book/video:

image

  • Graph axis

  • Update button, Kind of Item and %s

image

  • In front page, below grading button text, and also subtitle to “Enjoying natively?”

image

Since you are already playing with CSS, maybe fix the height of the thumbnails on one the update push?

image

If I find more I’ll update, as I still prefer it over light mode, so I might come across more of them.

Edit 1 (Impossible to read text):

2 Likes