DynamicColorIOS

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

iOS

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!

Web

The DynamicColorIOS function is similar to the iOS native methods UIColor colorWithDynamicProvider:

Example

import {DynamicColorIOS} from 'react-native';

const customDynamicTextColor = DynamicColorIOS({
  dark: 'lightskyblue',
  light: 'midnightblue',
});