Workspace themes overview

Starting in Workspace 5.0, you can customize the colors of the user interface components used in Browser by defining a color theme. With Workspace 5.5, the use of themes includes Home and Storefront.

You can define and register a theme for a workspace platform. If you don't define a theme, you get a default palette.

Colors can be specified in the following ways:

  • Hexadecimal, not case specific, 3 (#F0F) or 6 characters (#FF00FF)
  • HSL/HSLA
  • RGB/RBGA
  • CSS color names — optional color properties only

The backgroundPrimary color property must be specified using a numeric format (that is, not a name); otherwise errors are thrown.

If a user's system contains multiple workspace platforms, each Workspace application (Browser, Home, and Storefront) retains the theme of the workspace platform it was opened with, until closed or changed. Therefore, the user's screen may show Workspace windows with different themes, depending on which workspace platform created each window.

Simple theming

The most straightforward way to define a theme is to define only the required properties:

  • brandPrimary
  • brandSecondary
  • backgroundPrimary

All other properties then either are generated based on these color values or use default colors.

The properties background1 to background6 are generated based on backgroundPrimary. Internally, the backgroundPrimarycolor is translated into HSL format, and then other shades are generated by varying the saturation and lightness values. The following diagram shows how shades are generated based on the color red, which has a hue value of 352.

Diagram of light and dark auto-generated color valuesDiagram of light and dark auto-generated color values

Diagram of light and dark auto-generated color values

The generated values are used to provide depth for visual components, such as for drop shadows. Workspace selects between light shades and dark shades, depending on the operating system's color mode.

Other colors are generated from brandPrimary and brandSecondary. These include colors for active, hover, focused, and text.

Code example

const wp = WorkspacePlatform.init({
…
  theme: [
    {
      label: 'MyTheme',
      palette: {
        brandPrimary: '#0661DC',  // Hexadecimal, 3 or 6 digits
        brandSecondary: rgb(170, 136, 166) , // RGB, optional: rgba()
        backgroundPrimary:  hsl(3, 23%, 17%)  // HSL, optional: hsla()
      }
    }
  ],
});

UI mappings of required properties

Here are examples of the color properties that are required to be defined in a theme. In the screen shots, the color property is set to vermillion (#D55E00).

  • brandPrimary
    Example: dialog box default button background
A dialog box with the default button (**Close Window**) colored vermillionA dialog box with the default button (**Close Window**) colored vermillion

A dialog box with the default button (Close Window) colored vermillion

  • brandSecondary
    Example: dialog box other button background
A dialog box with a non-default button (**Cancel**) colored vermillionA dialog box with a non-default button (**Cancel**) colored vermillion

A dialog box with a non-default button (Cancel) colored vermillion

  • backgroundPrimary
    Example: Used to generate background2, used in Browser page title bar background, focussed/selected view tab
The top of a window with the title bar and active view tab background colored vermillionThe top of a window with the title bar and active view tab background colored vermillion

The top of a window with the title bar and active view tab background colored vermillion

Advanced theming

If you prefer, you can specify additional color properties, rather than using generated or default colors. For optional properties, you can use CSS named colors instead of numeric definitions.

background2:  'rebeccapurple'

Here are examples of optional color properties. In the screen shots, the color property is set to vermillion (#D55E00). For a complete list of properties, refer to the Workspace Platform API reference.

  • background1
    Example: Browser view title bar background
The top of a window, with the inactive view tab and view tab area colored vermillionThe top of a window, with the inactive view tab and view tab area colored vermillion

The top of a window, with the inactive view tab and view tab area colored vermillion

  • background2
    Example: Browser page title bar background, focussed/selected view tab
The top of a window with the title bar and active view tab colored vermillionThe top of a window with the title bar and active view tab colored vermillion

The top of a window with the title bar and active view tab colored vermillion

  • background4
    Example:
    • focussed toolbar button
The OpenFin toolbar, showing the **Hide Tabs** icon selected and colored vermillionThe OpenFin toolbar, showing the **Hide Tabs** icon selected and colored vermillion

The OpenFin toolbar, showing the Hide Tabs icon selected and colored vermillion

  • sub-toolbar background
The OpenFin toolbar, with the color linking sub-toolbar displayed and its background colored vermillionThe OpenFin toolbar, with the color linking sub-toolbar displayed and its background colored vermillion

The OpenFin toolbar, with the color linking sub-toolbar displayed and its background colored vermillion

  • dialog background
The **Save page** dialog box, with the background colored vermillionThe **Save page** dialog box, with the background colored vermillion

The Save page dialog box, with the background colored vermillion

  • background5
    Example: Input box background
The **Save page** dialog box with the text field background colored vermillionThe **Save page** dialog box with the text field background colored vermillion

The Save page dialog box with the text field background colored vermillion

  • background6
    Examples:
    • Browser sub-toolbar outline
The OpenFin toolbar with the **Change Layout** sub-toolbar displayed, with the outline of the sub-toolbar colored vermillionThe OpenFin toolbar with the **Change Layout** sub-toolbar displayed, with the outline of the sub-toolbar colored vermillion

The OpenFin toolbar with the Change Layout sub-toolbar displayed, with the outline of the sub-toolbar colored vermillion

  • dialog box outline
A dialog box with its outline colored vermillionA dialog box with its outline colored vermillion

A dialog box with its outline colored vermillion

  • statusActive
    Example: Selected page tab background
The top of a window, where the active page tab background is colored vermillionThe top of a window, where the active page tab background is colored vermillion

The top of a window, where the active page tab background is colored vermillion

  • inputColor
    Example: input box text and caret color
The **Save page** dialog box, with the entered text and caret colored vermillionThe **Save page** dialog box, with the entered text and caret colored vermillion

The Save page dialog box, with the entered text and caret colored vermillion

  • inputFocused
    Example: Outline around selected text box
The **Save page** dialog box, with the focussed text field outlined in vermillionThe **Save page** dialog box, with the focussed text field outlined in vermillion

The Save page dialog box, with the focussed text field outlined in vermillion

  • textDefault
    Examples:
  • Browser title bar icons & controls, selected view tab text
The top of a window, with the OpenFin toolbar and window control icons and the selected view tab label text colored vermillionThe top of a window, with the OpenFin toolbar and window control icons and the selected view tab label text colored vermillion

The top of a window, with the OpenFin toolbar and window control icons and the selected view tab label text colored vermillion

  • Dialog box message text
A dialog box, with the message text colored vermillionA dialog box, with the message text colored vermillion

A dialog box, with the message text colored vermillion

  • textHelp
    Example: Browser unselected view tab text
The top of a window, with the unselected view tab label colored vermillionThe top of a window, with the unselected view tab label colored vermillion

The top of a window, with the unselected view tab label colored vermillion


Did this page help you?