NowWebColoring protocol - iOS
Summarize
Summary of NowWebColoring protocol - iOS
The NowWebColoring protocol enables ServiceNow customers to customize the default color scheme of web pages within a native web view. This protocol is essential for maintaining a consistent branding and user experience across applications hosted on ServiceNow.
Show less
Key Features
- Default Color Values: The protocol defines default background and text colors for various elements, including banners for error, success, and informational messages.
- Customizability: Customers can override the default colors to align with their branding requirements.
- Color Properties: Key properties include background colors for banners (alertCritical0, alertPositive0, etc.), text colors (alertCritical3, textPrimary), and others that control the appearance of the web interface.
- Theme Integration: The protocol includes references to the theme and theme variant IDs, allowing integration with configured UX styles.
Key Outcomes
By utilizing the NowWebColoring protocol, ServiceNow customers can achieve a personalized web interface that reflects their organizational identity. The ability to customize colors enhances user engagement and ensures that critical alerts and information are easily distinguishable. Overall, this protocol contributes to a more cohesive and visually appealing user experience across ServiceNow-hosted web applications.
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 }
}