Comprehensive Design and Technical Summary of Full Dark Mode Support for the Youku App

The article presents a complete 11‑article, 117‑page summary of the Youku app’s full‑scale implementation of Dark Mode, covering both design and technical aspects.

Background : With the release of iOS 13 and Android 10, Dark Mode became a highly requested feature. Youku initiated research and development to support Dark Mode across its Android and iOS clients, completing the migration of dozens of key pages, including Weex and H5 pages.

What is Dark Mode? Dark Mode, originally popularized by macOS, provides a “light” and a “dark” appearance. It has since been adopted by many apps, operating systems, and custom ROMs.

Why support Dark Mode?

Improves battery life on OLED screens by reducing power consumption when the display is mostly black.

Enhances visibility for users with visual impairments or in low‑light environments.

Provides a more comfortable viewing experience in dim surroundings.

Ensures UI style consistency when system controls automatically switch to dark appearances.

Apple states that Dark Mode can improve battery life, visibility for users with poor eyesight, and usability in low‑light conditions.

Key Benefits (illustrated with power‑consumption graphs) :

Battery savings on OLED devices when the UI is predominantly dark.

Better readability for color‑blind or low‑vision users.

Reduced eye strain in dark environments.

Unified visual language across system and custom components.

For iOS, disabling Dark Mode can be done by adding User Interface Style = Light to the app’s Info.plist . For Android, the following code forces Light Mode:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

Design Methodology

1. Product Impression : Preserve core visual identity while creating a second dark‑theme set for navigation bars and icons.

2. Main Background Color Selection : Choose a deep yet not pure black hue to maintain contrast with media content and foreground elements.

3. Color Framework : Classify colors by semantic usage (static vs. dynamic). Static colors stay the same in both themes; dynamic colors change according to the theme. Use design tokens to name colors (e.g., “primary background”).

4. Contrast Hierarchy : Establish uniform contrast steps for backgrounds and text to reduce visual noise and improve readability across lighting conditions.

5. Readability Testing : Test designs in both bright daylight and dim night scenarios to ensure sufficient contrast.

6. Standardization : Build a dark‑mode color palette and document it for developers.

Execution Strategy

The project required a coordinated effort across design and development to avoid excessive cost. Youku adopted a design‑token‑driven visual system managed via an SDK, allowing a single change to propagate across all platforms.

Key implementation steps include:

Adapting colors and images to the dark theme.

Using semantic design tokens for both static and dynamic colors.

Applying code‑level filters for images when possible.

Providing separate assets for images that cannot be reused.

Design hand‑off is performed with tools like SketchMeasure and Gaia, which export measurements together with design‑token references, streamlining developer integration.

Official Documentation

Refer to the platform guidelines for further details:

iOS Dark Mode: Apple HIG Dark Mode

Android Dark Theme: Android Dark Theme and Material Dark Theme

The article concludes with a call‑to‑action to obtain the full ebook by sharing the post or contacting a WeChat assistant.