Using Themes
Last updated
Last updated
AmityUIKit
uses the default theme as part of the design language.
Without customization, the UIKit already looks good. However, if you wish to customize the theme, you can declare changes to both colors and typography. The tables below shows the default theme values.
UIKit uses a small set of declared colors to simplify the design task for developers. These colours are automatically rendered at appropriate shades to communicate states and interaction to the users.
This is what the structure looks like if you are just using the default theme.
To customize your own theme:
Custom theme will be applied on top of default theme so you don't need to provide all the values. The default values will be used if there are some customizations that are missing.
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
Tertiary
Used in tertiary UI elements
#FF305A
Neutral
Used in supporting text
#17181C
Borders
Used in borders
#EBECEF
Background
Used in background
#FFFFFF
Section
Weight/Family
Style/Size
Global
Inter, apple-system, BlinkMacSystemFont, Arial, sans-serif
normal
Headline
600
20 px
Title
600
16 px
Body
normal
14 px
Body bold
600
14 px
Caption
normal
12 px
Caption bold
600
12 px