Using Themes
Using the default theme
UIKit uses a default theme as part of out of the box design language.
UIKit uses the default theme as part of the design language.
Theme customisation
The UIKit looks great without any customisations, though you can also edit the colors and fronts in the themes to suit your preferences all the same.
Colours
However, if you wish to customise the theme, you can declare changes to both colours and typography.
UIKit uses a small set of declared colours to simplify the design task for developers. These colours are automatically rendered at appropriate shades to communicate states and interaction to the users.
Colours
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 an 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 colour of message bubble sent by the user | #1054DE |
Message Bubble Inverse | Background colour of message bubble sent to the user | #EBECEF |
UIKit uses a small set of declared colours to simplify the design task for developers. These colours are automatically rendered at appropriate shades to communicate states and interaction to the users.
Usage
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 an 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 colour of message bubble sent by the user | #1054DE |
Message Bubble Inverse | Background colour of message bubble sent to the user | #EBECEF |
Customise colour themes by declaring a colour code to the specific colour key.
Usage
Customise colour theme by declare colour code to the specific colour key.
Last updated