
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-18-2016 01:43 PM
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:
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):
Solved! Go to Solution.
- Labels:
-
User Interface (UI)

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-20-2016 05:56 AM
Hi Shawn,
You can still use $color-accent to define those colors. Just add it to your theme definition:
$color-accent: #008B8B
Maybe your problem is that you haven't defined the base.color in $color-accent: ${base.color};
Regards,
Telmo
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-18-2016 02:44 PM
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

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-20-2016 05:56 AM

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-20-2016 09:58 AM
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};

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-21-2016 12:03 AM
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