What Dark mode means
Sites can follow the visitor's system setting with the prefers-color-scheme media query or offer a toggle. Dark themes still need sufficient color contrast and should be tested, not just inverted.
Why it matters for your website
Many people set their phone or computer to dark mode, and a site that respects that choice feels polished and easier on the eyes at night. Done badly, it can make your logo vanish or turn text unreadable. If you offer it, both themes need the same care, or you risk looking broken to part of your audience.
Example
A coffee shop's site follows the visitor's system setting, so phone users with dark mode on see warm brown text on a near-black background, with a light version of the logo swapped in.
Tips
- Use the prefers-color-scheme CSS feature so the site follows each visitor's system setting.
- Prepare a logo version that stays visible on dark backgrounds.
- Check text contrast in both themes against accessibility guidelines.
Common mistakes
- Simply inverting colors, which makes photos look strange and brand colors look off.
- Using pure white text on pure black, which can feel harsh and cause glare for some readers.
Questions about Dark mode
What is Dark mode?
A color theme with light text on a dark background, often offered as an option.
Does dark mode affect SEO?
Not directly. Search engines care about content and usability, so dark mode matters only in how it affects readability and user experience.
Should every business website offer dark mode?
It is optional. It suits sites people read for long stretches, but a clean light design that is easy to read is fine for many small business sites.
