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


---

# NowWebThemeable protocol - iOS

# NowWebThemeable protocol - iOS {#ariaid-title1}

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

The NowWebThemeable protocol provides properties that enable you to override the colors used within web pages hosted on your ServiceNow instance in a native web view.

    public protocol NowWebThemeable {
        var color: NowWebColoring { get }
    }

The [NowWebColoring](https://servicenow-prod.fluidtopics.net/QjpYifXAlKz6KYrDkWdnwQ "The NowWebColoring protocol provides default values for the colors used within web pages hosted on your ServiceNow instance in a native web view.") protocol contains NowUIColoring. This property is used to reference default color variables that NowWebThemeable can use.

For additional information on how to theme the UI, see [Use NowUIColoring to theme NowWebTheme and NowChatTheme](https://servicenow-prod.fluidtopics.net/4JlbfpTx8wi5Ua0_FoaKdQ "The NowUIColoring interface contains all the colors used by all NowSDK modules.") in the Mobile SDK Developer Guide - iOS.

## Define WebColors using default colors {#NowWebThemeableiOSProtocol__section_gkf_b13_tzb}

    /// Sample structure for using default colors that come with Mobile SDK.
    struct WebColors: NowUIColoring {
    }

## Define WebColors using custom colors {#NowWebThemeableiOSProtocol__section_ofb_j13_tzb}

    /// Use custom colors with light theme
    struct WebColors: NowUIColoring {
        private var defaultTheme: NowWebDefaultTheme { NowWebDefaultTheme(nowUITheme: NowUIDefaultTheme())
        }
        
        var brand: UIColor { lightBrand }
        var primary: UIColor { lightPrimary }
        var textPrimary: UIColor { lightTextPrimary }
        var screenHeaderText: UIColor { lightScreenHeaderText }
        var screenHeaderBackground: UIColor { lightScreenHeaderBackground }
        var textActionable: UIColor { lightTextActionable }
        var alertCritical0: UIColor { lightAlertCritical0 }
        var alertCritical3: UIColor { lightAlertCritical3 }
        var alertPositive0: UIColor { lightAlertPositive0 }
        var alertPositive3: UIColor { lightAlertPositive3 }
        var alertLow0: UIColor { lightAlertLow0 }
        var alertWarning0: UIColor { lightAlertWarning0 }
        var backgroundPrimary: UIColor { lightBackgroundPrimary }
        
        // Light Colors
        var lightBrand: UIColor { defaultTheme.color.brand }
        var lightPrimary: UIColor { defaultTheme.color.primary }
        var lightTextPrimary: UIColor { defaultTheme.color.textPrimary }
        var lightScreenHeaderText: UIColor { defaultTheme.color.screenHeaderText }
        var lightScreenHeaderBackground: UIColor { defaultTheme.color.screenHeaderBackground }
        var lightTextActionable: UIColor { defaultTheme.color.textActionble }
        var lightAlertCritical0: UIColor { defaultTheme.color.alertCritical0 }
        var lightAlertCritical3: UIColor { defaultTheme.color.alertCritical3 }
        var lightAlertPositive0: UIColor { defaultTheme.color.alertPositive0 }
        var lightAlertPositive3: UIColor { defaultTheme.color.alertPositive3 }
        var lightAlertLow0: UIColor { defaultTheme.color.alertLow0 }
        var lightAlertWarning0: UIColor { defaultTheme.color.alertWarning0 }
        var lightBackgroundPrimary: UIColor { defaultTheme.color.backgroundPrimary }
    }

## Define WebTheme structure with NowWebThemeable protocol {#NowWebThemeableiOSProtocol__section_kql_n13_tzb}

    struct CarrascoWebTheme: NowWebThemeable {
        var color: NowWebColoring
        
        struct Color: NowWebColoring {
            var nowUIColor: NowUIColoring
        
            var alertPositive0: UIColor
            var alertPositive3: UIColor
            var alertLow0: UIColor
            var alertWarning0: UIColor
            var backgroundPrimary: UIColor
            
            init(inputs: WebColors) {
                nowUIColor = ThemeColor(inputs)
                
                alertPositive0 = inputs.alertPositive0
                alertPositive3 = inputs.alertPositive3
                alertLow0 = inputs.alertLow0
                alertWarning0 = inputs.alertWarning0
                backgroundPrimary = inputs.backgroundPrimary
            }
        }
        
        public init(webColors: WebColors) {
            color = Color(inputs: webColors)
        }
    }

## Instantiate a WebTheme object by passing WebColor as input {#NowWebThemeableiOSProtocol__section_k4j_t13_tzb}

    let webTheme = CarrascoWebTheme(webColors: WebColors())

## Pass a WebTheme object to NowWebService.makeWebViewController {#NowWebThemeableiOSProtocol__section_mzl_w13_tzb}

    func webViewController(for url: URL, delegate: NowWebViewControllerDelegate) -> NowWebViewController? {
      guard let webService = webService else {
        debugPrint("Web service not initialized")
        return nil
      }
      let result = webService.makeWebViewController(for: url, delegate: delegate, theme: CarrascoWebTheme(webColors: WebColors()) )
        
      switch result {
      case .success(let viewController):
        return viewController
      case .failure(let error):
        debugPrint("Web view creation failed with error: \(error.localizedDescription)")
      }
      return nil
    }