# Using Themes

## **Using the default theme**

social.plus UIKit uses the default theme as part of the design language.

## **Theme customization**

With no customization, UIKit already looks good. However, if you wish to customize the theme, you can declare changes to both colors and typography.

### Colors

UIKit uses a small set of declared colors to simplify the design task for developers. These colors 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 attention | #FA4D30 |
| Highlight              | Used for hyperlink text                                                    | #1054DE |
| Base                   | Text presented on light background                                         | #292B32 |
| Base Inverse           | Text presented on dark background                                          | #FFFFFF |
| Message Bubble         | Background color of message bubble *sent by the user*                      | #1054DE |
| Message Bubble Inverse | Background color of message bubble *sent to the user*                      | #EBECEF |

#### **Usage**

To declare your own colors on iOS:

1. Create an instance from the provided class `AmityTheme`
2. Set the theme instance through **AmityUIKitManager**

```swift
// default colors
let myTheme = AmityTheme()

// partially overriding colors
let myTheme = AmityTheme(
    primary: UIColor.systemBlue,
    secondary: UIColor.systemOrange)

// fully overriding colors
let myTheme = AmityTheme(
    primary: UIColor.systemBlue,
    secondary: UIColor.systemOrange,
    alert: UIColor.systemRed,
    highlight: UIColor.systemBlue,
    base: UIColor.white,
    baseInverse: UIColor.black,
    messageBubble: UIColor.systemTeal,
    messageBubbleInverse: UIColor.systemRed)

AmityUIKitManager.set(theme: myTheme)
```

### **Typography**

The `AmityTypography` is a class that manages a set of `UIFont` properties used in social.plus UIKit. All fonts used in our UIKit are configured under this class.

| Element      |   Font/Weight   | Size (points) |
| ------------ | :-------------: | ------------- |
| HeaderLine   |   System/Bold   | 20            |
| Title        | System/Semibold | 17            |
| Body         |  System/Regular | 15            |
| Body bold    | System/Semibold | 15            |
| Caption      |  System/Regular | 13            |
| Caption bold | System/Semibold | 13            |

#### **Usage**

To declare your own typography on iOS:

1. Create an instance from the provided class `AmityTypography`.
2. Set the typography instance through **AmityUIKitManager**.

```swift
// default typography
let myTypography = AmityTypography()

// partially overriding typography
let myTypography = AmityTypography(
    headerLine: UIFont(name: "Georgia-Bold", size: 20)!,
    title: UIFont(name: "Georgia", size: 20)!)

// fully overriding typography
let myTypography = AmityTypography(
    headerLine: UIFont(name: "Georgia-Bold", size: 20)!,
    title: UIFont(name: "Georgia", size: 20)!,
    bodyBold: UIFont.systemFont(ofSize: 16, weight: .regular),
    body: UIFont.systemFont(ofSize: 16, weight: .regular),
    captionBold: UIFont.systemFont(ofSize: 13, weight: .regular),
    caption: UIFont.systemFont(ofSize: 13, weight: .light))

AmityUIKitManager.set(typography: myTypography)
```


---

# 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/ios/theme.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.