Skip to content

Using Themes

Emee Miano edited this page Jan 7, 2022 · 1 revision

Using the default theme

UIKit uses the default theme as part of the design language.

Theme customization

The UIKit looks great without any customizations, though you can also edit the colors and fronts in the themes to suit your preferences all the same. However, if you wish to customize the theme, you can declare changes to both colors and typography.

Colors

UIKit uses a small set of declared colors to simplify the design task for developers. These colors are automatically rendered at appropriate shades to communicate states and interaction to the users.

Color Description Default
Primary Used for buttons and primary call to actions #1054DE
Secondary Used in secondary UI elements #292B32
Alert Used when informing users of errors or information that requires attention #FA4D30
Highlight Used for hyperlink text #1054DE
Base Text presented on light background #292B32
Base Inverse Text presented on dark background #FFFFFF
Message Bubble Background color of message bubble sent by the user #1054DE
Message Bubble Inverse Background color of message bubble sent to the user #EBECEF

Customize color theme by declaring color code to the specific color key.

Clone this wiki locally