Using Themes

Using the default theme

Social Plus UIKit 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 interactions 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 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.

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} ... />

A custom theme will be applied on top of the default theme so you don't need to provide all the values. The default values will be used if some customizations are missing.