Using Themes

Using the default theme

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

Theme customization

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.

Colors

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.
Color
Description
Default
Primary
Used for buttons and primary call to actions
#1054DE
Secondary
Used in secondary UI elements
#FFD400
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

Typography

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
This is what the structure looks like if you are just using the default theme.
1
const defaultTheme = {
2
palette: {
3
alert: '#FA4D30',
4
base: '#292B32',
5
primary: '#1054DE',
6
secondary: '#FFD400',
7
tertiary: '#FF305A',
8
neutral: '#17181C',
9
highlight: '#1054DE',
10
11
system: {
12
borders: '#ebecef',
13
background: '#fff',
14
},
15
},
16
17
typography: {
18
global: {
19
fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif',
20
fontStyle: 'normal',
21
},
22
headline: {
23
fontWeight: 600,
24
fontSize: '20px',
25
},
26
title: {
27
fontWeight: 600,
28
fontSize: '16px',
29
},
30
body: {
31
fontWeight: 'normal',
32
fontSize: '14px',
33
},
34
bodyBold: {
35
fontWeight: 600,
36
fontSize: '14px',
37
},
38
caption: {
39
fontWeight: 'normal',
40
fontSize: '12px',
41
},
42
captionBold: {
43
fontWeight: 600,
44
fontSize: '12px',
45
},
46
},
47
};
Copied!
To customize your own theme:
1
const myTheme = {
2
//...partial representation of the defaultTheme
3
}
4
5
<AmityUiKitProvider theme={myTheme} ... />
Copied!
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.
Last modified 27d ago