Why Light and Dark Mode Weren't Enough for Our Volleyball App

Most apps toggle between “light” and “dark.” Ours needed more.

When you’re building tools for real-world events—managing volleyball tournaments across gyms, beaches, and low-lit evening leagues—your UI has to flex with the physical environment. The theme system couldn’t just be aesthetic. It had to perform under sun glare, gym lights, and accessible tech setups.

So I ran a full audit. Here’s what I found.

Four Environments, Not Two Modes

We support four environment-based themes:

• Indoor Mode – default light theme for gym lighting
• Evening Mode – dark mode for low-light venues
• Outdoor Mode – max-contrast theme for sunlight and glare
• Accessible Mode – high-contrast option for visual impairments

Each theme is implemented via CSS custom properties with semantic naming (--foreground, --muted, --accent, etc.) to support clarity and override consistency.

What Worked

Strong contrast ratios (13:1–21:1) across all environments. Brand colors held up across light/dark variants. The semantic token structure made overrides clean and maintainable.

What Didn’t

High-contrast mode was incomplete—8+ CSS variables were missing. Inherited colors broke expected contrast. Outdoor mode was too bright; dark teal and gold weren’t visible in real sunlight, and pure white backgrounds created reflection. Indoor mode had muted text that was too light. Evening mode slightly overshot brightness on secondary elements.

The fixes were straightforward once I saw them: defined a complete high-contrast palette, darkened key colors for outdoor use, replaced shadow reliance with bold borders, and tuned the muted values.

Testing Reality

Automated tests covered contrast ratio validation, CSS variable completeness, and WCAG linting. But the real validation came from manual testing: sunlight tests on real devices, evening tests in low-light, screen reader plus high zoom, color-blind simulation.

The uncomfortable truth? All themes hit 4.5:1 or better for normal text, but I didn’t catch the missing high-contrast variables until I actually tested on a beach court with a sun-drenched iPad.

The Shift

I used to think about themes as aesthetic choices. Now I think about them as environmental constraints. Real users don’t care if dark mode looks cool—they care if they can read pool assignments at 10AM on a beach court.

Don’t design themes. Design for environments. How does your UI perform in the places your users actually live?