Design Systems
Building Dual Colour Schemes That Actually Work Together
How to create light and dark palettes that feel intentional, maintain visual hierarchy, and keep your brand recognizable in both modes.
Senior Frontend Architect
Marcus Wong
Dark Mode & Theme Switching Specialist
12 years building accessible, high-contrast interfaces for bilingual audiences across Hong Kong’s fintech and e-commerce sectors.
Marcus discovered his passion for dark mode design in 2014 while working on a late-night project for a Hong Kong startup—he realized that most websites at the time simply inverted colors without considering contrast, readability, or user preferences. This sparked a decade-long journey into understanding how light and dark interfaces can coexist seamlessly while maintaining brand identity across cultures.
Over the years, he’s worked with the Hong Kong Monetary Authority’s fintech partners, luxury retail brands, and major banking platforms to implement sophisticated theme-switching systems that respect user system preferences and persist across sessions. His methodology combines rigorous WCAG AA contrast testing with cultural considerations for how English and Chinese typography renders differently under varying lighting conditions.
Marcus has written extensively on CSS custom properties as a scalable solution for managing dual colour schemes and has mentored over 25 junior developers at Chromatic Studios in building accessible toggle components. What drives him is the belief that good design isn’t about looking different—it’s about working harder so users don’t have to think about it.
12
Years Experience
40+
Enterprise Clients
25
Developers Mentored
2015
Started Specialization
Education
Computer Science degree from the University of Hong Kong. Focused on web accessibility and modern interface design.
Current Role
Senior Frontend Architect at Chromatic Studios Limited, leading dark mode implementation strategies for Asia-Pacific clients.
Specialization
WCAG AA/AAA compliance, CSS custom properties architecture, prefers-color-scheme detection, and bilingual contrast optimization.
Focus Region
Hong Kong and Asia-Pacific fintech platforms, e-commerce sites, and banking interfaces serving English and Chinese users.
Core Competencies
What Marcus Specializes In
Deep expertise across the full spectrum of dark mode implementation and accessible theme switching.
Dual Colour Scheme Design
Creating complementary light and dark palettes that maintain brand consistency, visual hierarchy, and emotional impact across both modes.
CSS Custom Properties Architecture
Building scalable, maintainable theme variable systems using CSS custom properties for efficient colour management and rapid iteration.
WCAG Contrast Testing
Rigorous contrast readability testing across both light and dark modes, ensuring AA/AAA compliance for all users and text sizes.
Accessible Toggle Components
Designing theme toggles that respect user system preferences via prefers-color-scheme, persist across sessions, and handle keyboard navigation properly.
Bilingual Typography Optimization
Understanding how English and Chinese text render differently under dark backgrounds, optimizing font weights and letter spacing for clarity.
Theme Performance & User Preferences
Implementing efficient theme detection, localStorage persistence, and zero flash of wrong colour on page load for seamless user experience.
His Approach
How Marcus Builds Theme Systems
01
Colour Palette Research
Audit the brand’s primary colours and define how they need to adapt for dark backgrounds. Test both modes against WCAG standards from day one, not as an afterthought.
02
CSS Variable Architecture
Build a comprehensive custom property system organized by purpose—backgrounds, text, borders, accents—making it easy to swap entire themes without touching component CSS.
03
Detection & Persistence
Implement prefers-color-scheme detection, add localStorage to remember user choice, and handle transitions smoothly without flashing the wrong theme on page load.
04
Contrast & Bilingual Testing
Test every colour combination with real content in both English and Chinese. Check at multiple font sizes and verify keyboard navigation in toggle components.
05
Performance & Refinement
Monitor real user preferences, gather feedback on colour perception, and iterate. Sometimes a colour works in design tools but fails with actual users at 11pm.
“Most teams think dark mode is just inverting colors and calling it done. That’s where they fail. Good dark mode isn’t about looking cool—it’s about respecting that someone might be using your site at midnight in a dark room, or in bright sunlight at 3pm, or switching between both during the same day. The real work is making sure your typography doesn’t blur, your brand doesn’t disappear, and your users aren’t constantly squinting. That’s why we test everything. Rigorously.”
Featured Writing
Read Marcus’s Articles
In-depth guides on dark mode implementation, colour theory, and accessible theme switching.
Frontend Code
CSS Custom Properties for Theme Management
Building scalable variable architecture that makes theme switching effortless and maintainable across hundreds of components.
User Preferences
Using prefers-color-scheme Media Queries
Detecting system preferences, respecting user choice, persisting settings, and preventing the flash of wrong theme on page load.
Accessibility
Testing Contrast Across Light and Dark Modes
WCAG compliance strategies, bilingual typography testing, and why colour combinations that look fine in Figma can fail with real users.
Ready to Implement Dark Mode?
Explore our full collection of guides, resources, and case studies on dark mode implementation and accessible theme switching for modern websites.
Explore All ArticlesGet in Touch
Have questions about dark mode implementation or theme switching? Reach out to our team.