Adding a dark mode đŸ•¶

HanziHero Feedback
1

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.

3 Likes
2

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
3

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.

3 Likes
4

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.

image
image1250×703 31.8 KB

image
image990×1834 140 KB
image
image990×1834 84.7 KB
image
image990×1834 81.8 KB

5 Likes
5

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:

2 Likes
6

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

7

Any update on a dark mode? To do my reviews at night on a big screen is really killing my (old) eyes. :disappointed:

I have seen the extension someone came up with above, but I can’t use it in my current set up


2 Likes
8

Dark reader Firefox extension works great with Hanzi Hero on desktop and mobile. I have not noticed any errors.

1 Like
9

Well, I don’t use Firefox. :slight_smile:

1 Like
10

Dark mode would be nice to support! We haven’t really prioritized it, especially because of the workarounds in this thread :sweat_smile:

11

It looks like the Dark Reader extension also exists for Chrome. I haven’t tried it though, for either Firefox or Chrome. May be worth a shot.

1 Like
12

I already use a different extension (Lunar Reader – I did use Dark Reader before but it doesn’t work with local websites, so it was a no go for me) and it kind of does the job indeed, but
 that’s besides the point. Hanzi Hero should just offer a dark mode. It’s really straightforward to do for a website like Hanzi Hero, as evidenced by Tom above.

Anyway, the reason that I would like a “native” dark mode is that I use Hanzi Hero on both my phone and computer after having created a web app version of Hanzi Hero (e.g., on macOS: log in to Hanzi Hero using Safari, click on the Share button and then select the Add to Dock the menu item). In other words, I cannot use any extension, theme, etc. just whatever Hanzi Hero comes with.

13

Well
 I can actually do the same as Safari using Chrome and thus take advantage of the Lunar Reader extension. Not ideal though


14

Well, I ended up using Tom’s CSS, made sure it works for the home page, and then created a web app using Chrome. Can’t do this on my phone though


2 Likes
15

I use Dark Reader on Firefox for Android but it’s kind of unreliable, ie it periodically glitches out and shows light mode instead (eg sometimes when navigating back a page)

1 Like