ChromaEyes: Detecting Inconsistencies of User Interface Elements between Light and Dark Modes of Web Applications

Dark mode interfaces in web applications have gained widespread adoption because of improved user comfort and reduced power consumption. While these interfaces can be implemented through built-in support or browser extensions that convert light mode layouts, inconsistencies frequently arise during the conversion process, including invisible UI elements, misplaced components, and incorrect color mappings. Despite the prevalence of these issues, no existing approaches systematically detect such inconsistencies between light and dark mode interfaces. Our preliminary study shows that popular commercial vision language models and accessibility issue detectors are ineffective for this task. This paper presents ChromaEyes, a novel approach to automatically detecting inconsistencies of graphical user interface elements between light and dark mode layouts of web applications. Detecting such inconsistencies is inherently challenging given that, since mode conversion intentionally changes colors and contrast, UI elements in light and dark modes are expected to look different. Thus, pixel-wise or visual comparison cannot distinguish intentional adaptations from actual errors. ChromaEyes addresses this challenge by analyzing semantic roles and functional meanings of UI elements, enabling accurate correspondence detection between visually distinct but functionally equivalent components. We evaluate our approach on 2,009 screenshot pairs captured from 196 real web applications (147 with native dark mode support and 49 with browser extension-based conversion). ChromaEyes achieves 96.19% accuracy at the screenshot level and 97.95% at the application level, significantly outperforming vision-language models (e.g., GPT-4o) and state-of-the-art accessibility issue detectors (e.g., OwlEye, axe DevTools).