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
Note: more information about this property can be found here - Context.officeTheme property.
The values can be retrieved like this:
Using the colors in your add-in
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:
The add-in can be found on GitHub: https://github.com/estruyf/Office-Client-Theme-Colors.