React 实战教程 深入学习一线大厂必备前端技能,VIP 教程限时免费领取。 立即查看 >

The DynamicColorIOS function is a platform color type specific to iOS.

DynamicColorIOS({ light: color, dark: color });

DynamicColorIOS takes a single argument as an object with two keys: dark and light. These correspond to the colors you want to use for "light mode" and "dark mode" on iOS.

In the future, more keys might become available for different user preferences, like high contrast.

At runtime, the system will choose which of the two colors to display depending on the current system appearance settings. Dynamic colors are useful for branding colors or other app specific colors that still respond automatically to system setting changes.

Developer notes#

If you’re familiar with @media (prefers-color-scheme: dark) in CSS, this is similar! Only instead of defining all the colors in a media query, you define which color to use under what circumstances right there where you're using it. Neat!


import { DynamicColorIOS } from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
light: 'midnightblue'