This repository has been archived by the owner on Jun 11, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 36
Using Themes
Emee Miano edited this page Feb 23, 2022
·
2 revisions
AmityUIKit uses the default theme as part of the design language.
With no customization, UIKit already looks good. However, if you wish to customize the theme, you can declare changes to both colors and typography.
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 |
The AmityTypography is a class that manages a set of UIFont properties used in Amity UIKit. All fonts used in our UIKit are configured under this class.
| Element | Font/Weight | Size (points) |
|---|---|---|
| HeaderLine | System/Bold | 20 |
| Title | System/Semibold | 17 |
| Body | System/Regular | 15 |
| Body bold | System/Semibold | 15 |
| Caption | System/Regular | 13 |
| Caption bold | System/Semibold | 13 |