Theming

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppKitTheme">
        <item name="modalMode">AUTO || LIGHT || DARK</item>
        /* Override colors */
    </style>
</resources>

    enum class Mode {
        LIGHT, DARK, AUTO
    }

<?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>

    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
    }

    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,
    )

<?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>