> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reown.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

## Usage

<Tabs>
  <Tab title="Compose">
    Wrap your composable component with `AppKitTheme`

    ```kotlin theme={null}
    import com.reown.appkit.ui.AppKitTheme

    AppKitTheme(
        mode = AppKitTheme.Mode.AUTO || AppKitTheme.Mode.LIGHT || AppKitTheme.Mode.DARK,
        lightColors = AppKitTheme.provideLightAppKitColors(
            // Override colors
        ),
        darkColors = AppKitTheme.provideDarkAppKitColors(
            // Override colors
        )
    )    {
        /* any AppKit component or graph */
    }

    ```
  </Tab>

  <Tab title="View">
    You can define AppKitTheme in yours `style.xml` files

    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <style name="AppKitTheme">
            <item name="modalMode">AUTO || LIGHT || DARK</item>
            /* Override colors */
        </style>
    </resources>
    ```
  </Tab>
</Tabs>

## Mode

<Tabs>
  <Tab title="Compose">
    ```kotlin theme={null}
        enum class Mode {
            LIGHT, DARK, AUTO
        }
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <attr name="modalMode" format="enum">
            <enum name="AUTO" value="0"/>
            <enum name="DARK" value="1"/>
            <enum name="LIGHT" value="2"/>
        </attr>
    </resources>
    ```
  </Tab>
</Tabs>

## Colors

<Tabs>
  <Tab title="Compose">
    Customizable colors in AppKitTheme.
    To override colors you need to use methods `AppKitTheme.provideLightAppKitColors` or AppKitTheme.provideDarkAppKitColors
    To override foreground or background `ColorPalette` you can define new palette or use one of the AppKitTheme methods to provide Palette and override selected colors

    ```kotlin theme={null}
        interface Colors {
            val accent100: Color
            val accent90: Color
            val accent80: Color
            val foreground: ColorPalette
            val background: ColorPalette
            val grayGlass: Color
            val success: Color
            val error: Color
        }
    ```

    ColorPalette

    ```kotlin theme={null}
        data class ColorPalette(
            val color100: Color,
            val color125: Color,
            val color150: Color,
            val color175: Color,
            val color200: Color,
            val color225: Color,
            val color250: Color,
            val color275: Color,
            val color300: Color,
        )
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <?xml version="1.0" encoding="utf-8"?>

    You can override those values in AppKitTheme in your style.xml file

    <resources>
        <attr name="modalAccent100" format="color"/>
        <attr name="modalAccent90" format="color"/>
        <attr name="modalAccent80" format="color"/>
        <attr name="modalForeground100" format="color"/>
        <attr name="modalForeground125" format="color"/>
        <attr name="modalForeground150" format="color"/>
        <attr name="modalForeground175" format="color"/>
        <attr name="modalForeground200" format="color"/>
        <attr name="modalForeground225" format="color"/>
        <attr name="modalForeground250" format="color"/>
        <attr name="modalForeground275" format="color"/>
        <attr name="modalForeground300" format="color"/>
        <attr name="modalBackground100" format="color"/>
        <attr name="modalBackground125" format="color"/>
        <attr name="modalBackground150" format="color"/>
        <attr name="modalBackground175" format="color"/>
        <attr name="modalBackground200" format="color"/>
        <attr name="modalBackground225" format="color"/>
        <attr name="modalBackground250" format="color"/>
        <attr name="modalBackground275" format="color"/>
        <attr name="modalBackground300" format="color"/>
        <attr name="modalGrayGlass" format="color"/>
        <attr name="modalSuccess" format="color"/>
        <attr name="modalError" format="color"/>

    </resources>
    ```
  </Tab>
</Tabs>