The brief
PumpServ needed a straightforward, professional site for an industrial services audience — but rather than treat dark mode as an afterthought, it was designed as a first-class part of the visual system from the start.
Designing two themes, not one with a filter
A lot of "dark mode" implementations are just the light theme with colours inverted, which tends to wreck contrast and flatten visual hierarchy. Here, both themes were designed independently around the same layout — separate colour choices for surfaces, accents and imagery so each mode feels intentional rather than automated.
What went into the build
- A theme system driven by CSS custom properties, so switching themes doesn't require duplicating markup.
- Per-theme image treatments, rather than relying on CSS filters that wash out photography.
- A persisted preference so returning visitors see the theme they picked last time.
Want a site that respects dark mode?
Light and dark mode done properly takes a bit more planning — happy to talk through what that looks like for your project.