This onLoad client script shows how to change the background color of form buttons in ServiceNow. For this example, I set up the script to change the color of the ‘Approve and ‘Reject’ buttons on the approval form to green and red respectively. The script itself is pretty straight-forward and can be used as a model for targeting other DOM elements using client-side JavaScript.

function onLoad() {
   //Change the color of the 'Approve' button to green
   changeButtonColor('approve', '#00CC00');
   //Change the color of the 'Reject' button to red
   changeButtonColor('reject', '#CC0000');
}

function changeButtonColor(buttonID, backgroundColor) {
   try{
      //Find the button(s) by ID and change the background color
      $$('button[id=' + buttonID + ']').each(function(elmt) {
         elmt.style.backgroundColor = backgroundColor;
         elmt.style.color = '#ffffff'; //make the button text white
      });
   }catch(e){}
}

If you want to take this step a little bit further, you can add icons to UI actions.
Fortunately, with the addition of a new icon set in recent ServiceNow releases, this has become pretty simple to do.

• Twitter
• LinkedIn

The following script can be used in any standard form client script. The key is the ‘transformButton’ function at the bottom. This could be included as a global UI script in your instance so that you don’t need to include it in every single client script. Once that’s in place (whether in a global UI script or in the client script itself) you can just call ‘transformButton’ with the appropriate parameters to change the button however you want. The parameters used are as follows…

1. UI action name (Mandatory)
2. Button background color (Optional)
3. Button text color (Optional)
4. Button icon name (Optional)

function onLoad() {
    //Change the color of the 'Approve' button to green
    transformButton('approve', '#77FF77', 'white', 'icon-success-circle');
    //Change the color of the 'Reject' button to red
    transformButton('reject', '#FF0022', 'white', 'icon-error-circle');
    //Change the color of the 'Info' button to blue
    transformButton('info_button', '#31708f', 'white', 'icon-info');
    //Change the color of the 'Warning' button to yellow
    transformButton('warning_button', '#f0ad4e', 'white', 'icon-warning-circle');
}

function transformButton(buttonID, buttonBackgroundColor, buttonTextColor, buttonIconName) {
    try{
        //Find the button(s) by ID and change the background color
        $$('button[id=' + buttonID + ']').each(function(elmt) {
            elmt.style.backgroundColor = buttonBackgroundColor;
            if(buttonTextColor){
                elmt.style.color = buttonTextColor;
            }
            if(buttonIconName){
                elmt.addClassName(buttonIconName);
                //Add some spacing between the icon and button label
                elmt.innerHTML = ' ' + elmt.innerHTML;
            }
        });
    }catch(e){}
}

This same idea can be applied to form header colors as well by getting the HTML element of the form. You’re probably aware that ServiceNow provides a global CSS property to set the form and list header color. The global property can be found by navigating to System Properties -> CSS, and changing the ‘Banner and list caption background-color property.

function onLoad() {
   //Change the color of all form section headers
   var backgroundColor = 'red';
   $$('.navbar').each(function(elmt) {
      elmt.style.backgroundColor = backgroundColor;
   });
}

 (All credits go to ServiceNowGuru for this awesome finding!)

[Updated 30/09/2019]

As you may notice, the UI action element names differ (top from bottom) and for this, you need to add them also – you can verify the names by getting the HTML element of the form. (tested in Madrid)

function onLoad() {

changeButtonColor('approve', 'limegreen', 'white'); //approve button header
changeButtonColor('reject', 'red', 'white'); //reject button header
changeButtonColor('approve_bottom', 'limegreen', 'white'); //approve button bottom
changeButtonColor('reject_bottom', 'red', 'white'); //reject button bottom
}

function transformButton(buttonID, buttonBackgroundColor, buttonTextColor, buttonIconName) {
    try{
        //Find the button(s) by ID and change the background color
        $$('button[id=' + buttonID + ']').each(function(elmt) {
            elmt.style.backgroundColor = buttonBackgroundColor;
            if(buttonTextColor){
                elmt.style.color = buttonTextColor;
            }
            if(buttonIconName){
                elmt.addClassName(buttonIconName);
                //Add some spacing between the icon and button label
                elmt.innerHTML = ' ' + elmt.innerHTML;
            }
        });
    }catch(e){}
}

You can now change the colour by picking a form style.

• Twitter
• LinkedIn

I hope this helps.