THIS IS NO LONGER RELEVANT, THE ISSUE IS FIXED IN PARIS
In New York release ServiceNow has changed the appearance of the toggle switches. Here it's before the change:
And here's how they look in New York:
Not the best colour choice especially if you are used to setting your display brightness to 60% or even lower (we have a pretty thick cloud cover so it's really dark even during the day) and have some colour deficiency issues. ServiceNow is well aware of this (check PRB1348033 on HI), but there are currently no plans to fix this. Because of that, I decided to make a small DOM hack to revert the toggle switches back to a more distinct colour.
And before someone comments below "But DOM manipulation is not recommended!", I know. Since this is only a small CSS hack and not something truly critical, I doubt it will affect anything during upgrades, and if there is a fix for this colour scheme in some future upgrade, that's even better.
So, I created this UI script to change the colour scheme:
Name: Toggle Switch Colour Change
UI Type: Desktop
Global: TRUE
Active: TRUE
Description: Change the toggle switch colour to make its on/off state easier to understand
addLoadEvent(updateToggleSwitchColour);
function updateToggleSwitchColour() {
try {
var switchClass = '.input-switch input[type=checkbox]:checked ~ .switch';
var stylesheets = getTopWindow().document.styleSheets;
if (stylesheets) {
stylesheets[stylesheets.length-1].insertRule(switchClass + '{ background-color: #29b451 }', stylesheets[stylesheets.length-1].cssRules.length);
}
}
catch (e){}
}The way it works is it adds a load event that appends an extra style definition at the very end of the existing stylesheet list (so we override the original one). I didn't like the original colour (#71e279), so I made it a bit darker.
Hope someone finds this useful 🙂
