Dark mode

What is Dark Mode?

Dark mode is a display setting where a website or application's interface uses dark backgrounds (typically near-black or very dark gray) with light-colored text and UI elements — the inverse of the traditional light-background design.

Popularized by operating systems like macOS, iOS, and Android, dark mode has become a mainstream user expectation on websites. Websites that respect the user's OS-level dark mode preference using the CSS media query prefers-color-scheme automatically switch between light and dark modes.

Why Dark Mode Matters

Why dark mode matters: User preference (a significant portion of users prefer dark mode, especially for evening use), Eye strain (in low-light environments, dark mode reduces fatigue for many users), Battery life (on OLED and AMOLED screens, dark pixels consume less power), and Aesthetics (for certain brands — technology, creative, entertainment, gaming — dark mode can naturally express the brand's sophistication).

Implementing dark mode properly requires: designing a complete second color palette with appropriate contrast, ensuring all UI states work in both modes, and using CSS custom properties (variables) to swap the entire color system efficiently.

In Webflow, dark mode can be implemented through Webflow Variables and custom CSS that references prefers-color-scheme. At Appsrow, we plan dark mode as part of the design system from the start when required by the project.