-
Notifications
You must be signed in to change notification settings - Fork 43
Using Themes
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.
Color | Use | Default |
---|---|---|
Primary | Buttons and primary call to actions | #1054DE |
Secondary | Secondary UI elements | #FFD400 |
Alert | Informing users of errors or information that requires an attention | #FA4D30 |
Highlight | Hyperlink text | #1054DE |
Base | Text presented on light background | #292B32 |
Tertiary | Tertiary UI elements | #FF305A |
Neutral | Supporting text | #17181C |
Borders | Borders | #EBECEF |
Background | 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 |
This is what the structure looks like if you are just using the default theme:
const defaultTheme = {
palette: {
alert: '#FA4D30',
base: '#292B32',
primary: '#1054DE',
secondary: '#FFD400',
tertiary: '#FF305A',
neutral: '#17181C',
highlight: '#1054DE',
system: {
borders: '#ebecef',
background: '#fff',
},
},
typography: {
global: {
fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif',
fontStyle: 'normal',
},
headline: {
fontWeight: 600,
fontSize: '20px',
},
title: {
fontWeight: 600,
fontSize: '16px',
},
body: {
fontWeight: 'normal',
fontSize: '14px',
},
bodyBold: {
fontWeight: 600,
fontSize: '14px',
},
caption: {
fontWeight: 'normal',
fontSize: '12px',
},
captionBold: {
fontWeight: 600,
fontSize: '12px',
},
},
};
To customize your own theme:
const myTheme = {
//...partial representation of the defaultTheme
}
<AmityUiKitProvider theme={myTheme} ... />
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.