Time for customizing: ServiceNow CSS Themes for Now Platform UI

It’s time for customizing the ServiceNow instance. In this article I’ll explain you how to create custom CSS themes for your ServiceNow instance.

In our company we wanted to customize our instance with two themes. A light one and a modern looking dark one. The most popular pros of dark themes are, they are battery saving, good to look at and more important, they are better four your eyes ūüėČ but only if you are working on night-time or dimmer workspaces. When you work in bright environments, a light theme is better for your eyes.

Both themes should be leaned to our corporate identity. So we asked our marketing to get the color codes. Since the color codes are in RGB we had to transform them into hex color codes. You can find a appropriate website below under Related Lists.

Required Roles
admin

UI16
The easiest way to customize the look of your instance is to edit the System Properties -> Basic Configuration UI16 module. In this module you are able to change some popular design options like the following:

Label Description Related System Property
Page header caption Custom Text in the Banner Frame. glide.product.description
Browser tab title Title of the browser tab.
Note: the browser tab title is divided into two sections: the title of the current displayed module and the defined Browser tab title. Both separated by a ‘|’ character.
undefined
Knowledge is the current selected module ant ‘ITSM universe – DEV’ is the Browser tab title.
glide.product.name
System timezone for all users unless overridden in the user’s record Select the time zone in the choice list. This is the default time zone every user has initially selected. The user is able to change this time zone in the user settings. You can click on Configure available time zones to prevent the users from selecting unnecessary time zone. glide.sys.default.tz
Banner image for UI16 Add a custom logo. glide.product.image.light
Date format Time format Select the date and time formats from the choice lists glide.sys.date_format Glide.sys.time_format
Header background color Color for the Banner Frame background.
undefined
css.$navpage-header-bg
Banner text color Color for the Banner Frame text.undefinedcss.$navpage-header-color
Header divider stripe color Color for the divider between the Banner Frame and the Application Navigator.undefined css.$navpage-header-divider-color
Navigation header/footer Color for the header/footer of the Application Navigator section.undefinedcss.$navpage-nav-bg
Navigation background expanded items Background color for the expanded modules in the Application Navigator.undefined css.$subnav-background-color
Module text color for UI16 Color for the module text.undefined css.$navpage-nav-color-sub
Navigation selected tab background color Color for the active tab in the Application Navigator.undefined css.$navpage-nav-selected-bg        
Navigation selected tab divider bar color         Color of the divider of the active tab and the Application List in the Application Navigator.
undefined
Note: This color is also used as part of the theme preview on the Themes tab under system settings.
css.$nav-highlight-bar-active        
Navigation unselected tab divider bar color         Color of the divider of the inactive tab and the Application List in the Application Navigator.undefined css.$nav-highlight-bar-inactive        
Navigationseparator color Color for the divider of  navigation separator.undefinedcss.$nav-hr-color
Background for navigator and sidebars         Background color of the navigator and sidebars.undefinedcss.$navpage-nav-bg-sub        
Currently selected Navigation tab icon color for UI16         Color of the active Navigation tab icon.undefinedcss.$navpage-nav-selected-color        
Unselected navigation tab icon and favorite icons color         Color of the inactive Navigation tab icon.undefinedcss.$navpage-nav-unselected-color        
Border color for UI16         Select or enter the color. Also affects the border of the Filter conversations search box in the Connect Chat sidebar.undefined css.$navpage-nav-border        
Selected base theme¬†¬†¬†¬†¬†¬†¬†¬† Switches the main content (everything other than the application navigator and the header) between the La Jolla and Cobalt themes. glide.ui.base_theme.selected_theme        

Do not forget to Save your settings. ūüėČ

Base Theme
Maybe you are asking yourself, what the base theme is as I have done. Therefore I want to provide clarity.

The two base themes are ‘La Jolla’ and ‘cobalt’. La Jolla is the new brand theme for ServiceNow. Since the Upgrade from previous Versions to Madrid, the theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system will not be upgraded.

CSS class support
With CSS variables you have more power to customize the look of the instance than with the Basic Configuration UI16 module.

CSS class Description How to configure Affected area
$navpage-header-bg Header background color Navigate to System Properties > Basic Configuration UI16 > Header background color
$navpage-header-color Color for header text and the global search icon Navigate to System Properties > Basic Configuration UI16 > Banner text color
$navpage-header-button-color Color for logged in user name text, and the global searchConnect, Help, and settings icons Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-header-divider-color Header divider color Navigate to System Properties > Basic Configuration UI16 > Header divider stripe color
$navpage-button-color Color for the following icons in the sidebars Expand/collapse Create a conversation (in the Connect sidebar) Open Connect workspace Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-button-color-hover Color for the following icons when a user points to the control: Global search Help Settings Clear text icon in the navigation filter Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$search-text-color Color of the search text, both in the navigation filter and the global search fields Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-nav-border Border color for the navigation filter and the conversation filter Navigate to System Properties > Basic Configuration UI16 > Border color for UI16
$nav-highlight-main Highlights the module after the user has clicked it. In the Connect workspace, highlights the selected conversation. Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$subnav-background-color Background for expanded navigation items Navigate to System Properties > Basic Configuration UI16 > Navigation background expanded items
$navpage-nav-bg Header and footer for navigator and sidebars. Navigate to System Properties > Basic Configuration UI16 > Navigation header/footer
$navpage-nav-bg-sub Background for navigator and sidebars Navigate to System Properties > Basic Configuration UI16 > Background for navigators and sidebars
$navpage-nav-color-sub Text color for modules in the main navigation Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-nav-mod-text-hover Text color when hovering over items in the main navigation Not supported Not supported
$nav-hr-color Navigator separator color Navigate to System Properties > Basic Configuration UI16 > Navigation separator color
$nav-highlight-bar-active Line under the active tab in the application navigator. This color is also used as part of the theme preview on the Themes tab under system settings. Navigate to System Properties > Basic Configuration UI16 > Navigation selected tab divider bar color
$nav-highlight-bar-inactive Line under the inactive tabs in the application navigator Navigate to System Properties > Basic Configuration UI16 > Navigation unselected tab divider bar color
$navpage-nav-selected-bg Navigation selected tab background color Navigate to System Properties > Basic Configuration UI16 > Navigation selected tab background color
$navpage-nav-selected-color Currently selected Navigation tab icon color Navigate to System Properties > Basic Configuration UI16 > Currently selected Navigation tab color for UI16
$navpage-nav-unselected-color Unselected navigation tab icon and favorite icons color Navigate to System Properties > Basic Configuration UI16 > Unselected navigation tab icon and favorite icons color
$connect-latest-message Color of the currently selected message in Connect Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$nav-timeago-header-color Timestamp header backgrounds in History tab Not supported Not supported
$navpage-nav-app-text Core content text color for items such as applications and the empty state text for the Connect sidebar. Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.
$navpage-nav-app-text-hover Text color for a selected module Add the CSS property to the CSS field of a theme. For more information, see Create or customize a theme.

Add Theme
I’ll provide you two examples of themes, a dark and a light one. Maybe you’ll need to play with your color variables to get the best suited design for your instance. In some cases you could set one color to two variables and the worst could be to no longer see your text. The best is to test your custom CSS themes in your companies dev instance or your personal dev instance. ūüėČ

To upload your custom theme, go to System UI -> Themes and click New.

You have to provide the following information:
Name: provide a name for your theme like COMPANYNAMELight or COMPANYNAMEDark.
Base Theme: Selest a base theme. As you learnd, select the La Jolla theme.
Application: keep Global.
Active: select if you are ready to offer the theme for your coworkers.
CSS: provide the CSS variables and settings in the following format:
$navpage-header-bg: #3c3c3c
Device: select one of the following from the Device choice list to identify the user interface version for the theme:

Option Description
Browser Identifies a Legacy: UI11 theme.
Doctype Identifies a UI15 theme.
Concource Identifies a UI16 theme.

To apply the theme, go to Settings in the Banner Frame, Theme and then choose your preferred theme.

Note: When you are already creating themes for the prod instance, keep thinking on create one single theme with other colors for your dev or each other instance in order to be able to distinguish them visually quickly.

Download

Referred Links
https://docs.servicenow.com/bundle/newyork-platform-user-interface/page/administer/navigation-and-ui/reference/customizing-instance-appearance.html
https://www.color-hex.com/
https://docs.servicenow.com/bundle/newyork-platform-user-interface/page/administer/navigation-and-ui/task/t_ConfigureLogoColorsSysDfltsUI16.html