NowWebColoring protocol - iOS
Summarize
Summary of NowWebColoring protocol - iOS
The NowWebColoring protocol defines default color values for web pages hosted within a native web view on your ServiceNow instance using the NowWeb framework on iOS. These colors ensure consistent and accessible styling for various UI elements such as banners, text, backgrounds, and buttons across the web interface.
Show less
Key Features
- Predefined Color Properties: The protocol specifies colors for error banners, info banners, success messages, warning banners, backgrounds, activity indicators, action sheets, button badges, and text elements.
- Dark and Light Mode Support: Each color property has default values for both dark and light display modes, enabling seamless theme adaptation.
- Theme Integration: The protocol references theme and theme variant IDs from the ServiceNow UX Theme and UX Style tables, allowing you to apply custom themes to the web pages loaded by NowWeb.
- Customizability: While default colors are provided, you can override any or all color values to align with your organization's branding or accessibility requirements.
Practical Use for ServiceNow Customers
- Use the NowWebColoring protocol to maintain consistent color styling for web content displayed within native iOS apps leveraging ServiceNow’s NowWeb framework.
- Customize banner colors (error, warning, success, informational) to improve user experience and clarity of messages shown to end users.
- Adjust text and background colors for readability and to match corporate branding while supporting both light and dark modes.
- Apply specific UX themes and variants through the protocol’s theme ID properties to standardize the visual appearance of web pages accessed via NowWeb.
- Leverage the provided UIColor extension properties to easily access and implement these colors in your iOS app code.
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.
| 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 |
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 }
}