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
- Web
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!
The
DynamicColorIOS
function is similar to the iOS native methodsUIColor colorWithDynamicProvider:
Example
import {DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
light: 'midnightblue',
});