Dark mode

Overview

Dark mode is a display setting that switches the colors of an app or website to "light text on a dark background." The traditional "dark text on a light background" is called light mode. iOS, Android, Windows, and macOS support system-level dark mode.

Benefits of dark mode

One benefit of dark mode is less strain on your eyes in dark surroundings. When you use a smartphone at night, a white background feels glaring. Switching to dark mode lowers the brightness of the whole screen and softens the stimulus to your eyes.

On devices with an OLED display, it also cuts battery use. OLED turns off the light from black pixels completely, so the more dark areas on the screen, the lower the power use. LCD displays keep the backlight on all the time, so they don't get this benefit.

Implementing dark mode on a website

To implement dark mode on a website, use the CSS media query "@media (prefers-color-scheme: dark)". This media query applies when the user has chosen a dark color scheme in their OS or browser settings. In Tailwind CSS, you can write dark mode styles concisely with the "dark:" prefix.

As a point to watch when implementing it, simply making the background black and the text white is not enough. One approach is to use dark gray (around #1a1a1a) instead of pure black (#000) for the background, and off-white (around #e5e5e5) instead of pure white (#fff) for the text. You also need to check that images and icons don't look out of place in dark mode.

Dark mode and accessibility

Dark mode also matters for accessibility. For users with light sensitivity, a bright screen can cause headaches or eye pain. Offering dark mode is a consideration that helps these users use a service comfortably.

However, dark mode doesn't suit everyone. Users with astigmatism may find light text on a dark background hard to read. What matters is that users can choose a mode based on their preferences and situation, and that neither mode is forced on them.