How Youku Mastered Dark Mode Across iOS and Android: Design & Implementation Insights

Origin

With the release of iOS 13 and Android 10, dark mode entered mainstream attention. Youku responded by researching and adapting dozens of pages across its Android and iOS apps, ultimately delivering full dark‑mode support for the latest versions available on the App Store and major Android markets.

What Is Dark Mode?

Dark mode, originally introduced by macOS, offers a "light" and a "dark" appearance. Since then, many platforms—including iOS, Android, and custom ROMs—have added official dark‑mode support, allowing users to switch based on preference.

Why Support Dark Mode?

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

Enhances visibility for users with poor eyesight or color‑blindness.

Provides a comfortable viewing experience in low‑light environments.

Ensures UI style consistency when system components automatically adapt to dark mode.

Design Approach

Product Impression

Retain the core visual identity while creating a second dark‑theme set for the five main navigation bars and bottom‑tab icons, ensuring harmony in the dark environment.

Background Color Selection

Choose a deep color slightly lighter than pure black to maintain contrast with media assets and foreground elements.

Use a neutral tone that does not dominate the scene, leaving space for content to stand out.

Coordinate hue with the overall channel atmosphere, especially for navigation and focus areas.

Color Framework

Classify existing colors by usage and define semantic tokens for both light and dark modes, guaranteeing that each functional color has a consistent counterpart across themes.

Contrast and Readability

Establish contrast ladders for backgrounds and text, testing across bright daylight and dim night conditions to ensure legibility.

Standardization

Create a dedicated dark‑mode palette and apply it uniformly across components, supplementing with special cases for specific scenes or states.

Icon and Divider Treatment

Prefer solid (filled) icons over line icons for better recognition in dark mode.

Replace dividers and shadows with fill colors to convey hierarchy more effectively.

Implementation Strategy

Youku built a shared design‑token system between design and development. Colors are split into static tokens (unchanged across themes) and dynamic tokens (vary between light and dark). An SDK manages these tokens, enabling a single change to propagate across all platforms.

For Android, dark mode can be disabled when necessary with the following code:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

Image handling recommendations:

Design assets that work for both themes by using opacity adjustments.

Apply code‑level filters on the Android side.

Provide dedicated dark‑mode assets for critical images that cannot be reused.

Official Documentation

Refer to the platform guidelines for detailed dark‑mode specifications:

iOS Dark Mode Guide: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

Android Dark Theme: https://developer.android.com/guide/topics/ui/look-and-feel/darktheme

Material Design Dark Theme: https://material.io/design/color/dark-theme.html