Office 365 & SharePoint Search / Development / Branding

Using Office theme colors in your add-in

on Jan 07, 2016 by Elio Struyf with 4 comments

Will I was doing some preparation for a new talk about how you can make use of the Office UI Fabric in your applications/add-ins. I found a session from Connect() from Humberto Lezama Guadarrama which shows you what UI Fabric is and how to use it (Office UI Fabric – Connect()). There is something very interesting at around minute 3:50, Humberto shows you how the add-in can switch its colors based on the Office client theme which is set by the user.

Note: the sample application can be found here - Office Add-in Fabric UI Sample.

Unfortunately, the code for changing the add-in colors based on the Office theme is not available in the sample. So I did some research and created a sample application which visualizes the Office client theme colors.

Retrieving the Office theme

Retrieving the Office theme is even easier than I expected. Since the 1.1 version of the Office.js JavaScript API there is a officeTheme property available. The officeTheme property contains four HEX color values which can be used in the add-in.

  • bodyBackgroundColor
  • bodyForegroundColor
  • controlBackgroundColor
  • controlForegroundColor

    Note: more information about this property can be found here - Context.officeTheme property.

    Important: retrieving the Office theme colors is only available for Office 2016 and requires version 1.1 of the Office.js JavaScript API.

The values can be retrieved like this:

Using the colors in your add-in

The way to use these colors in you add-ins is by applying it via JavaScript. Here is an example:

Example of applied colors

Example of applied colors

Office client theme colors add-in

I created a sample add-in which visualizes the Office client theme colors. Here is an example of the output:

Colorful

Colorful Office theme colors

Colorful Office theme colors

Dark gray

Dark gray Office theme colors

Dark gray Office theme colors

White

White Office theme colors

White Office theme colors

The add-in can be found on GitHub: https://github.com/estruyf/Office-Client-Theme-Colors.

Article comments