Adding a dark mode 🕶

I love the dark mode on Discourse and GitHub. It would be cool to also have it on HanziHero—the white can be blinding at night.

Designing a dark mode for a website is interesting because you don’t have access to shadows, which is a primary way to convey groupings and define hierarchy. Maybe this is why the dominant UI/UX for the past couple of years has been flat :face_with_monocle:

There are higher priority items currently, but I thought I’d throw this up here and see how many people like light mode or dark mode more.

2 Likes

I am OK with the white mode but having the dark mode as an option would be good in the evening. Especially for people doing their reviews on cell phones.

1 Like

I want to add my support for this, I tend to do a few Hanzis in bed at night before I konk out, next to my wife who is trying to sleep, and if I could go into dark/night mode so my screen isn’t blaring white that would be fabulous.

2 Likes

Here’s a dark mode-esque css theme I whipped up for the review, lessons & study tab a few days ago.

It’s been an absolute unguent to my retinas during late-night reviews. Perhaps it can be of use to you too.

I made the UI dark where possible and changed the element colors to be a little flatter and less saturated.

Works on Chrome (desktop) and Firefox (desktop & mobile). Maybe somewhere else as well.


Installation guide

  1. Install the Stylus extension
  2. Install the theme
  3. If it doesn’t work, make sure the toggle is toggled within the extension’s panel.

You can poke around in the code to make the colors suit your liking. Wouldn’t recommend. I’ve yet to annotate the thing. It’s a mess

Let me know if there are problems with installation or issues with legibility.

Cheers.

4 Likes

This is awesome! Thanks for sharing this! Looks great :smiley:

I can see us adding dark-mode natively within the year, but this is a great stop-gap in the meantime :+1:

1 Like

oh man. when it is possible on chrome mobile, I want want want