How Baidu’s BDPAppearance Framework Enables Efficient Dark Mode Theming on iOS

Background

At WWDC 2019 Apple announced iOS 13 Dark Mode, which not only protects eyesight at night but also saves power on OLED devices. Because the system feature only works on iOS 13+, Baidu built a skin‑theme framework (BDPAppearance) that supports Dark Mode across the entire app and allows multiple custom themes.

BDPAppearance Overview

The framework provides simple APIs for developers to obtain colors and images that automatically adapt to the current theme.

// UIColor
view.backgroundColor = BDPAppearanceColor(@"C1");
// UIImage
imageV.image = BDPAppearanceImage(@"icon");

By replacing direct UIColor and UIImage assignments with these calls, business code can switch themes without further changes.

Implementation Principle

During app launch the framework loads the selected theme’s color resources into memory. Controls retrieve the appropriate UIColor or UIImage via BDPAppearanceColor and BDPAppearanceImage. The framework extends UIColor and UIImage with colorName and imageName properties to record which resource was used.

When a theme change occurs, each view that has been added to a weak NSHashTable is visited. If the view’s stored colorName or imageName is non‑nil, the framework loads the new value from the active theme and reassigns it, achieving instant theme refresh.

Design Considerations

The guiding principle is minimal integration cost: developers only need to replace the way they fetch colors and images. Early prototypes used notifications in didMoveToSuperview, but performance tests showed high CPU usage and longer initialization times as view hierarchy depth grew. The final design switched to the weak‑reference NSHashTable approach.

Performance Test

All numbers are averages of more than 20 runs.

Normal (no theming): CPU 50%, init 3312 ms

HashTable approach: CPU 50%, init 3341 ms

Notification approach: CPU 99%, init 5115 ms

At a scale of 10 000 views, the HashTable method outperforms the notification method by a large margin.

Comparison with Open‑Source Frameworks

Popular iOS theming libraries on GitHub were compared (see image). BDPAppearance requires the smallest code change because it preserves the existing development habits while mimicking the system API.

UIColor *dynamicColor = [UIColor colorWithDynamicProvider:^UIColor *(UITraitCollection *traitCollection) {
    if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
        return [UIColor blackColor];
    } else {
        return [UIColor whiteColor];
    }
}];
view.backgroundColor = dynamicColor;

Client‑Wide Theme Communication

Baidu’s app includes native (NA), H5, React‑Native (RN), and H5‑Native (HN) modules. Theme mode is propagated via:

WKWebView initialization: a key‑value pair is appended to the UserAgent so the web view knows the theme at the earliest rendering stage.

Theme change signaling: a data channel combined with JS‑bridge interactions enables cross‑module communication.

Project Color‑Value Management

With hundreds of components and nearly a hundred business lines, Baidu manages color tables per component. During build, a script deduplicates and merges all component tables into a single master table stored in a Themes repository. The app loads this consolidated table at runtime, achieving component decoupling.

Sketch Plugin – ThemeMeasure

To aid designers, Baidu created the ThemeMeasure Sketch plugin, which:

Provides convenient ways to annotate designs with system‑recommended color numbers.

Enables one‑click conversion of designs to dark, night, or other themes when the corresponding color data exists.

Exports all annotations (colors, layout, font sizes) into a single HTML document, streamlining hand‑off between design and development.

The plugin helped the team finish the Baidu App dark‑mode adaptation in less than two weeks, demonstrating the framework’s lightweight nature and low integration cost. Additionally, theme resources can be delivered from the cloud, allowing dynamic addition of new themes.

Conclusion

The article detailed the BDPAppearance skin‑theme framework, its architecture, performance advantages, open‑source comparisons, cross‑module communication, and supporting tooling, providing a comprehensive reference for iOS dark‑mode implementation in large‑scale mobile applications.