Alert This post is over a year old, some of this information may be out of date.

Using Office theme colors in your add-in

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 an 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:

  'background-color': Office.context.officeTheme.bodyBackgroundColor,
  'color': Office.context.officeTheme.bodyForegroundColor
Show image 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:


Show image Colorful Office theme colors
Colorful Office theme colors

Dark gray

Show image Dark gray Office theme colors
Dark gray Office theme colors


Show image White Office theme colors
White Office theme colors

The add-in can be found on GitHub:


Back to top