Chameleon: Automated Color Palette Adaptation for Dark Mode Data Visualizations

TL;DR

Chameleon automates dark-mode adaptation of light-mode visualizations by transforming color palettes through a simulated-annealing optimization that balances luminance contrast, color semantics, and adjacent color differences. The method includes palette extraction via k-means, three loss functions in the LCH/DeltaE color spaces, and a transparent optimization process starting from the input palette. Evaluations across case studies, expert interviews, system metrics, and a user study demonstrate improvements in color consistency and usable legibility relative to simple color inversion, with practical workflow benefits for designers. The work provides a solid foundation for automated cross-mode visualization design and points to extensions for SVG, interactive visuals, and accessibility considerations.

Abstract

Dark mode has gained widespread adoption across mobile platforms due to its benefits in reducing eye strain and conserving battery life. However, while the mobile system switches to dark mode, most visualizations remain designed for light mode, causing visual disruptions. Existing methods, such as manual adjustment or color inversion, are either time-consuming or fail to preserve the semantic meaning of colors in visualizations, making them less effective in dark mode. To address this challenge, we propose Chameleon, an algorithm that automatically transforms light mode visualizations into dark mode while maintaining visual clarity and color semantics. By optimizing for luminance contrast, color consistency, and adjacent color differences, Chameleon ensures that the transformed visualizations are legible and visually coherent. Our evaluation includes case study, expert interview, system evaluation, and a user study, and these demonstrate that Chameleon is effective at translating visualizations for dark mode.

Figures (10)

• Figure 1: An illustration of how k-means clustering with varying $k$ values affects the extracted color palettes from a visualization. (A) shows a heatmap visualization. (B), (C), and (D) represent the identified colors after clustering with $k$ values of 5, 10, and 15, respectively. As the value of $k$ increases, more distinct color clusters are identified from the visualization, capturing finer details and variations in the color palette.
• Figure 2: An illustration of how k-means clustering with different $k$ values affects a continuous visualization. (A) shows a density heatmap visualization. (B), (C), and (D) represent the density heatmap clustered using k-means with $k$ values of 10, 20, 30, respectively. The bottom legend shows its clustered $k$ colors. Increasing the value of $k$, resulting in a finer transition between colors within the density heatmap.
• Figure 3: Comparison of color categories across three conditions: iOS light mode colors, iOS dark mode colors, and the corresponding dark mode colors generated by Chameleon from the iOS light mode palette.
• Figure 4: The comparison of visualizations in three conditions: (A) light mode visualization from the Android official design guidelines , (B) corresponding dark mode visualization from the guidelines, and (C) dark mode visualization transformed by Chameleon.
• Figure 5: Examples of visualizations in the light mode and the corresponding dark mode results from Chameleon. The left-side visualizations show the original ones in light mode, while the right-side visualizations are transformed by our method for dark mode.