Kingston Theme Properties Visual Guide

[Jim Coyne]

Other posts related to Themes
"Helsinki Gray" UI16 Theme
Istanbul Theme Properties Visual Guide
Jakarta Theme Properties Visual Guide

We are talking about Themes once again in this post, this time for the Kingston release.

Test Theme Record

Here is everyone's favorite Theme record, updated for Kingston:

/* Kingston 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 for Kingston:

              https://docs.servicenow.com/bundle/kingston-servicenow-platform/page/administer/navigation-and-ui/reference/r_DefaultCSSStyle.html

 

      Refer to this post for more information:

              https://community.servicenow.com/community/develop/blog/2017/11/22/kingston-theme-properties-visual-guide

*/


/* Mostly Banner */

$navpage-header-bg: DodgerBlue   /* #303a46 - banner background   */

$navpage-header-color: Aqua  /*  #ffffff - banner frame title text + Domain and Encryption Context picker icons   */

$navpage-header-button-color: Coral /*   no default, not documented - logged-in user name + Connect, Help and Settings icons     */

$navpage-header-divider-color: FireBrick   /*   #455464 - banner separator line   */

$navpage-button-color: BlueViolet   /*   #fff - Update Set and Application icons + Navigator icons + Connect icons   */

$navpage-button-color-hover: Yellow   /*   #7EC24F - banner icons + clear search text icons + Navigator buttons when clicked   */

 
 
/* Mostly Navigator */

$navpage-nav-bg: BurlyWood   /*   #303a46 -   Navigator and Sidebar header and footers + unselected Navigator and Connect tabs background + History time separator background   */

$navpage-nav-bg-sub: Pink   /*   #455464 - Navigator and Sidebar backgrounds + background for Applications, Favorites and History entries   */

$nav-highlight-main: LightSkyBlue   /*   #3D4853   - Module, Favorite, History, Connect and Help item when clicked   */

$subnav-background-color: SlateGray   /*   #455464 - Module background   */

$navpage-nav-app-text: Black /*   #cfd4d8 - Application, Favorite and History text + Connect and Help text   */

$navpage-nav-color-sub: Tomato   /*   #bec1c6 - Module text   */

$navpage-nav-app-text-hover: DarkTurquoise     /*   no default, not documented - Selected Module, Favorite, History, Connect and Help item text   */

$navpage-nav-selected-bg: Olive   /*   #4B545F - Selected Navigator and Connect tab background */

$navpage-nav-selected-color: OrangeRed   /*   #ffffff - Active Navigator and Connect tab icons   */

$navpage-nav-unselected-color: Orange   /*   #bec1c6 - Inactive Navigator and Connect tab icons   */

$navpage-nav-border: Magenta   /*   #ddd - Global Search, Navigator and Connect search box outlines + search box filter icons   */

$nav-hr-color: YellowGreen   /* #303a46 - Separator modules without a label + Vertical separator line between main frame and Navigator/Sidebars   */

$nav-highlight-bar-active: Red   /*   #278efc - Highlight line under active Navigator/Connect tabs + selected Connect, Help or Settings icon + number of Connect messages dot   */

$nav-highlight-bar-inactive: PaleGoldenRod   /*   #828890 - Highlight line under inactive Navigator/Connect tabs   */


/* Search text */

$search-text-color: LightGreen   /*   #e7e9eb - Search text + clear search text icons + Navigator bar filter icon when minimized   */
 

/* unknown properties, listed as a default on the docs site   */

$connect-latest-message: Violet   /*   #cfd4d8   */

Just like the previous test Themes, it is not meant for actual use, but to help point out what properties affect what controls.

I used the default values from the "Default CSS styles for UI16" section from the Default CSS styles article on the docs site to build the Theme.   Below is a list of the individual properties with screenshots to show the affected controls/areas, which appear in yellow.

I've also listed any changes from Jakarta as well as some note/comments/opinions.

$navpage-header-bg - #303a46

• Banner frame background

$navpage-header-color - #ffffff

• Banner frame title text
• Domain picker icon
• Encryption Context picker icon

Change from Jakarta:

• Global Search icon no longer uses the property

Notes:

• Domain and Encryption Context picker icons should be using "$navpage-header-button-color" instead for consistency

$navpage-header-button-color (#ffffff, not listed in the Default CSS styles article)

• Logged-in user name text
• OpenFrame (phone), Global Search (magnifying glass), Connect (text bubbles), Help (question mark) and Settings (gear) icons
• Xplore: Developer Toolkit icon (eyeglasses) (see note below)

Changes from Jakarta:

• Global Search icon uses this property now

Notes:

• almost there - only need the Update Set, Application and Domain picker icons to use it now for consistency
• The Xplore: Developer Toolkit is an excellent third-party tool from James.Neale and company, available on Share

$navpage-header-divider-color - #455464

• Banner frame separator line

$navpage-button-color - #ffffff

• Update Set and Application icons
• Minimize Navigator and Edit Favorites icons
• Create a New Conversation, Open Connect standalone interface and Close Connect Sidebar icons

Notes:

• Update Set and Application icons should be using "$navpage-header-button-color" instead for consistency

$navpage-button-color-hover - #7ec24F

• Update Set, Application, Global Search, Connect, Help and Settings icons when cursor is over the controls (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 icons when clicked (some browsers [e.g. Chrome] only remove the highlight after cursor is clicked elsewhere)

Notes:

• the Domain picker icon does not actually do anything so there's no change when hovering over it

$navpage-nav-bg - #303a46

• Navigator, Connect and Help Sidebar header and footers
• Unselected Navigator and Connect Sidebar tab backgrounds
• Connect Sidebar section headers
• History time separator background

$navpage-nav-bg-sub - #455464

• Navigator, Connect and Help Sidebar backgrounds
• Background for Applications, Favorites and History entries
• Selected icon when editing a Favorite

$nav-highlight-main - #3D4853

• Module/Favorite (not in Safari)/History 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)
• 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)

Notes:

• Help item is no longer highlighted (shown differently now in Kingston)

$subnav-background-color - #455464

• Module background

$navpage-nav-app-text - #cfd4d8

• Application title text
• Separator Module icon
• "Loading..." Navigator message
• Favorites text
• Delete Favorite icon
• History time separator text
• History items text
• Connect message text
• Connect informational text
• Help Sidebar title and context menu icon

Notes:

• Edit Application and Add to Favorites icons no longer use this property

$navpage-nav-color-sub - #bec1c6

• Module text
• Favorite icon
• Edit Module and Add To Favorites icons when hovering over them

$navpage-nav-app-text-hover (unknown default, not listed in the Default CSS styles article)

• Module text, Edit Module and Add To Favorites icons when Module is selected/clicked
• Favorite text and Delete Favorite icon when Favorite is selected/clicked
• History text, Connect message
• First Module that matches a Navigator search

Notes:

• Help item text when selected/clicked no longer uses this property (Help works differently in Kingston)

$navpage-nav-selected-bg - #4b545F

• Active Navigator tab background (Apps, Favorites or History)
• Active Connect tab background (Chat or Support)

$navpage-nav-selected-color - #ffffff

• Active Navigator tab icon (Apps, Favorites or History)
• Active Connect tab icon (Chat or Support)

$navpage-nav-unselected-color - #bec1c6

• Inactive Navigator tab icons (Apps, Favorites or History)
• Inactive Connect tab icons (Chat or Support)

$nav-highlight-bar-active - #278efc

• Highlight line under active Navigator tab (Apps, Favorites or History)
• Highlight line under active Connect tab (Chat or Support)
• Navigator and Connect search box outlines when selected
• 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 tabs
• Line under inactive Connect tabs

$nav-hr-color - #303a46

• Separator modules without a label
• Vertical separator line between main frame and Navigator/Sidebars

$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

$search-text-color - #e7e9eb

• Global Search, Navigator and Connect search text
• Clear search text icon in Navigator and Connect search boxes
• Navigator bar filter icon when minimized

Updates

I'll try to keep this post updated with anything new that I find.   Please let me know if I've missed anything, or if something is incorrect.   I started this article based on the Jakarta one, so please forgive any copy/paste errors (but let me know about any).   Thanks in advance.

Updated Thursday, March 15, 2018

• added Encryption Context picker icon to the "$navpage-header-color" property