Enabling Dark Mode in the Code Editor

If you’ve developed any significant period of time within ServiceNow. You’re likely very accustomed to the coding editor utilized for displaying code snippits. Your eyes might still be bleeding if you’ve looked at that full screen all white editor for more than a couple hours.

Today we’re going to look at how to add your own theme to the code editor, and how the development could be expanded from there!

ServiceNow actually made use of an open source web code editor called CodeMirror. Thankfully CodeMirror has a robust theming system built in.

Check out their theme demo site to play around and find which theme you like most.

Once you’ve picked out what theme you want navigate to their theme repository and download the CSS file. Next you’ll need to open up the text editor like Notepad++ and replace the CSS class, example: ‘cm-s-mbo’ with the ServiceNow class ‘cm-s-snc’.

Next navigate to your ServiceNow instance, to the table ‘content_css’. Create a new record and paste in your CSS code.

Finally we’re going to load our custom CSS code via an onLoad client script off the sys_metadata table. This will apply the client script code to any configurable record.

var cssId = 'myCss';
if (!document.getElementById(cssId)){
  var head = document.getElementsByTagName('head')[0];
  var link = document.createElement('link');
  link.id = cssId;
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = 'https://' + window.location.host + '/<sysid here>.cssdbx';
  link.media = 'all';
  head.appendChild(link);
}

Finally open up any record with a script and enjoy the change. Pro tip, if not all your coworkers like the theme, you may consider configuring some rules in the client script.