Many phones use dark mode. Some browsers and apps adjust website colours automatically, and many visitors prefer dark interfaces.
Should your landing page support dark mode?
Most landing pages use a single light design, which is fine if it is set explicitly. Problems arise when parts of a page follow the system theme and others do not, producing unreadable combinations.
If you support both themes
- Define colours as variables for light and dark themes.
- Check contrast in both; use our contrast checker.
- Create lighter and darker shades with our colour shades generator.
- Use logos with transparent backgrounds that work on both, or switch versions.
If you use one theme
Set background and text colours explicitly so browsers do not invert them unexpectedly.
In-app browsers
Visitors from Instagram and Facebook ads open pages in in-app browsers. Test there in dark mode.
Read landing page colours.
Want the full picture? This article is part of Landing pages: the complete guide, our in-depth guide with everything in one place.
