top of page

Dark Mode

Notice anything different about my website?  Not the words, graphics, or pictures that I use but something else.

It's something that you don't see often because very few websites have it. It's not something subtle, either. It's right here, in your face from top to bottom, left to right, on every page on my site. You're seeing it right now.

Well, the title of this page probably gave it away. You obviously noticed. I mean, you had to notice, but you might not have guessed what I was thinking because it's not really "content" in the usual sense.

Dark mode, dark theme, night mode, whatever you want to call it, is the visual design I chose for my  website.

Dark Mode, the OG

The first (computer) monitor was introduced in the mid 1960s and by the late 70s, they were in common use. People used these monitors to access an on-site "mainframe" computer (there was no public internet in those days). It was much faster, efficient, flexible, and cheaper than the teletype machines (noisy printers with keyboards, basically) that came before.

Those monitors were all dark mode. That is, the screen was all dark (like my website) and the text (no graphics back then) were creating by an electron gun behind the glass front. Basically, an old-school TV set but adapted for computer use. The text was usually green because green is a primary color, it's easy to see, the green phosphors were cheap and high quality, and could be created with a single electron gun.

Color monitors would soon hit the scene. They generally used white text on a dark background. What we'd today call "dark mode".

So, why is everything "light mode" now? What happened to dark mode?

WYSIWYG  (wut??)


Unless you're above a certain age and a geek, you could be forgiven for not knowing what that jumble of letters mean.
 

WYSIWYG (pronounced "wizz-e-wig", the i's are short) = What You See Is What You Get

OK... So what?

WYSIWYG was the popular term to describe a Graphical User Interface (GUI) that mimicked what you'd see on paper. It was most popular when using word processors. It means that your text effects (like italic, bold, underline, etc.) were displayed that way on the monitor. Other paper-like mimicking features included pagination, margins, sidebars, headers and footers, insets, graphics, and pictures, right there on the monitor, formatted just like it would be when printed. Significantly, having a GUI also enabled inclusion of clickable icons for launching your programs and accessing files.

It meant that you could produce and create a document on the screen and see exactly how it'll look when printed, but without printing. That saved paper and ink/toner (far fewer draft printouts) and made on-screen composition easier and faster. This may seem obvious today, but back in the 80's (that's 40+ years ago y'all!), it was groundbreaking.

But to make that whole effect work, to fully mimic paper, it had to be black letters on a white background, just like paper.

And that's how light mode was born. But we didn't call it "light mode" because what came before wasn't called dark mode. If anything, it was called text mode and graphical mode, although those were not universal terms.

And for the years, nay decades, that followed, light mode was just the way it was done.

That was Then and This is Now

Today, we use our computers and devices for waaaay more than word processing. Heck, a lot of us probably aren't "word processing" at all. Yet nearly every website and app we use follows that same decades-old black-on-white theme.

 

But is that really the best way? I say it's not.

Illuminated white screens are blasting our eyes with light. It's not that it's harmful (being outside exposes you to far more light) but it's unnecessary and can be uncomfortable. It's like staring into a lamp aimed right at you. Excess light produces glare which can make it harder to focus on the black text. Dimming the screen helps but reduces contrast which, again, makes it harder to read (but for a different reason).

Using our devices at night is even worse. You certainly already know that reading a bright phone or tablet in a darkened room isn't very comfortable, causing you to squint your eyes. You've probably tried making the screen dimmer and found that making it too dim washes out the text making it harder to read (low contrast) and dulls the colors. Finding the right balance for night reading in light mode is difficult.

Deeper Dive

Let us imagine a screen full of black text, and maybe some pictures or graphics, on a white background, the way most webpages are displayed.

The average number of pixels used to render text on a screen is about 5% to 15% depending on typeface, size, weight, line spacing, etc. And that doesn't even count the space outside the margins -- the sides of your browser screen that are always white with nothing on them. If you count that extra-marginal space, the percentage of text-rendering pixels falls even farther.

But for this example lets assume edge-to-edge text and a 10% midpoint for text pixel density. That means that 90% of the pixels on the screen are emitting (usually white) light so that black text (using 10% of the pixels) can be visible.

That bright light hitting your eyes can cause blooming which can interfere with comfortably detecting the dark pixels. To be fair, blooming can happen in dark mode, too. But because the overall brightness level is reduced in dark mode, the light load hitting your peepers is far less.
 

Text carries the intelligence of what you are trying to read. The non-text (usually white) light only exists to allow the unlit pixels that form the text to be visible. The pixels of white light that aren't immediately adjacent to text-rendering unlit/dark pixels isn't contributing anything. It's just more light in your face.

But what if the actual text is what's lit up instead of everything else? Like what you are reading right now, where the only light hitting your eyes is exactly that which is needed to perceive the text and nothing more. The space between a letter's typographical elements, between each letter, between the lines, and outside-the-margin sides of the browser are all dark. In dark mode, using our example, only 10% of the pixels are emitting light. That's far fewer, an order of magnitude less. It also significantly increases contrast, an important factor in making things readable.

Other Benefits

It's not just comfort in reading. Most modern phones are moving toward OLED (Organic Light Emitting Diode) screens. This means that each pixel emits its own light. To the extent that fewer pixels are emitting light (such as dark mode) that's less battery power being used. You could get an extra hour or two or three of battery life per charge. That makes sense. The screen is the single biggest power draw.

Dark Mode is finally getting some love. iPhone, Android models, Windows, and Mac all offer dark mode. But device dark mode doesn't automatically confer to the websites we visit or apps we use. Websites, like mine, have to specifically include dark mode for you to see it. The vast majority do not. Phone apps are a little better at honoring dark mode but not much. The developer must include that capability.

But there are browser add-ons that can render most websites in dark mode. They aren't perfect but they do work pretty well. And they usually include settings for tweaking dark mode rendering errors for each website to get optimum results.

One such add-on is called "Dark Reader", available for Firefox, Chrome, Edge, and other browsers. Dark Reader is free and doesn't have ads. I love Dark Reader and use it extensively. I experience dark mode almost exclusively now and my eyes are happier for it.

 

Do you want to see a real time dark/light mode comparison? Well, of course, you do.

 

Visit the website www.dpreview.com, a digital photography website that lets you switch between dark and light mode with a single click. After landing on the DPReview home page, look toward the top-right corner for "reading mode".

Click between light and dark and see for yourself, in real time. Which mode is easier to read? Which mode is more comfortable on your eyes? Which mode just looks better especially when looking at various pictures on the site?

​Not everyone likes dark mode. Maybe because they haven't adequately seen it in action or given it enough of a chance. Or maybe they have a relatively uncommon eye condition that dark mode aggravates. Or maybe they just don't like the dramatic visual change.

Give dark mode a proper run and see if you like it. I'm betting you will and I can help you with that.

full_moon.png

Our moon. That celestial object you typically see only at night

bottom of page