NowWebColoring protocol - iOS

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of NowWebColoring protocol - iOS

    The NowWebColoring protocol defines default color values used in web pages displayed within a native web view on iOS devices for your ServiceNow instance. This protocol ensures consistent theming and visual coherence for web interfaces embedded in NowWeb, the ServiceNow native web viewer.

    Show full answer Show less

    Key Features

    • Standardized Color Properties: The protocol includes a comprehensive set of color properties for various UI elements such as error banners, success banners, informational messages, warnings, backgrounds, text, buttons, and loading indicators.
    • Dark and Light Mode Support: Each color property provides default values tailored for both dark and light modes to maintain readability and aesthetic consistency.
    • Theme and Style Integration: You can specify custom themes using the webPageThemeId and webPageThemeVariantId, linking to entries in the UX Theme and UX Style tables respectively, allowing further customization of the web page appearance.
    • Override Capability: The protocol allows overriding any default colors to match your organization's branding or UI preferences.

    Practical Application for ServiceNow Customers

    • Use the NowWebColoring protocol to control and customize the appearance of web content within NowWeb on iOS, ensuring a seamless user experience that aligns with your corporate design standards.
    • Leverage the default colors for quick setup or override specific properties to tailor banners, text, backgrounds, and interactive elements to suit your instance’s branding.
    • Manage themes effectively by assigning the appropriate webPageThemeId and webPageThemeVariantId to apply consistent styles across all web pages rendered in the native web view.
    • Maintain accessibility and clarity by utilizing the protocol’s support for both dark and light color schemes.

    The NowWebColoring protocol provides default values for the colors used within web pages hosted on your ServiceNow instance in a native web view.

    The colors specified in the table below define the default web interface colors.

    Table 1. Properties
    Name Description
    alertCritical0 Background color applied to the error banner.

    Default dark color: #7B1E28

    Default light color: #F8C8CD
    alertCritical3 Text color applied to the error text banner.

    Default dark color: #E46876

    Default light color: #B61C2D
    alertLow0 Background color applied to the info banner.

    Default dark color: #DBDBDE

    Default light color: #DBDBDE
    alertPositive0 Background color of the banner that displays success messages.

    Default dark color: #CADFC0

    Default light color: #CADFC0
    alertPositive3 Text color of the banner that displays success messages.

    Default dark color: #3B7F00

    Default light color: #3B7F00
    alertWarning0 Background color applied to the warning banner.

    Default dark color: #FBF7BF

    Default light color: #FBF7BF
    backgroundPrimary Background color applied to the view containing the web view.

    Default dark color: #07080B

    Default light color: #FFFFFF
    brand Color applied to the activity indicator shown while loading pages.

    Default dark color: #302F4B

    Default light color: #302F4B
    primary Tint color applied to action sheet on the web screen.

    Default dark color: #8486FF

    Default light color: #4F52BD
    screenHeaderBackground Text color applied to button badges. This color is also applied to a thin border around the badge.

    Default dark color: #CADFC0

    Default light color: #CADFC0
    screenHeaderText
    • Text color applied to button badges
    • Tint color applied to disabled navigation bar buttons, banner text, and banner icon tint on the web screen.

    Default dark color: #FFFFFF

    Default light color: #FFFFFF
    textActionble Text color for action button.

    Default dark color: #07080B

    Default light color: #FFFFFF
    textPrimary Text color applied to font.

    Default dark color: #FFFFFF

    Default light color: #151920
    webPageThemeId Sys_id of the theme to apply to the ServiceNow web pages loaded by NowWeb.

    Default: Configured default theme

    Table: Located in the UX Theme [sys_ux_theme] table.
    webPageThemeVariantId Sys_id of the theme variant to apply to the ServiceNow web pages loaded by NowWeb.

    Default: Configured default theme variant

    Table: Located in the UX Style [sys_ux_style] table.

    The following shows the default colors used for NowWebColoring. You can override any or all of these colors.

    public extension NowWebColoring {
    var brand: UIColor { nowUIColor.brand }
    var primary: UIColor { nowUIColor.primary }
    var textPrimary: UIColor {
        nowUIColor.textPrimary.withAlphaComponent(0.25)
    }
    var screenHeaderText: UIColor { nowUIColor.screenHeaderText }
    var screenHeaderBackground: UIColor { nowUIColor.screenHeaderBackground }
    var textActionble: UIColor {
        nowUIColor.textActionable
    }
    var alertCritical0: UIColor { nowUIColor.alertCritical0 }
    var alertCritical3: UIColor { nowUIColor.alertCritical3 }
    var alertPositive0: UIColor { nowUIColor.alertPositive0 }
    var alertPositive3: UIColor { nowUIColor.alertPositive3 }
    var alertLow0: UIColor { nowUIColor.alertLow0 }
    var alertWarning0: UIColor { nowUIColor.alertWarning0 }
    var backgroundPrimary: UIColor { nowUIColor.backgroundPrimary }
}