What is dark mode in UX design?
Dark mode is an alternative visual theme for an interface that uses dark backgrounds, typically near-black or dark grey, with light-colored text and UI elements. It is the inverse of the conventional light mode, which uses white or light grey backgrounds with dark text. Dark mode became a standard feature expectation after Apple introduced system-level dark mode in macOS Mojave in 2018 and iOS 13 in 2019, making it easy for operating systems and apps to support user preference for either mode. Today most major platforms, applications, and websites offer dark mode as a user preference.
What are the benefits of dark mode for users?
Dark mode reduces the amount of light emitted by screens, which many users find more comfortable in low-light environments and at night. Users with certain visual sensitivities, including some forms of photophobia and migraine, may find dark mode significantly more comfortable for extended use. OLED screens consume less battery power when displaying dark pixels because OLED pixels are individually lit and dark pixels consume minimal power. Many developers and designers prefer dark mode for extended coding and design sessions. User preference surveys consistently show that a significant portion of users, typically 30 to 40 percent in technology-oriented products, actively prefer dark mode.
What are common dark mode design mistakes?
Simply inverting the light mode color palette produces dark mode designs with incorrect contrast relationships. Not all light mode colors invert gracefully: shadows that create depth on light backgrounds become invisible or confusing on dark backgrounds. Colors that met WCAG contrast requirements on light backgrounds may fail on dark backgrounds and vice versa. Pure black backgrounds at #000000 create extremely high contrast that can cause halation, a visual phenomenon where light text seems to bleed into dark backgrounds, making extended reading uncomfortable. Most well-designed dark modes use dark grey rather than pure black for primary backgrounds. Every color in the system must be explicitly designed for dark mode rather than derived mechanically from the light mode palette.