Office 365 Fabric Theme Generator Overview
The Office 365 Fabric Theme Generator tool allows users to customize the Color, Style, and Font used by the Office Fabric React components. This tool provides a simple interface for selecting the colors your want.
As you make each update to your theme, you will be able to see how the React components change style immediately in front of you. When finished with your design, you have the ability to easy copy and paste your theme output for deployment.
Color Selector
The color selector provide an easy way to select your Primary, Foreground, and Background theme colors.
Fabric Palette
The fabric palette provides a granular view of the the color combinations used across your theme. These settings are initialize based on the options selecting via the color selector, however, it does provide the ability to customize each individual Fabric palette slots if needed.
Samples
This section will provide a preview of what your react components will look like as your make adjustments. It is important to review each control closely and their associated labels.
Accessibility
This section will indicate how well your color combinations will support end users with visual impairments and provide a rating scale. This will ensure that your theme provides legible text and maintains a color contrast ration of at lease 4.5.
See https://www.section508.gov/ for more information regarding accessibility standards.
Output
It is recommended that you keep iterating on changes to your theme until it meets all of your requirements. After finalizing your theme, the generator tool provides JSON, SASS, and PowerShell output formats to be consumed as inputs for deployment.
When you are ready to push these updates to your tenant, you can Create Office 365 Themes using SharePoint Management Shell.
Getting Started
For more information and to start using the tool, please navigate to the Theme Generator.
