ServiceNow - Optimizing Knowledge Articles for Dark Theme


Introduction

A Dark Theme has been introduced into ServiceNow with the implementation of the Next Experience User Interface. This has caused a few difficulties when viewing various content throughout the platform, as the theme - in general - inverts default colors, but leaves coded colors (those that are specified/that are "set" to a particular color) as they are. This can result in situations where the customer is seeing a white font on a very light colored background, which makes it very difficult to read. This article will give some guidelines for how to optimize your knowledge articles, so they can be easily read no matter which Theme customers choose.

Instructions

Yellow Call Out Boxes

For our yellow call out boxes, we have chosen a light yellow (#fafac8) with black font. A light yellow is chosen so that we can have good contrast with the font color for accessibility and readability. If we only change the background color of the cell, the font color is left as a default black.

Because it is a default color and not specifically chosen, this means that it will be inverted to a white font when the Dark Theme is chosen.

If you highlight the text within the call out box and specifically select "black" as the font color, the font color will not be changed when the Dark Theme is selected. Please see below for examples.

Yellow Call Out Box in the Default Theme

Yellow Call Out Box in Dark Theme

We will continue to update this article as other optimizations for Dark Theme are found. Please flag this article if you have any recommendations!