skip to content
PNG 3D image of a star itsqian.com

Case Study - Dark/Light Mode & Internationalization (i18n)

/ 2 min read

View more blogs with the tag uiux , View more blogs with the tag product , View more blogs with the tag front-end
Table of Contents

🧩 The Challenge

The client served enterprise clients across multiple time zones and regions. As the platform scaled internationally, users requested:

  • A dark mode option to reduce eye strain during extended use
  • Language support for non-English-speaking users

These changes required a thoughtful balance of visual design, usability, and scalable architecture—without disrupting the existing user experience.

👩‍💻 My Role

Front-End Engineer with UI/UX Focus

  • Led the implementation of dark/light theme toggle across the application
  • Worked closely with product and design to create a system that could support multiple languages and themes
  • Focused on component styling, user preference storage, and responsive behavior
  • Advocated for accessible color choices and consistent UX across themes

🛠️ The Process

  1. Research & Design Planning
  • Researched dark mode best practices (Google Material, Apple HIG, accessibility guidelines)
  • Audited the existing UI for hard-coded colors and inflexible layouts
  • Collaborated with the design team to define a color system that would adapt to both themes
  1. Theming System Architecture
  • Built a theme context using styled-components to dynamically apply dark/light styles
  • Created a centralized token system for color variables (e.g., background, text, border)
  • Allowed user preferences to be saved in localStorage for session persistence
  1. Internationalization (i18n) Integration
  • Set up language switching using react-i18next
  • Structured copy as reusable translation strings in JSON
  • Implemented language selector in the UI and fallback for missing keys
  • Coordinated with internal teams to gather translations for initial languages (English, Simplified Chinese & Thai)

✅ Outcome & Impact

  • Improved user comfort and customization, especially for night-time or power users
  • Expanded market reach by introducing multilingual support
  • Received positive internal and user feedback for visual clarity and ease of switching themes/languages

💡 Reflections

This project highlighted the importance of designing for flexibility and accessibility. Creating adaptable UIs isn’t just about aesthetics: it’s about respecting how different users engage with digital products. The ability to toggle themes or switch languages is a form of inclusion.

It also reinforced my appreciation for system thinking in design - centralizing colors, spacing, and logic helped the team iterate quickly and stay consistent.