Color variable support for icons

  • 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 Color variable support for icons

    Starting with the Yokohama release, ServiceNow enables the use of color variables to theme mobile map screen icons more effectively. This feature allows you to leverage predefined color variables from the UX Theme Properties table to control icon colors dynamically through theFontColorVariablestyle option. This approach supports consistent and accessible theming aligned with your design guidelines.

    Show full answer Show less

    Using Color Variables for Mobile Icons

    Mobile icons include a Set appearance section where you can specify the FontColorVariable style. By assigning a color variable here, you select from colors defined in the UX Theme Properties [sysuxthemeproperty] table, ensuring consistency across your app’s UI. This method simplifies managing icon colors and helps maintain compliance with accessibility standards.

    Color Palettes and Their Purpose

    Two main color palettes are provided to guide your color selections:

    • Alert Color Palette: Designed to highlight important statuses, states, and tasks. Use these colors to convey specific meanings (e.g., critical, warning, info) rather than for decorative purposes.
    • Grouped Color Palette: Reflects industry or line-of-business conventions. These colors help users associate elements with a particular context while maintaining consistency within the app.

    Both palettes offer multiple variations including accessible options that improve usability, especially when icons lack text. Using accessible color options is recommended to enhance navigability for all users.

    Color Variable Naming and Options

    Each color in the palettes is available as multiple variable options for flexibility:

    • Mobile Variables: e.g., alert--critical-2, alert--critical-3, and an accessible option alert--critical-4.
    • Web Variables: Prefixed with --now-color, such as --now-coloralert--critical-2, --now-coloralert--critical-3, and accessible --now-coloralert--critical-4.

    This naming convention applies consistently across all alert and grouped colors (e.g., high, warning, info, blue, green, purple). Selecting the right variable ensures your icons integrate seamlessly with your theme and maintain visual clarity and compliance.

    Practical Benefits for ServiceNow Customers

    • Consistent Theming: Easily align icon colors with your organization’s branding and UX theme.
    • Improved Accessibility: Use accessible color variants to enhance user experience, especially for visually impaired users.
    • Simplified Configuration: Use predefined variables rather than defining custom colors, reducing development effort and errors.
    • Clear Visual Communication: Apply alert colors to signify status and importance, and grouped colors to indicate business context effectively.

    Learn how to use color variables to change theming in your mobile map screens

    Mobile icons have a Set appearance section used to define the appearance of your icons. Use the FontColorVariable style option to use a color variable a color.

    Using this style you can define any color variable from the UX Theme Properties [sys_ux_theme_property] table. For a list available variables see the color design guide below.

    For details on creating map screens, see Configure an icon UI section.

    For details on creating icons in mobile, see Mobile icons.

    		 Color variable used in an icon

    Mobile icon color guide

    Color variables are divided into Use the design guideline to identify the right color variable for your use case.

    Alert color palette
    Alert color palette colors highlight important statuses, states and tasks. Use alert colors to communicate a specific meaning rather than for decoration or organization.
    Grouped color palette
    Grouped color palette colors follow color conventions in a line of industry. Use these colors to show that the colored item is associated with a specific industry or line of business. The meaning of each color depends on context, but should remain consistent within your app.

    Each support color has three options, including an assessable option. Consider using the accessible color option for icons that do not contain text to improve navigability for your users.

    Table 1. Alert color palette
    Color name Example Color variables
    Critical Critical mobile icons
    Mobile variables
    • Option 1: alert--critical-2
    • Option 2: alert--critical-3
    • Option 3 (Accessible): alert--critical-4
    Web variable
    • Option 1:--now-color_alert--critical-2
    • Option 2:--now-color_alert--critical-3
    • Option 3 (Accessible):--now-color_alert--critical-4
    High High mobile icons
    Mobile variables
    • Option 1: alert--high-2
    • Option 2: alert--high-3
    • Option 3 (Accessible): alert--high-4
    Web variable
    • Option 1:--now-color_alert--high-2
    • Option 2:--now-color_alert--high-3
    • Option 3 (Accessible):--now-color_alert--high-4
    Warning Warning mobile icons
    Mobile variables
    • Option 1: alert--warning-2
    • Option 2: alert--warning-3
    • Option 3 (Accessible): alert--warning-4
    Web variable
    • Option 1:--now-color_alert--warning-2
    • Option 2:--now-color_alert--warning-3
    • Option 3 (Accessible):--now-color_alert--warning-4
    Moderate Moderate mobile icons
    Mobile variables
    • Option 1: alert--moderate-2
    • Option 2: alert--moderate-3
    • Option 3 (Accessible): alert--moderate-4
    Web variable
    • Option 1:--now-color_alert--moderate-2
    • Option 2:--now-color_alert--moderate-3
    • Option 3 (Accessible):--now-color_alert--moderate-4
    Info Info mobile icons
    Mobile variables
    • Option 1: alert--info-2
    • Option 2: alert--info-3
    • Option 3 (Accessible): alert--info-4
    Web variable
    • Option: 1--now-color_alert--info-2
    • Option 2:--now-color_alert--info-3
    • Option 3 (Accessible):--now-color_alert--info-4
    Positive Positive mobile icons
    Mobile variables
    • Option 1: alert--positive-2
    • Option 2: alert--positive-3
    • Option 3 (Accessible): alert--positive-4
    Web variable
    • Option 1:--now-color_alert--positive-2
    • Option 2:--now-color_alert--positive-3
    • Option 3 (Accessible):--now-color_alert--positive-4
    Low Low mobile icons
    Mobile variables
    • Option 1: alert--low-2
    • Option 2: alert--low-3
    • Option 3 (Accessible): alert--low-4
    Web variable
    • Option 1:--now-color_alert--low-2
    • Option 2:--now-color_alert--low-3
    • Option 3 (Accessible):--now-color_alert--low-4
    Table 2. Grouped color palette
    Color name Example Color options
    Blue Blue mobile icons
    Web variable
    • Option 1:--now-color_grouped--blue-2
    • Option 2:--now-color_grouped--blue-3
    • Option 3 (Accessible):--now-color_grouped--blue-4
    Brown Brown mobile icons
    Web variable
    • Option 1:--now-color_grouped--brown-2
    • Option 2:--now-color_grouped--brown-3
    • Option 3 (Accessible):--now-color_grouped--brown-4
    Gray Gray mobile icons
    Web variable
    • Option 1:--now-color_grouped--gray-2
    • Option 2:--now-color_grouped--gray-3
    • Option 3 (Accessible):--now-color_grouped--gray-4
    Green Green mobile icons
    Web variable
    • Option 1:--now-color_grouped--green-2
    • Option 2:--now-color_grouped--green-3
    • Option 3 (Accessible):--now-color_grouped--green-4
    Green-Yellow Green-yellow mobile icons
    Web variable
    • Option 1:--now-color_grouped--green-yelow-2
    • Option 2:--now-color_grouped--green-yelow-3
    • Option 3 (Accessible):--now-color_grouped--green-yelow-4
    Magenta Magenta mobile icons
    Web variable
    • Option 1:--now-color_grouped--magenta-2
    • Option 2:--now-color_grouped--magenta-3
    • Option 3 (Accessible):--now-color_grouped--magenta-4
    Orange Orange mobile icons
    Web variable
    • Option 1:--now-color_grouped--orange-2
    • Option 2"--now-color_grouped--orange-3
    • Option 3 (Accessible):--now-color_grouped--orange-4
    Pink Pink mobile icons
    Web variable
    • Option 1:--now-color_grouped--pink-2
    • Option 2:--now-color_grouped--pink-3
    • Option 3 (Accessible):--now-color_grouped--pink-4
    Purple Purple mobile icons
    Web variable
    • Option 1:--now-color_grouped--purple-2
    • Option 2:--now-color_grouped--purple-3
    • Option 3 (Accessible):--now-color_grouped--purple-4
    Teal Teal mobile icons
    Web variable
    • Option 1:--now-color_grouped--teal-2
    • Option 2:--now-color_grouped--teal-3
    • Option 3 (Accessible):--now-color_grouped--teal-4
    Yellow Yellow mobile icons
    Web variable
    • Option 1:--now-color_grouped--yellow-2
    • Option 2:--now-color_grouped--yellow-3
    • Option 3 (Accessible):--now-color_grouped--yellow-4