Dark Theme

MatthewPearson
Tera Contributor

For some time I've wanted to convert my screen-use to be white text on a black background instead of the generally used black text on a white background - quite simply I find it easier on the eyes that way. Whilst recent versions of ServiceNow have moved a little in that direction, I wanted to be able to take this all the way, and as I spend much of my work time developing in ServiceNow across a variety of customer systems, each one can be on a different version with different configurations.

Enter userstyles.org a site that provides a lot of contributed themes that re-style a website in a particular way, for sites such as google, facebook, linkedin and so on. These styles use a browser plugin that is available for the major browsers and is all free to use. Note: this is totally browser based.

I've put together a dark theme for ServiceNow that can be used to make it gentler on the eyes. Simply go to ServiceNow Dark by TeamUltra - Themes and Skins for Service-now - userstyles.org - it will direct you to install the 'Stylish' plugin first and then click the button to install the new style.

Please note that I'm providing a way for a user to choose via their individual browser how they want to view ServiceNow without any changes to the ServiceNow instance itself. I cannot guarantee that this will not remove some corporate branding.

If you like the idea and try it, then please let me know. Also, let me know if there are improvements to make (as the ServiceNow platform is vast there is no way for my first version to cover all use cases).

Hopefully this might give others a little light relief!

ServiceNow Dark By TU.png

11 REPLIES 11

Greg35
Kilo Contributor

Give this one a try. Its modeled after the Microsoft dark theme.

 

/* Header Colors */
/* Search text color */
$search-text-color: #eee
/* Topbar background color*/
$navpage-header-bg: #222
/* Topbar text color */
$navpage-header-color: #fff
/* Bottom border color on topbar */
$navpage-header-divider-color: #333

/* Left nav and navigation toolbar background color */
/* Navigator hover color */
$nav-highlight-main: #505050
/* Background for expanded navigation items */
$subnav-background-color: #323130
/* Backgorund for navigator (left side only). */
$navpage-nav-bg: #222
/* Background for Favorites list, history list, and Connect list background. */
$navpage-nav-bg-sub: #222
/* Text color in main navigation */
$navpage-nav-color-sub: #eee
/* Text color when hovering over items in main nav */
$navpage-nav-mod-text-hover: #000
/* Divider color in Navigator */
$nav-hr-color: #444

/* Navigator tabs */
/* Active nav item underneath search */
$nav-highlight-bar-active: #505050
/* Inactive nav items underneath search */
$nav-highlight-bar-inactive: #555
/* Background for currently selected navigation item underneath search */
$navpage-nav-selected-bg: #505050
/* Color of icon for currently active nav item. */
$navpage-nav-selected-color: #333
/* Color of icons for non inactive nav items.*/
$navpage-nav-unselected-color: #505050

/* Navigator Application text */
/* Color for latest connect messages in right bar. */
$connect-latest-message: #D5FCB2
/* Timestamp header backgrounds in History tab*/
$nav-timeago-header-color: #505050
/* Core content text color */
$navpage-nav-app-text: #eee
/* Core content text color hover*/
$navpage-nav-app-text-hover: #000

/* Color of outline for search */
$navpage-nav-border: #505050
/* Default button/icon colors */
$navpage-button-color: #fff
/* Hover color for ^^^ */
$navpage-button-color-hover: #505050

SamSepiol
Mega Contributor

Until Service-now comes up with its own dark mode, use it chrome and force the dark mode. It works seamlessly and in all the tabs.

Paste this(chrome://flags/#enable-force-dark) link in the chrome URL space and hit enter, enable the option it bring up and relaunch chrome. Voila !!