UIKitColors interfaces manage a set of colors provided by UIKit for React Native. These colors are used in screens as background and text colors. While UIKit for React Native provides a default color set, you can customize the values of
UIKitTheme to use different colors.
UIKitPalette interface provides a set of default colors you can use throughout your client app.
UIKitColors interface provides a set of colors for each theme used in modules and module components. These colors are generated based on the color set of
The overlapping objects of the
ui property in
UIKitColors are written as
Component.Variant.State.ColorPart. See the code below as an example.
How to use
You can use the colors in each view through the
colors properties of the theme.
Customize the colors
You can customize
UIKitColors by either overriding the colors with the
colors properties of the existing theme or setting custom colors when creating a new theme. To change the colors while keeping the theme, we recommend overriding the colors with a custom
palette. If you wish to only change the colors in a certain module and its components, then use a custom
Customize with default themes
If you only change the
palette property of the theme, then the
colors property is re-generated based on the customized colors of
palette. If you change both
colors properties, you must customize
palette first then
colors. See the code below on how to override the colors with
Customize with createTheme()
See the code below on how to create a new theme with custom a