Change Button Colors in Geneva UI16

Shawn Dowler
Tera Guru

I am working on upgrading to Geneva and UI16 and I can't find a way to eliminate blue from parts of the theme. UI15 was easy, since I could use the base.color to affect most of the element I cared about. This had the nice benefit of provided a drastically different view for dev and test instances that production. Here is what I had in UI15, where I was able to get rid of almost all the light blue:

Screen Shot 2016-04-18 at 1.36.58 PM.png

Is there any way to target related links and the circled i and the filter icon and the new button? I achieved all of this before with the following simple theme:

$highlight-color: ${base.color};

$accent-color: ${base.color};

$accent-color-dark: ${base.color};

$accent-color-light: ${base.color};

$color-accent: ${base.color};

This is what it looks like now (the purple stripe would be maroon in production):

Screen Shot 2016-04-18 at 1.36.09 PM.png

1 ACCEPTED SOLUTION

telmo
Tera Expert

Hi Shawn,



You can still use $color-accent to define those colors. Just add it to your theme definition:



$color-accent: #008B8B



find_real_file.png



Maybe your problem is that you haven't defined the base.color in   $color-accent: ${base.color};



Regards,


Telmo


View solution in original post

11 REPLIES 11

Manjul Katare
ServiceNow Employee
ServiceNow Employee

Hi Shawn,



I'm not sure if you can change the blue color (#278efc) being used at multiple place as its css definition is buried under SCSS file and the color is applied to different element using substitution method. For the same reason you would notice that you could apply different theme but icon colors, button background, tab borders & clickable text is always in blue.



There might be hacks like overwrite css definition with Java Script but I would not recommend as it you would run that on every page load/refresh which would not be efficient way to resolve this issue.



Thanks,


Manjul


telmo
Tera Expert

Hi Shawn,



You can still use $color-accent to define those colors. Just add it to your theme definition:



$color-accent: #008B8B



find_real_file.png



Maybe your problem is that you haven't defined the base.color in   $color-accent: ${base.color};



Regards,


Telmo


To be honest, I didn't even try using the CSS properties from UI15 in a UI16 theme until you suggested it.



This was really helpful. I found that it doesn't apply universally and still leaves a lot of blue that's defined in the base style sheet (for instance, the Change form's tabs and Related Links show up blue, but it works in other places. I toyed with adding !important, but that made every link (a) tag turn the base color. For the time being my new theme looks like this:



$color-accent: ${base.color};


$nav-highlight-bar-active: ${base.color};


Yes it doesn't work for all of them. It's a shame the documentation on it is lacking. And also, that in UI16 they use the same property for different things when we could want a different color for them.



My new theme looks like this:



/* base.color: #228038


banner.description.color: #228038


/* Color for hover for right button in some places */


base.color: #228038



/* color of buttons/filters/column names in lists */


/* $color-accent: #228038 */



/*


base.color-dark: #006666


base.font-family: Arial


base.font-size: 1.2rem


base.font-letter-spacing: 0px




$color-accent-light: #006666


$color-accent-dark : #006666


$highlight-color: #008B8B


*/



/* Header Colors */


/* Topbar background color*/


$navpage-header-bg: #228038


/* Topbar text color and history hover color */


/*


$navpage-header-color: #272428


*/


$navpage-header-color: #fff


/* Bottom border color on topbar */


$navpage-header-divider-color: #1b652c


/* Default button/icon colors */


$navpage-button-color:   #272428



$navpage-header-button-color: #fff



$navpage-button-color-hover: #fff



/* Search Colours */


/* Search text color */


$search-text-color: #272428


/* Color of outline for search */


$navpage-nav-border: #bbb



/* Left nav and navigation toolbar background color */


/* Navigator hover color */


$nav-highlight-main: #228038


/* Background for expanded navigation items */


$subnav-background-color: #fff


/* Background for navigator (left side only). */


$navpage-nav-bg: #f2f2f2


/* Background for Favorites list, history list, and Connect list background. */


$navpage-nav-bg-sub: #fff


/* Text color in main navigation */


$navpage-nav-color-sub: #343D47


/* Text color when hovering over items in main nav */


$navpage-nav-mod-text-hover: #fff


/* Divider color in Navigator */


$nav-hr-color: #244D81



/* Navigator tabs */


/* Active nav item underneath search */


$nav-highlight-bar-active: #1b652c


/* Inactive nav items underneath search */


$nav-highlight-bar-inactive: #EAEAEA


/* Background for currently selected navigation item underneath search */


$navpage-nav-selected-bg: #228038


/* Color of icon for currently active nav item. */


$navpage-nav-selected-color: #fff


/* Color of icons for non inactive nav items.*/


$navpage-nav-unselected-color: #737373



/* Navigator Application text */


/* Color for latest connect messages in right bar. */


$connect-latest-message: #777


/* Timestamp header backgrounds in History tab*/


$nav-timeago-header-color: #8c8c8c


/* Core content text color */


$navpage-nav-app-text: #343D47


/* Core content text color hover*/


$navpage-nav-app-text-hover: #fff