Light Mode Doesn't Have To Be Terrible

We all know the feeling. You're browsing a site or using an app. It's black text on a perfectly white background. You don't notice until you click the dark mode toggle how painful it was. You can't imagine a circumstance where you would ever need the most blinding, bright #FFFFFF light in the galaxy shining directly in your face ever again, and from that day forward, in every app you use, the first thing you do is look for the dark mode. We all do it.

It raises the question, why do we even have a light mode option if the dark mode is objectively better? Is it so we can sell the dark mode as a premium feature? I'd say that adds up if more people were using that model.

What if I told you that dark mode isn't necessarily better?

The reason light mode is terrible is because UI frameworks that developers use to implement consistent design are doing it wrong.

This Isn't My Bright Idea

I'd like to start by saying, design is not my strong point. I rely on people that are much better at it than I am to figure out what works and what doesn't and then I implement their patterns into my sites and applications. If your eye is keen you might have noticed this site is hacked from Material Design by Google as a starting point.

Regardless of what you think about how cookie cutter and boring that is, you have to admit it's not a bad starting point. But one of the first things I have to do when I use it is address the worst thing about it.

Stop Using #FFF as a Background

The brightest white that I use on this page is #EEE. It's softer and easier on the eyes. Compare what you're looking at now to the images in these thumbnails. What you're looking at is default Material light mode, and Discord light mode.

It won't look so intense in a thumbnail, but I know you can imagine how bright this is on a full screen. I know because you've eagerly turned it off everywhere that you can, the same as everyone else does. And yet for some reason, the most respected design frameworks from Bootstrap to Material all have this. It boggles the mind, really.

So What, Gray Mode?

Graying the white is the strategy I've used to avoid bright white but there are other things you could do. Another you've probably seen that is a much better light mode than what you've been force fed is sepia.

Imagine if the Discord light mode was sepia. I might actually use it.

What Websites Do Light Mode Better?

Have you seen a site or app that does light mode better? Hop on the board and tell us where to look to draw inspiration.