# 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.

```javascript
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:

```javascript
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.social.plus/social-plus-uikit/uikit-3/web/using-themes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.