# Using Themes

## **Using the default theme**

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

## **Theme customization**

The UIKit looks great without any customizations, though you can also edit the colors and fronts in the themes to suit your preferences all the same. 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 interaction 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 |
| 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**

Customize color theme by declaring color code to the specific color key**.**

```kotlin
colors.xml

<resources>
    <color name="amityColorPrimary">#1054DE</color>
    <color name="amityColorSecondary">#292B32</color>
    <color name="amityColorAlert">#FA4D30</color>
    <color name="amityColorHighlight">#1054DE</color>
    <color name="amityColorBase">#292B32</color>
    <color name="amityColorBaseInverse">#FFFFFF</color>
    <color name="amityMessageBubble">#1054DE</color>
    <color name="amityMessageBubbleInverse">#EBECEF</color>
</resources>
```

### Overriding the default UIKit theme

When you integrate UIKit to your application, it applies the our customized theme to UIKit by default. This `Amity.Base.Theme.AmityApp` style extends a theme from our material based theme and includes overrides for styling attributes that are used by key UI elements. So you can quickly customize  UIkit style by overriding the provided theme file and its attributes. Please note that all following attributes must be overriden.

For example, your `styles.xml` file should look similar to this:

```xml
    <!--     Override Amity UIKIT Theme, all of these attributes are mandatory. You could override them , but please don't remove any. Otherwise ui theme may be strange-->
    <style name="Amity.Base.Theme.AmityApp" parent="Amity.Base.Theme.MaterialThemeBuilder">
        <!--        Color of status bar-->
        <item name="android:statusBarColor">#000000</item>
        <!--        Light/dark theme of status bar-->
        <item name="android:windowLightStatusBar" tools:targetApi="23">false</item>
        <!--        Navigation bar color-->
        <item name="android:navigationBarColor">#000000</item>
        <!--        Global toolbar style-->
        <item name="toolbarStyle">@style/MyToolbarStyle</item>

        <!--        Primary accent color-->
        <item name="colorPrimary">@color/amityColorPrimary</item>
        <!--        Secondary accent color-->
        <item name="colorSecondary">@color/amityColorSecondary</item>
        <!--        Global background color-->
        <item name="android:colorBackground">@color/amityColorWhite</item>
        <item name="colorSurface">@color/amityColorWhite</item>

        <item name="colorError">@color/amityColorAlert</item>
        <item name="colorOnError">@color/amityColorWhite</item>
        <item name="android:actionMenuTextColor">@color/amityColorHighlight</item>

        <item name="materialAlertDialogTheme">@style/AmityAlertDialogTheme</item>
        <!--        Snackbar style-->
        <item name="snackbarStyle">@style/AmitySnackBarStyle</item>
        <!--        Search view style-->
        <item name="searchViewStyle">@style/AmitySearchViewStyle</item>

        <item name="shapeAppearanceSmallComponent">@style/Amity.ShapeAppearance.Theme.SmallComponent
        </item>
        <item name="shapeAppearanceMediumComponent">
            @style/Amity.ShapeAppearance.Theme.MediumComponent
        </item>
        <item name="shapeAppearanceLargeComponent">@style/Amity.ShapeAppearance.Theme.LargeComponent
        </item>
        <item name="bottomSheetDialogTheme">@style/Amity.ThemeOverlay.Theme.BottomSheetDialog</item>
    </style>

    <!--       Example of custom toolbar style, color is the only option can be customised here-->
    <style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
        <!--       Color of toolbar-->
        <item name="android:background">#3A3A3A</item>
    </style>

    <!--     Override Amity UIKIT text style in toolbar, all of these attributes are mandatory.
              You could override them but please don't remove any. Otherwise ui theme may be strange-->
    <style name="ToolBarLeftTextStyle">
        <!--     Please don't change width and height-->
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <!--     Text size of the toolbar title text-->
        <item name="android:textSize">@dimen/amity_text_size_title</item>
        <!--     Style of the toolbar title text-->
        <item name="android:textStyle">bold</item>
        <!--     Margin of the toolbar title text-->
        <item name="android:layout_marginStart">@dimen/amity_padding_m1</item>
        <!--     Text color of the toolbar title text-->
        <item name="android:textColor">#FFFF</item>
        <item name="android:maxLines">1</item>
        <item name="android:ellipsize">end</item>
        <item name="android:layout_marginEnd">@dimen/amity_padding_m1</item>
    </style>

    <!--     Override Amity UIKIT left icon in toolbar, all of these attributes are mandatory.
          You could override them but please don't remove any. Otherwise ui theme may be strange-->
    <style name="ToolBarLeftDrawableStyle">
        <!--     Please don't change width and height-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <!--     Color of the toolbar icon-->
        <item name="android:tint">#FFFF</item>
        <item name="android:layout_marginStart">@dimen/amity_padding_m2</item>
    </style>
```


---

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