Dark Mode

Dark mode is a complete second theme with its own surface colors, contrast rules, elevation logic, and typography adjustments designed from scratch against the same components as the light theme. It exists because users expect products to match their OS preference and because some people cannot stare at white screens for long without real physical pain. The best implementations feel like the same product at night instead of a cheap Halloween filter.

Most teams get this wrong. They treat dark mode as a simple color flip. That approach fails because light mode depends on white surfaces reflecting depth while pure black surfaces absorb it. The entire elevation model breaks. Brand colors turn electric. Text becomes fatiguing. The product starts to feel like two different companies depending on the clock.

The common confusion is that dark mode is just an aesthetic choice or a CSS override. It is not. Real dark mode is a system decision that doubles your token work and your testing surface. Skip the tokens and your product will ship three competing theming patterns inside a year.

Linear nailed this in 2022. Their base surface sits at #0F0F13. Cards step up to #1A1A22. Modals hit #24242D. Text lands at #EDEEF0 instead of pure white. They desaturated their signature blue by 15 percent for dark surfaces. Every component consumed semantic tokens so the switch never broke existing screens. The result feels calm instead of radioactive.

Apple showed the stakes in 2019 with macOS Mojave. Apps that followed their elevation scale kept hierarchy. Apps that simply inverted looked amateur. Battery tests on OLED iPhones showed 30 to 60 percent less display power at high brightness. Users filtered app store results for dark mode support. The ones without it looked outdated overnight.

Ship dark mode when your audience includes mobile users on OLED screens or knowledge workers with light sensitivity. The accessibility commitment is real for migraines and photophobia. Do not ship it if your team will not maintain full contrast audits and parallel image assets. A half-inverted UI creates more support tickets than goodwill. The tradeoff is doubled design and testing effort for a product that feels native everywhere.

Component traps appear immediately. Borders replace shadows as the main separator and must be brightened to #2A2A30. Disabled buttons need higher opacity on dark surfaces instead of washed-out grays. Focus rings require extra thickness or brightness to remain visible. Images shot on white backgrounds need their own treatment or they destroy the entire illusion.

Testing must be ruthless. Drop your laptop to 30 percent brightness in a dark room and walk through every screen. Anything that vanishes or glows gets fixed. Run contrast checks on every semantic token pairing after any change. Capture screenshot diffs between themes on every release. Real phones reveal banding and harsh edges that desktop emulators hide.

Teams that execute dark mode correctly improve their light mode too. The discipline of semantic tokens and per-pair contrast checks forces cleaner primitives and stricter governance. You cannot hide sloppy decisions anymore.

Dark mode done right is invisible. The user simply feels the product respects them at 11 p.m. and on airplanes and in bed. Done wrong it screams incompetence.

Dark mode is not a toggle slapped on top. It is the second full product design that proves whether your system actually works.