Visual Design
Dark Mode
Dark mode is an interface built on dark surfaces with light text and elements. It is offered as an alternative to the traditional light, paper-like background.
Why it matters
Many people prefer dark mode in low light or to reduce glare, so it is now a common expectation. Designing it well means more than inverting colors, which is a useful thing to learn early.
In depth
A key principle is that the brightest surface usually sits highest in the layering, so raised elements look slightly lighter rather than relying on shadows alone. Light-mode colors rarely translate directly: fully saturated colors often need toning down, and pure black backgrounds can feel harsh, so dark grey is common. Pure white text on black can also strain the eyes, so a slightly dimmed white reads more comfortably.
Real-world example
Many apps let you switch to a dark theme at night, swapping a white background for a deep charcoal one with softer, lighter text.
In dark mode the lightest surface comes forward, not the darkest.
Related terms