Light mode principles
Light mode uses dark text on light backgrounds. High contrast ratios come naturally. Main challenge: avoid eye strain from too-bright whites.
Use #F5F6FB instead of pure #FFFFFF for backgrounds to reduce glare.
Dark mode principles
Dark mode uses light text on dark backgrounds. Challenges: maintain contrast, reduce eye strain, ensure colors remain vivid.
Use #171824 instead of pure black to reduce OLED burn-in and eye fatigue.
Mapping colors across modes
In light mode: Saturated colors, bright backgrounds. In dark mode: Slightly lighter colors, dim backgrounds.
Don't just invert. Purple stays purple, blue stays blue. Only brightness and saturation shift.
Testing both modes
Always test contrast in both light and dark. Use Huelab's contrast checker with your actual background colors. Test on real devices at different brightness levels.