SharePoint site theming
SharePoint site owners have new options for applying custom styles and colors to sites that make it easier to define and manage themes across site collections. These new features include:
- The ability to define custom themes and make them available to site owners. Themes are defined in a JSON schema that stores color settings and related metadata for each theme.
- An online Theme Generator tool that you can use to define new custom themes.
- A simplified set of default themes, with six light themes and two dark themes presently available.
- An updated color palette, with 12 light colors and 6 dark colors, as well as 16 supplementary themes.
- Control over which themes are available for use on pages within your sites. For example, you can define custom themes based on your organization's branding or identity, and make those the only available themes within your sites.
For general information about working with themes to customize the look of your sites, see Change the look of your SharePoint site.
The following predefined themes are available by default:
- Dark Yellow (inverted theme)
- Dark Blue (inverted theme)
These themes have been designed for readability, so you might find them to be useful starting points for creating custom themes. For more information about default themes, see SharePoint site theming: JSON schema.
In addition to the default themes, you can select from supplementary themes. The following customizations are available:
- Light themes: Gold, Teal, Dark Blue, Indigo, Plum, Warm Gray
- Dark themes: Red, Green, Purple, Gray
Selecting a modern theme
To select from the available themes for a SharePoint site, choose the gear icon (⚙️) in the top right corner of the screen and then select Change the look. You'll be presented with a list of themes to choose from, which might include default themes and/or custom themes depending on how your site has been configured.
The following image shows how the default themes are presented in the theme picker dialog box.
When you choose a theme in the list, those color settings are instantly applied to the page so that you can see what the selected theme will look like.
After you've found a theme that you want to use, choose Save to save your selection, or choose Cancel to revert to your current theme.
Working with classic themes
You can still use the classic themes, by choosing the link to Classic change the look options beneath the modern themes listed under Change the look. Because the modern SharePoint UI differs from the classic UI, however, some limitations apply when you use classic themes with modern pages.
When you select a classic theme, a modern theme will be generated from the settings in the classic theme, including the isInverted flag, the background image, and the color settings for COntentAccent1, PageBackground, and BackgroundOverlay. If isInverted is set to True, neutral colors such as NeutralDark and NeutralLight will be reversed.
For the simplest experience, we recommend that you use modern themes with modern pages. If you need to use classic themes with modern pages, test your site carefully to verify that your content is readable and accessible.