Dynamic UI Skinning (Gray‑White Mode) for Mobile Apps: Analysis, Evaluation and Implementation

Introduction

The rapid shift from PC to mobile Internet in China since 2011 has brought major changes in device screens, operating systems and network environments, requiring developers to understand the differences between desktop and smartphone platforms when designing UI.

Analysis Objects

Four categories of apps were selected – news, video/live streaming, life services and e‑commerce – covering 58App, Taobao, Meituan, JD, Tencent News, Douyin, iQIYI and others. Their gray‑white adaptation performance was examined across launch screens, splash screens and home pages.

Launch Screen Evaluation

Launch screens are static images baked into the app bundle; they cannot be changed remotely on iOS or Android, which explains why 99% of apps remained colorful during the event. iOS does allow separate launch images for Light and Dark modes, but custom gray‑white modes are not supported.

Splash Screen Evaluation

Splash screens can be made dynamic via server‑delivered assets, but many apps kept the brand logo area static, missing the opportunity for gray‑white adaptation.

Home Page Evaluation

The home page, the main traffic entry, is usually built with native code. While some apps achieved full gray‑white conversion (e.g., Tencent News), others left colored elements due to incomplete component granularity.

Overall Effect

News apps performed best, especially Tencent News, while other categories showed varying degrees of incomplete adaptation.

Implementation Approaches and Architecture

Three main product requirements were identified: dark mode, skin packages, and special‑event themes (e.g., gray‑white for Qingming). The core idea of dynamic skinning is to separate style/theme from UI structure and switch themes at runtime.

1. Dark Mode

Switching to dark mode is straightforward but requires extensive UI component coverage across many business lines.

2. Skin Packages

Resources (styles, images) are packaged separately and loaded at runtime, e.g., on Android using AssetManager.addAssetPath(...) to load a skin APK.

3. Special‑Event Themes

Two technical means are used: server‑side configuration that controls colors and image URLs, and local pixel‑level processing that converts images to gray‑white on the client.

Server‑Side Dynamic Control

Configuration can range from simple layout changes to fine‑grained component updates using frameworks like Tangram or cross‑platform solutions (Hybrid, ReactNative, Weex). Flutter’s compiled binaries limit dynamic updates on iOS.

Local Color and Transparency Adjustment

Native code can intercept image rendering pipelines and apply gray‑scale transformations to each pixel.

Conclusion

The gray‑white adaptation for the Qingming memorial day demonstrated the current capabilities and limitations of dynamic UI theming in major Chinese mobile apps. The experience will likely drive more systematic support for low‑cost, rapid skin changes in future app development.

References

1. Android Q Dark Theme Adaptation – Kong Xiaojun. https://segmentfault.com/a/1190000021553504

2. iOS Dark Mode Practice in 58.com – Jia Xuewen, Jiang Yan. https://mp.weixin.qq.com/s/QlIqwha0dgN9rJbDU-Gg_g