---
sourceDocument: Xanadu API Reference
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu API Reference

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# Use NowUIColoring to theme NowWebTheme and NowChatTheme

# Use NowUIColoring to theme NowWebTheme and NowChatTheme {#ariaid-title1}

* Release version: Xanadu
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

The NowUIColoring interface contains all the colors used by all NowSDK modules.
For scenarios where you use similar color variables across multiple SDK modules, you can implement the NowUIColoring interface. Using this interface you can override color values and then use that implementation
to override the nowUIColoring values inside the theme classes [NowWebTheme](https://servicenow-prod.fluidtopics.net/s3IQbwpFndDo~oCEFL6r~w "The NowWebTheme interface provides properties that enable you to override the colors used within web pages hosted on your ServiceNow instance in a native web view.") and [NowChatTheme](https://servicenow-prod.fluidtopics.net/ijcWm3L259RTDrttEw0VFQ "The NowChatTheme interface defines default colors for the elements in the Live Agent and Virtual Agent chat UI."). If color variables aren't overridden, the NowUIColoring interface uses the default colors.

The following code example shows how to override colors for both a web UI and a chat UI.

    // Implement the NowUIColoring and override desired color variables
    val nowUIColoringImpl = object : NowUIColoring {
        override val brand: Int
            get() = Color.BLUE

        override val textPrimary: Int
            get() = Color.WHITE

        //override the rest of color variables

    }

    // Override the nowUIColoring for NowWeb value using the NowUIColoring implementation
    lifecycleScope.launch {
        sdkManager.getNowWebService()?.launch(activity, URL("https://instance-name.service-now.com"), object : NowWebTheme {
            override val nowUIColoring: NowUIColoring
                get() = nowUIColoringImpl
        })
    }

    //Override the nowUIColoring for NowChat value using the NowUIColoring implementation
    lifecycleScope.launch {
        sdkManager.getNowChatService()?.start(activity, object : NowChatTheme {
            override val nowUIColoring: NowUIColoring
                get() = nowUIColoringImpl
        })
    }

## Dark theme support {#mobsdk-and-color-theming__section_qxq_4rc_y2c}

To support a dark theme in NowChat, you can either provide your own dark theme implementation of the NowChatTheme and use that in the NowChatService.start() and
NowChatService.updateTheme() functions. Or you can use a NowChatThemeDark class that implements the NowChatTheme interface with default dark theme colors. You can also use this class as a base for your
custom dark theme implementation.

    val chatService = serviceManager.getNowChatService()

    val chatThemeLight = object : NowChatTheme {
        override val backgroundPrimary: Int
            get() = Color.WHITE

        override val textPrimary: Int
            get() = Color.BLACK

        // Override remaining theme colors
    }

    //create dark theme using the NowChatThemeDark class
    val chatThemeDark = object : NowChatThemeDark(){
        override val backgroundPrimary: Int
            get() = Color.BLACK

        override val textPrimary: Int
            get() = Color.WHITE

        // Override remaining theme colors
    }

    //start NowChat with light theme
    chatService?.start(activity, chatThemeLight)


    //update NowChat theme to dark theme
    chatService?.updateTheme(chatThemeDark)