Other posts related to Themes
"Helsinki Gray" UI16 Theme
Jakarta Theme Properties Visual Guide
Kingston Theme Properties Visual Guide
In a previous post, "Helsinki Gray" UI16 Theme, I wrote about a new Theme I designed for Helsinki. I tried to reproduce the look in Istanbul but ran into some issues because of changes to how the Theme properties are used on the controls. So I spent some time trying to understand which properties set the color of what controls. Took awhile to do and decided to share what I found here.
Test Theme Record
While trying to figure everything out, I created a new test Theme called "Istanbul Test", similar to the one I created for Helsinki:
I realize it's ugly. Really ugly, but I made it that way in order for the different controls to stand out from each other, so it did have to be kinda crazy looking. I used the standard HTML color names to make it easier to spot where they are used. Here's the CSS for it:
/* Istanbul Test
Created by Jim Coyne - https://community.servicenow.com/people/jim.coyne
This is to help show what elements are affected by the CSS colors - PLEASE, PLEASE, PLEASE DO NOT ACTUALLY USE THIS THEME FOR REAL :-)
It uses HTML color names to hopefully make it a little easier to understand and find the color
The comments include a copy of the UI16 default value:
https://docs.servicenow.com/bundle/istanbul-servicenow-platform/page/administer/navigation-and-ui/reference/r_DefaultCSSStyle.html
I've added my own comments within () to hopefully clarify what is affected by the color
*/
/* Header Colors */
$navpage-header-bg: DodgerBlue /* #303a46 Topbar background color (the banner) */
$navpage-header-color: Aqua /* #ffffff Topbar text color and history hover color (Banner title text, Global Search + Application + Update Set icon outlines) */
$navpage-header-button-color: Coral /* (Logged-in user name text + Connect, Help and Settings icons) */
$navpage-header-divider-color: FireBrick /* #455464 Bottom border color on topbar (banner separator line) */
$navpage-button-color: BlueViolet /* #ffffff Default button/icon colors (Nav bar [maximized] buttons, Favorite and History 1st line text, Connect msg record display value and Create a new converstaion icon) */
$navpage-button-color-hover: Yellow /* #7ec24F Topbar buttons hover color (Global Search, Connect, Help and Gear icons hover + clear search text icon hover + selected Nav bar icon [temporary effect only]) */
/* Search Colours */
$search-text-color: LightGreen /* #e7e9eb Search text color (+ clear search text icon + Nav bar [minimized] buttons) */
$navpage-nav-border: Magenta /* #dddddd Color of outline for search (Global, Nav and Connect search box outlines + outline of logged-in user control when selected) */
/* Left nav and navigation toolbar background color */
$nav-highlight-main: LightSkyBlue /* #3D4853 Navigator hover color (Last Module/Favorite/History/Connect/Help item selected [temporary effect only]) */
$subnav-background-color: SlateGray /* #455464 Background for expanded navigation items (NO IDEA) */
$navpage-nav-bg: BurlyWood /* #303a46 Background for navigator (left side only). (Nav bar, Connect bar and Module backgrounds + History separators) */
$navpage-nav-bg-sub: Pink /* #455464 Background for Favorites list, history list, and Connect list background. (background for Apps/Favorites/History and Connect/Help bars and selected icon when editing a favorite) */
$navpage-nav-color-sub: Tomato /* #bec1c6 Text color in main navigation (NO IDEA) */
$navpage-nav-mod-text-hover: Purple /* #ffffff Text color when hovering over items in main nav (NO IDEA) */
$nav-hr-color: YellowGreen /* #303a46 Divider color in Navigator (Separator module [ones without a label]) */
/* Navigator tabs */
$nav-highlight-bar-active: Red /* #278efc Active nav item underneath search (thin line under selected Apps, Favorites or History icons, selected Connect, Help or Gear icon + number of Connect msgs dot) */
$nav-highlight-bar-inactive: PaleGoldenRod /* #828890 Inactive nav items underneath search (thin line under Apps, Favorites or History icon when not selected) */
$navpage-nav-selected-bg: Olive /* #4b545F Background for currently selected navigation item underneath search (background for selected Apps, Favorites or History icon) */
$navpage-nav-selected-color: OrangeRed /* #ffffff Color of icon for currently active nav item. (Apps, Favorites or History icon when selected) */
$navpage-nav-unselected-color: Orange /* #bec1c6 Color of icons for non inactive nav items. (Apps, Favorites or History icon when not selected and Module title text) */
/* Navigator Application text */
$connect-latest-message: White /* #cfd4d8 Color for latest connect messages in right bar. (NO IDEA) */
$nav-timeago-header-color: Cyan /* #303a46 Timestamp header backgrounds in History tab (NO IDEA) */
$navpage-nav-app-text: Black /* #cfd4d8 Core content text color (Application title, History hover + 2nd line text + separator text, Connect "OPEN CONVERSATIONS" + "No results found" + message line text, Help bar title + hover text) */
$navpage-nav-app-text-hover: #ffffff /* #ffffff Core content text color hover (NO IDEA) */
I used one of the OOB Theme records (I forget which one it was) as a starting point and added my own comments within () to hopefully clarify what is affected by the property. Some of the comments from the OOB Theme are incorrect now in Istanbul. I've added a comment of "NO IDEA" to some of the properties because I do not know what they control now, and suspect they no longer affect anything.
Here are the property names, along with it's default value, used in the Theme record and screenshots of the controls/areas they affect. I used yellow as the value for each property so the controls would stand out in the screenshots (sorry for the flash of yellow about half-way down the article ).
$navpage-header-bg - #303a46
- Banner frame background
$navpage-header-color - #ffffff
- Banner frame title text
- Global Search, Application and Update Set icon outlines
$navpage-header-button-color (no default, not documented)
- Logged-in user name text
- Connect, Help and Settings icons
$navpage-header-divider-color - #455464
- Banner frame separator line
$navpage-button-color - #ffffff
- Buttons in the Navigator bar (when maximized)
- Favorite items text
- 1st line of History items
- Connect message record display value text
- Create a New Conversation, Open Connect standalone interface and Close Connect Sidebar icons
$navpage-button-color-hover - #7ec24F
- Global Search, Connect, Help and Settings icons when cursor is over the control (only the Global Search icon is highlighted in the first screenshot below but the others will highlight when the cursor is over them)
- Clear search text icon when cursor is over the control in Navigator and Connect sidebar
- Navigator bar icon when clicked (some browsers [e.g. Chrome] only remove the highlight after cursor is clicked elsewhere)
$search-text-color - #e7e9eb
- Global Search, Navigator and Connect search text
- Clear search text icon in Navigator and Connect search boxes
- Navigator bar icons when minimized
$navpage-nav-border - #dddddd
- Global Search, Navigator and Connect search box outlines
- Navigator and Connect search box filter icons
- Outline of logged-in user control when selecting a drop-down menu item
$nav-highlight-main - #3D4853
- Module/Favorite (not in Safari)/History/Help item when clicked (each browser has its own quirks with this one - Safari only shows while clicking the item, others will keep the highlight a second or so, and some keep the Help item highlighted until the cursor is clicked elsewhere)
- Selected Connect item (remains highlighted until another is selected or another record's chat window is selected or the record's chat window is closed)
- Vertical separator line between main frame and Navigator/Sidebars
$navpage-nav-bg - #303a46
- Navigator, Connect and Help Sidebar header and footers
- Unselected Navigator tabs background
- Module background
- History time separator background
$navpage-nav-bg-sub - #455464
- Navigator, Connect and Help Sidebar backgrounds
- Background for Apps/Favorites/History
- Selected icon when editing a Favorite
$nav-hr-color - #303a46
- Separator modules without a label
$nav-highlight-bar-active - #278efc
- Highlight line under active Navigator tab (Apps, Favorites or History)
- Selected Connect, Help or Settings icon (only the Connect icon is highlighted in the screenshot below but the others will highlight when clicked/selected)
- Number of Connect messages dot
- Outline of logged-in user control when selected
$nav-highlight-bar-inactive - #828890
- Line under inactive Navigator tab
$navpage-nav-selected-bg - #4b545F
- Background for currently selected Navigator tab (Apps, Favorites or History)
$navpage-nav-selected-color - #ffffff
- Active Navigator tab icon (Apps, Favorites or History)
$navpage-nav-unselected-color - #bec1c6
- Inactive Navigator tab icons (Apps, Favorites or History)
- Module title text
$navpage-nav-app-text - #cfd4d8
- Application title text and Application hover title text
- Edit Application and Add to Favorites icons
- History time separator text
- History 2nd line text
- History hover text
- Connect message text
- Connect "OPEN CONVERSATIONS" and other informational text
- Help sidebar title and hover text
No Longer Used?
Here are some properties used in Helsinki that do not seem to be used in Istanbul anymore:
- $subnav-background-color - #455464
- $navpage-nav-color-sub - #bec1c6
- $navpage-nav-mod-text-hover - #ffffff
- $connect-latest-message - #cfd4d8
- $nav-timeago-header-color - #303a46
- $navpage-nav-app-text-hover - #ffffff
The default values listed are from Helsinki.
Unkown Properties
Here are a few controls or places in the UI that I do not know the name of the property that controls the color:
- Search boxes placeholder text
- Unselected Apps/Favs/History icon hover background
- Last Application selected background
- Application hover background
- Module hover background
- Icon hover backgrounds (Banner frame, Nav bar, Connect, etc...)
Setting a Default Theme for Users
The currently selected Theme for each user is saved in a User Preference called "glide.css.theme.ui16". The value of the preference contains either "system" for the "System" Theme or the sys_id of one of the other Theme records.
You can set a default Theme for everyone by creating a new User Preference record with the "System" field checked and the "User" field left empty. That will set the Theme for each user until they actually select a different one, which will then be saved in a User Preference record of their own.
Setting a default Theme does not, however, affect the look of the login page - it will use the properties of the "System" Theme - and that would look a little odd, the colors switching on the user as they login.
Overriding the "System" Theme
You may have noticed that all the Themes that are listed in the System Settings popup window have a corresponding Theme record (System UI \ Themes) except for the "System" one:
That's because the "System" Theme uses hard-coded values and System Properties to override them. To override a "System" Theme color, you must create or edit one of the System Properties and not an actual Theme record. The name of the System Property would be "css." + name of the css property from above (e.g. "css.$nav-highlight-bar-active")
What's Missing?
The most obvious omission with the Theme concept, I believe, is the ability to set a banner frame logo right in the Theme record because some themes may have a light background, requiring a dark logo, while others may have a dark background requiring a lighter logo.
I also believe some properties should not be shared. For instance, the Global Search and Navigator search text colors should be controlled by different properties because the banner background may be a light color requiring a dark text color for the Global Search text box and the Navigator background may be darker, requiring a lighter color for it's search text. Same thing for their control outlines.
Please Create a System Theme record
It would be a lot more useful if the "System" Theme was actually a record instead of all the System Properties. Would make editing the default Theme a lot easier.
Resources
Here are a couple links to the Istanbul docs and other pages that may be useful:
Updates
I'll try to keep this post updated with anything new that I find. Please let me know if I've missed anything. Thanks in advance.
Updated Thursday, April 20, 2017
- added "$navpage-header-button-color" property
27 Comments
