NowWebColoring protocol - iOS
Summarize
Summary of NowWebColoring Protocol - iOS
The NowWebColoring protocol defines default color values for web pages hosted on your ServiceNow instance in a native web view. These colors enhance the user interface by providing a consistent look and feel across different components of the web application.
Show less
Key Features
- Customizable Color Palette: The protocol includes default colors for various UI elements such as error banners, success messages, and background views, which can be overridden as needed.
- Defined Color Properties: Key properties include alertCritical0 for error banners, alertPositive0 for success banners, and backgroundPrimary for the main view background, each with specified dark and light color variants.
- Integration with UX Themes: Integrates with the UX Theme and UX Style tables to apply specific themes and variants to web pages.
Key Outcomes
By utilizing the NowWebColoring protocol, ServiceNow customers can:
- Ensure a cohesive and visually appealing user experience across web interfaces.
- Customize the appearance of web pages to align with branding and usability standards.
- Quickly adapt the color scheme for different themes by leveraging the provided system IDs for themes and variants.
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 }
}