Designing dark mode without the headaches

Designing dark mode without the headaches.
How we designed the dark theme for Shortwave without doubling the amount of work for designers and engineers alike

Read in full here:

This thread was posted by one of our members via one of our news source trackers.


Corresponding tweet for this thread:

Share link for this tweet.


Before reading it: Use CSS Variables and content based names properly and have a half decent architecture and DO NOT USE JAVASCRIPT TO SELECT DARK MODE OR NOT, rather use media queries built in to CSS so you don’t get a flash of unthemed content.

After reading it: Oh, this isn’t about a website but rather a… native app I think? Can’t recall having heard about Figma at least. But yeah, good naming, etc…


I read the title quickly, and thought the article was about how dark mode can cause headaches ^^’

does anyone else suffer with this? I really can’t stand dark mode longer than a few minutes before my sight to get “blurry” =/


I cant stand light mode, makes everything blurry to me and headache’y, dark mode is an absolute must for me. I’ve never heard of dark mode “causing” headaches, considering the cause I’ve heard of that, the Brightness, isn’t there then. Have you had your eyes checked? Maybe they can’t focus properly, that can indeed cause headaches.


I guess the problem might be my astigmatism according to this article Is dark mode good for your eyes? Here's why you may want to avoid it.


I’m not a fan of OS dark modes either. Dark mode works well for certain apps, but not for general OS/windows use such as browsing the web… in part because most sites look rubbish in DM :lol:

Might be worth giving the VCS test here a go: What is the comfortable brightness level for you? - #3 by AstonJ :023:

1 Like