{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":316,"path":"api-reference/developer-guides/mobsdk-and-color-theming.md","title":"Use NowUIColoring to theme NowWebTheme and NowChatTheme","bundle":null,"doc_type":null,"release":"australia","body":"\n# Use NowUIColoring to theme NowWebTheme and NowChatTheme\n\nThe NowUIColoring interface contains all the colors used by all NowSDK modules.\n\nFor 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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/cllent-mobile-api-reference/NowWebThemeAndroidInterface.md) and [NowChatTheme](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/cllent-mobile-api-reference/NowChatThemeColorsAndroidInterface.md). If color variables aren’t overridden, the NowUIColoring interface uses the default colors.\n\nThe following code example shows how to override colors for both a web UI and a chat UI.\n\n```\n// Implement the NowUIColoring and override desired color variables\nval nowUIColoringImpl = object : NowUIColoring {\n    override val brand: Int\n        get() = Color.BLUE\n\n    override val textPrimary: Int\n        get() = Color.WHITE\n\n    //override the rest of color variables\n\n}\n\n// Override the nowUIColoring for NowWeb value using the NowUIColoring implementation\nlifecycleScope.launch {\n    sdkManager.getNowWebService()?.launch(activity, URL(\"https://instance-name.service-now.com\"), object : NowWebTheme {\n        override val nowUIColoring: NowUIColoring\n            get() = nowUIColoringImpl\n    })\n}\n\n//Override the nowUIColoring for NowChat value using the NowUIColoring implementation\nlifecycleScope.launch {\n    sdkManager.getNowChatService()?.start(activity, object : NowChatTheme {\n        override val nowUIColoring: NowUIColoring\n            get() = nowUIColoringImpl\n    })\n}\n```\n\n## Dark theme support\n\nTo 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.\n\n```\nval chatService = serviceManager.getNowChatService()\n\nval chatThemeLight = object : NowChatTheme {\n    override val backgroundPrimary: Int\n        get() = Color.WHITE\n\n    override val textPrimary: Int\n        get() = Color.BLACK\n\n    // Override remaining theme colors\n}\n\n//create dark theme using the NowChatThemeDark class\nval chatThemeDark = object : NowChatThemeDark(){\n    override val backgroundPrimary: Int\n        get() = Color.BLACK\n\n    override val textPrimary: Int\n        get() = Color.WHITE\n\n    // Override remaining theme colors\n}\n\n//start NowChat with light theme\nchatService?.start(activity, chatThemeLight)\n\n\n//update NowChat theme to dark theme\nchatService?.updateTheme(chatThemeDark)\n\n```\n\n"}}