Dark Mode Adaptation Practices in the 58.com Mobile App

Dark mode has become a hot topic after the release of iOS 13 and Android 10. On March 22, WeChat added dark‑mode support for iOS, and 58.com’s app also began exploring and implementing dark‑mode adaptation.

Why adapt dark mode? Apple recommends developers to support it, it improves user experience in low‑light environments, follows industry trends (e.g., Flutter, other major apps), and can save battery on OLED screens.

Design goals focus on handling a complex tech stack (Native, React Native, Web), fast three‑week release cycles, and reducing future iteration cost by building a style library and a unified overlay mechanism for pages that cannot be adapted immediately.

Native page adaptation uses Runtime Method Swizzling and the iOS 13 API overrideUserInterfaceStyle . Example:

- (void)viewDidLoad{
    [super viewDidLoad];
    if (@available(iOS 13.0, *)) {
        self.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;
    }
}

The style library provides simple APIs for colors and images, e.g.:

view.backgroundColor = [StyleLib colorWithType:@"Primary_1"];

UIImage* backImage = [StyleLib iconWithType:@"icon_back"];

React Native page adaptation sets the style at launch and listens for dark‑mode changes:

const styles = StyleSheet.create({
    text: { fontSize: 16, color: 'black' },
    darkText: { color: 'white' }
});
// Usage
...

MYAPP.addListener('custom_dark_mode', mode => {
    // restart or refresh RN app
    this.setState({ visible: false });
    setTimeout(() => this.setState({ visible: true }), 0);
});

Web page adaptation relies on the CSS media query prefers-color-scheme and a JavaScript listener:

function myFunction(x) {
    if (x.matches) {
        MYAPP.action.toast('dark');
    } else {
        MYAPP.action.toast('light');
    }
}
var x = window.matchMedia('(prefers-color-scheme: dark)');
myFunction(x);
x.addListener(myFunction);

Parallel development is organized into three layers—foundation (style library), service (overlay management, protocol handling, switch control) and business (individual feature modules). App‑level and page‑level switches allow flexible enabling/disabling of dark mode during rollout.

Compatibility for non‑adapted pages includes forcing light style on unsupported view controllers and adding a semi‑transparent overlay (蒙层) on the window when dark mode is active. Example of method swizzling to enforce light style:

- (void)my_viewDidLoad{
    if (@available(iOS 13.0, *)) {
        if (NO == [self isSystemController]) {
            self.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
        }
    }
    [self my_viewDidLoad];
}

Conditional compilation guards are used to keep the code compatible with older Xcode versions:

#if defined(__IPHONE_13_0) && __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
    if (@available(iOS 13.0, *)) {
        self.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
    }
#endif

Performance results show that on OLED iPhone models dark mode reduces battery consumption by about 25% (28 minutes: 7.08% vs 5.32% power usage).

Conclusion The comprehensive dark‑mode adaptation—covering design, native/RN/Web implementation, overlay handling, and performance optimization—provides a consistent visual experience across 58.com’s large app ecosystem and lowers future maintenance cost. Future work includes building a component library for further reuse.

References

1. WWDC: Implementing Dark Mode on iOS 2. Supporting Dark Mode in Your Interface 3. Choosing a Specific Interface Style for Your iOS App 4. Switching your phone to dark mode could be a game‑changer for your battery life

Authors

Jia Xuewen – Senior R&D Engineer, iOS, 58.com Jiang Yan – Architect, iOS, 58.com