Other posts related to Themes

"Helsinki Gray" UI16 Theme

Istanbul Theme Properties Visual Guide

Kingston Theme Properties Visual Guide

 

As a follow-up to my Istanbul Theme Properties Visual Guide post, this one describes the Theme properties for UI16 in the Jakarta release.

 

Test Theme Record

Here's the return of the ugly Theme record, updated for Jakarta:

 

/* Jakarta 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/jakarta-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/07/19/jakarta-theme-properties-visual-guide
*/

/* Mostly Banner */
$navpage-header-bg: DodgerBlue  /* #303a46 - banner background  */
$navpage-header-color: Aqua  /*  #ffffff - banner title text  */
$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   /*  #ffffff - 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  */


$connect-latest-message: Violet  /*  #cfd4d8 - no idea, not able to see it  */

 

 

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.  Here is a list of the individual properties with screenshots to show the affected controls/areas, which appear in yellow.

 

 

$navpage-header-bg - #303a46

  • Banner frame background

 

 

$navpage-header-color - #ffffff

  • Banner frame title text
  • Domain picker icon
  • Global Search icon

 

 

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

  • Logged-in user name text
  • Connect, Help and Settings icons

 

 

$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

 

 

$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)

 

 

$navpage-nav-bg - #303a46

  • Navigator, Connect and Help Sidebar header and footers
  • Unselected Navigator and Connect tabs background
  • 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/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)

        

   

 

 

$subnav-background-color - #455464

  • Module background

 

 

$navpage-nav-color-sub - #bec1c6

  • Module text
  • Edit Module and Add To Favorites icons

 

 

 

$navpage-nav-app-text - #cfd4d8

  • Application title text
  • Edit Application and Add to Favorites icons
  • "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 items text

        

        

 

 

$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 and Help item text when selected/clicked
  • First Module that matches a Navigator search

 

 

$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)
  • 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.  Thanks in advance.

 

 

Updated Sunday, December 10, 2017

  • added "First Module that matches a Navigator search" to the "$navpage-nav-app-text-hover" property