Dark Mode
A display setting using light-colored text and elements on dark backgrounds.
Definition
Dark mode is a display option using light-colored text and interface elements on dark backgrounds, inverting the traditional light-mode presentation. Dark mode has grown from niche developer preference to mainstream feature, supported natively by operating systems and expected by many users.
Implementing dark mode requires thoughtful design—not just inverting colors but considering contrast ratios, image treatment, shadows, and maintaining brand identity across modes. CSS features like prefers-color-scheme enable automatic detection of user preferences.
Why It Matters
Dark mode has significant user adoption—many prefer it for reduced eye strain, battery savings on OLED screens, and aesthetic preference. Not supporting dark mode increasingly feels like a gap in modern digital products.
Dark mode implementation also demonstrates attention to user preferences and modern development practices.
Examples in Practice
A productivity app's dark mode becomes its most-requested feature, with 40% of users enabling it immediately upon release.
A media site's dark mode reduces battery drain for mobile readers, improving session duration on mobile devices.
A SaaS dashboard adds dark mode after user feedback, improving satisfaction among users who work in low-light environments.