How to Create a Multicolored Theme for a Modern SharePoint Online Site

How to Create a Multicolored Theme for a Modern SharePoint Online Site
After creating your multicolored theme, you’ll most likely want to apply it automatically to all new sites that get created in the future. Make sure to check out my Ultimate Guide to SharePoint Site Templates and Site Scripts for how you can make it happen! The article contains all the information you’ll need.

In November 2017, Microsoft released a new site theming capability for the modern SharePoint sites in Office 365. It came with eight out-of-the-box themes you can choose from, and you can also create your own themes using the Theme Designer App.

Using the theme designer app is easy. All you need to do is to first choose one primary color, a text color, and a background color from, e.g., your company’s brand guidelines document. Then paste their hex values into the generator, click the Export theme button in the top right corner, copy the generated color palette from the PowerShell tab, and deploy it to your tenant using PowerShell. If this is your first time creating a theme and you want to see how all of this works in practice, watch my video Getting started on using modern themes in SharePoint Online below.

But what if your organization has multiple brand colors, and you would like them all to be visible? I’ve already run into this kind of a situation a few times, and usually three different colors should all be equally apparent.

At first, you would think that you can include a secondary and a tertiary color just by inserting their hex values into the “themeSecondary” and “themeTertiary” tokens in the color palette. However, a quick test revealed that it is not the case. So, I started investigating, what effect each of these tokens has on a modern site?

Table of Contents

  1. Investigating the effects of the theme tokens
  2. The findings
  3. Where the tokens occur
  4. Creating a multicolored theme
  5. What has changed from a year ago?
    1. The header background color
    2. The theme generator
    3. Adjustments to tokens
  6. Afterword

Investigating the effects of the theme tokens

When I started investigating, I came accross this piece of information that the color palette generated by the theme generator doesn’t actually include all the available tokens. This is simply because a lot of the tokens don’t have any effect on a site.

However, I didn’t want to leave them outside of my research scope, so I decided to include them as well. To see the complete list of available tokens, I opened the developer tools panel in my browser (F12) and ran window.__themeState__.theme in the console tab.

I created a color palette with all the available tokens and as distinctive colors as possible. The result was not meant to be pretty but to help me easily distinguish where each of the tokens are used. Below is the result. I’ve written down the color names for the tokens that I noticed to be visible.

@{
# included in theme generator
"themePrimary" = "#e55342" #Strawberry 
"themeLighterAlt" = "#888EA8"; #Dark lavender
"themeLighter" = "#efe6f2"; #Light lavender
"themeLight" = "#796722"; #Olive
"themeTertiary" = "#994719"; #Sienna
"themeSecondary" = "#AD4361"; #Raspberry
"themeDarkAlt" = "#FBC0C3"; #Pink
"themeDark" = "#80B88C"; #Dark Mint
"themeDarker" = "#FFB29A"; #Light salmon
"neutralLighterAlt" = "#136D80"; #Teal
"neutralLighter" = "#e8fffd"; #Light turqoise
"neutralLight" = "#765A4F"; #Coffee
"neutralQuaternaryAlt" = "#8A5E72"; #Dark plum
"neutralQuaternary" = "#016d28"; #Pine
"neutralTertiaryAlt" = "#ffd9bf"; #Light orange
"neutralTertiary" = "#ffcc01"; #Yellow
"neutralSecondary" = "#9aabb2"; #Gray
"neutralPrimaryAlt" = "#9C000C"; #Maroon
"neutralPrimary" = "#53C7BD"; #Turqoise
"neutralDark" = "#F4843E"; #Orange
"black" = "#000000"; #Black
"white" = "#ffffff"; #White
# no longer included in theme generator
"primaryBackground" = "#FFF7D7"; #Light yellow
"primaryText" = "#72BD54"; #Lime
"bodyBackground" = "#ffbf40";
"bodyText" = "#593c00";
"disabledBackground" = "#CD9D7C";
"disabledText" = "#52834C";
# never been included in theme generator
"backgroundOverlay" = "#102542"; #Navy
"whiteTranslucent40" = "rgba(255,255,255,.4)"; #White translucent
"accent" = "#f87060"; #Coral
}

Click here to download the complete palette (.zip)

The findings

What I immediately noticed when browsing through the sites was that some of the tokens are a lot more dominant than others, some tokens are only used at particular places, and a lot of them I did not encounter at all. Also, to achieve a good color contrast, some tokens are meant to have lighter color values (backgrounds), while some others are expected to use darker colors (texts, icons, etc.). Unless you wanted to create a very dark theme, in which case those would be reversed.

I also noticed that the system pages use the same color theme as well but in a different way. This can make it hard to come up with an excellent looking multicolored theme if the system pages are also required to look good and branded. On the other hand, if you find a good color combination for the system pages, you could use the color theme also on classic sites; though you need to apply the palette on them programmatically, e.g., via site templates.

There are also two other more recent changes that didn’t exist yet when I originally wrote this blog post in January 2018 and which make it even harder to find a multicolored theme that would look amazing in all situations:

  • The “Site contents” view uses the same color theme but differently. For example, the document library primary background color comes from the same token as the header background color, and the cogwheel dropdown doesn’t use the same colors as when browsing pages.
  • Some web part elements get their colors from different tokens depending on the chosen section background color. This means that you need to test your color theme on all of the different section background colors and ensure that web parts look nice on all of them. The same applies to the header elements if you change the header background color via the “Change the look” panel.

Here is a picture where all of the different section backgrounds are used. If you compare the Quick links web part icon to the icon in the earlier image of a communication site, you can notice that the background color is different because another section background color is used.

Where the tokens occur

In addition to the tokens offered by the theme generator, I did find a couple of tokens, that are not included but which have a minimal effect on the modern sites: “accent” and “whiteTranslucent40”. And then a more recent discovery and a huge thing a lot of people had already been asking about: the new header background color — “backgroundOverlay”.

Here’s a complete list of my findings:

Token Name Impact Recommended shade Occurrence
themePrimary Dominant Darker Some button and checkbox backgrounds, links, texts, borders and icons, icon and link hovers. Also the footer background color, and one of the section background options.
System pages: OK button background, link texts.
themeLighterAlt Dominant Lighter One of the section background options. Cogwheel menu hover background in site contents view.
themeLighter Noticeable Lighter Navigation edit menu background color, add web part panel hover background color, image background color in some web parts when the third section background color option is selected.
System pages: Navigation hover background, cancel button hover background.
themeLight Subtle Either Range selector hover and focus background. Loading spinner background color in site contents view.
themeTertiary Subtle Darker Add web part icon when the fourth selection background color is selected. The third color in the palette icon in the “Change the look panel” (hence the token name)
themeSecondary Subtle Lighter The suite bar text color in site contents view. Hover color for some links. Image background color in some web parts when the fourth section background color is selected. The second color in the palette icon in the “Change the look panel” (hence the token name)
themeDarkAlt Dominant Darker Many icons (e.g., in the command bar), some borders, button/link hovers, spinner background, range element focus, checkbox background hover, web parts and lists, button hover, range element focus, add web part icon when the third section background color is selected.
themeDark Subtle Darker Some button onclick and link color (e.g., “Return to classic SharePoint”). Header “Follow” star icon if the third header background color option is used.
System pages: OK button border and hover.
themeDarker Subtle Darker Hover color for some links.
System pages: Visited link color.
neutralLighterAlt Noticeable Lighter Left navigation hover background color, list info panel text background, image background color in some webparts when the first section background color is selected, some icons and texts when editing web parts.
System pages: Cancel button background, disabled text box background.
neutralLighter Dominant Lighter Some menu backgrounds (e.g., the command bar), selected left navigation element, some button backgrounds, ome option for a section background color.
neutralLight Dominant Lighter Some web part borders, command bar action hover, command bar background when a list item is selected, list view category header background when an item is selected, button hover.
System pages: Ribbon tab background, OK button border, selected navigation element background, disabled text box border. Divider web part. Image background color in some web parts when the second section background color option is selected.
neutralQuaternaryAlt Subtle Lighter Info icon and selected ellipses background in lists, some web part element backgrounds when in edit mode, web part property pane dropdown item background color, selected list item background.
neutralQuaternary Subtle Lighter Command bar action hover background when a list item is selected.
System pages: Borders
neutralTertiaryAlt Subtle Darker Some texts, e.g., in web part property pane, some icons in web parts, range selector background, some button onclick background color, yes/no toggle control background, change section background color setting border color.
neutralTertiary Noticeable Darker Some button texts, some web part titles, some web part setting texts, some web part icons, border hover color in some web parts, dashed section border color in edit mode, web part settings panel control border color. Most visible when editing web parts.
System pages: text box, dropdown, and button border color.
neutralSecondary Dominant Darker Some menu texts, empty library text, some icon hover backgrounds, some texts in web parts, command bar arrows, range selector.
System pages: link color, some icons, and borders.
neutralPrimaryAlt Noticeable Darker The suite bar background color in site contents view.
neutralPrimary Dominant Darker Site header texts, texts in navigation menux, command bar, buttons and web parts, web part related icon backgrounds when the page is in edit mode, add web part panel icons and texts, web part settings panel texts.
System pages: dropdown arrow color, some texts.
neutralDark Subtle Darker Some button, link and border hover text color, some icons.
System pages: page breadcrumb, header texts.
black Subtle Darker Web part settings panel dropdown text color, carousel controls, site contents tab text hover, “Change the look” panel texts.
white Dominant Lighter Primary body background color, some icon hover color, one of the available section background colors.
System pages: Body background color
primaryBackground Dominant Lighter Some backgrounds when editing web part settings, some text field backgrounds, cogwheel menu background in site contents view.
primaryText Subtle Darker Edit section icons. Cogwheel menu texts in site contents view.
accent Subtle Darker The fourth color in the palette in the “Change the look” panel.
whiteTranslucent40 Subtle Lighter, Translucent Covers the rest of page when a modal dialog is opened. A solid color can be specified to get rid of transparency.
backgroundOverlay Dominant Either Header background, comment section background, some borders, site contents primary background color

Creating a multicolored theme

How should I then create a multi-colored theme based on these findings? I don’t think there is a one-size-fits-all solution when it comes to this; it always depends a bit about the colors you are working with. However, I can give you an example of how I’ve approached the problem.

For this example, I picked three distinctive colors: navy, coral, and turquoise – just because I thought they looked good together. First, I generated a base for my theme using the navy color, a dark gray text color (#6f6f6f) and plain white (#fff) as the background color. Then I started to plan, which token values I would replace with coral and turquoise.

Because the coral is quite a bright color and I wanted it also to be clearly visible, I looked for tokens I had marked as darker and dominant. I could have selected one of the tokens used for texts, but because I instead wanted to use the color in icons, I opted for two more subtle tokens instead: “themeDarkAlt” and “themeDark”. I also added it as the “accent” color for a nice touch in the Change the look panel.

Accent color

The turquoise was a bit harder to place because it isn’t exactly a dark color, nor is it light enough to be used as a background color. In the end, I decided that it would be suitable as web part texts, so I included it in the “neutralSecondary” token.

After a little bit of testing, I noticed I could use a lighter shade of coral at some places (e.g., the hover background color in select web part panel) instead of the light blue color generated based on the navy blue color. I created a new theme in the theme generator using the coral value and picked two of the generated values to use instead of the originally created blue values (themeLighter, themeLight). I also considered making a lighter shade of the turquoise color and using it as the background color in the “neutralLighter” token, but eventually decided against it, because it might have made the turquoise color too dominant compared to the other two colors.

Now that we can also include the header color option, I added the “backgroundOverlay” token to my color palette and used the same navy color that I had chosen as my primary color. The down side of setting the header color to a very dark one this way is that the text color doesn’t get changed to a lighter one. To accomodate this, I adjusted the “neutralPrimary” token color to be a more medium gray shade instead of a dark one. The same token is used also by a lot of different text elements, so I didn’t want to change it to a very light shade either.

Finally, I deployed my custom theme using the PowerShell script below. Note that these days you can also deploy themes using PnP provisioning templates (tenant wide deployment).

$adminSiteUrl = "https://mytenant-admin.sharepoint.com"
$themeName = "Multicolored theme"
Connect-SPOService $adminSiteUrl

#Uncomment if you want to update an existing theme
#Remove-SPOTheme -name $themeName

#Replace the variable value with the generated code
$palette = @{
    "themePrimary" = "#102542"; #Navy
    "themeLighterAlt" = "#d3dce8";
    "themeLighter" = "#fee7e5"; #Coral, themeLighter
    "themeLight" = "#fdd3ce"; #Coral, themeLight
    "themeTertiary" = "#7088aa";
    "themeSecondary" = "#567095";
    "themeDarkAlt" = "#F87060"; #Coral;
    "themeDark" = "#F87060"; #Coral
    "themeDarker" = "#1c3557";
    "neutralLighterAlt" = "#f8f8f8";
    "neutralLighter" = "#f4f4f4";
    "neutralLight" = "#eaeaea";
    "neutralQuaternaryAlt" = "#dadada";
    "neutralQuaternary" = "#d0d0d0";
    "neutralTertiaryAlt" = "#c8c8c8";
    "neutralTertiary" = "#d4d4d4";
    "neutralSecondary" = "#53C7BD"; #Turquoise
    "neutralPrimaryAlt" = "#818181";
    "neutralPrimary" = "#8c8c8c";
    "neutralDark" = "#555555";
    "black" = "#3f3f3f";
    "white" = "#ffffff";
    "accent" = "#F87060"; #Coral;
    "backgroundOverlay" = "#102542"; #Navy
}

Add-SPOTheme -Name $themeName -Palette $palette -IsInverted:$false -Overwrite

And that’s it! A nice looking multicolored theme, using the colors I chose.

Now, if you want to automatically apply your custom color theme to new modern SharePoint sites, check out my Ultimate Guide to SharePoint Site Templates and Site Scripts for instructions.

What has changed from a year ago?

I originally wrote this blog post in January 2018. A lot has changed since then and more changes will come. I will most likely have to update this blog post again in the future, but here’s what changed in a year after this blog post was originally published.

The header background color

The option to change the header background color is a very recent addition. I already got a few comments about people trying to find which token was responsible for changing the site header background color, and finally, I spotted it while doing this major update for this blog post.

The token is called “backgroundOverlay”, and most likely the reason why it wasn’t spotted earlier is that the color doesn’t come into effect immediately when you apply the theme; you need to refresh the page! The same thing also happens if you ever go back to the “Change the look” panel and switch around the settings — luckily refreshing the page does the trick this time as well.

The downside of setting the header background color via a color palette is that the header text color doesn’t get changed at the same time like it does if you change it via the “Change the look” panel. The text color is still set based on the “neutralPrimary” token which is used by a lot of other texts too. If you want to achieve a good color contrast between the background and the text in all the places, you need to aim for a good medium shade color.

There’s also another way for adjusting the header background color if you are already setting the theme on sites programmatically or want to adjust the header layout, too. The SharePoint web object contains information on what header settings have been selected, and you can adjust those with, e.g., PowerShell.

$webUrl = "https://mytenant.sharepoint.com/sites/sitename"
$themeName = "Multicolored Theme"
$headerLayout = "Compact" # Standard or Compact
$headerEmphasis = "Strong" # None, Neutral, Soft or Strong

Connect-PnPOnline $webUrl #-UserWebLogin # Uncomment if you use MFA

Set-PnPWebTheme -Theme $themeName

$web = Get-PnPWeb
$web.HeaderLayout = $headerLayout
$web.HeaderEmphasis = $headerEmphasis
$web.Update()
Invoke-PnPQuery

For running this script, you need to have the PnP PowerShell commandlets installed. You can install those with the following command (run the shell as administrator).

Install-Module SharePointPnPPowerShellOnline -AllowClobber

And if you can’t see the properties in the web object, you need to update the module as follows.

Update-Module SharePointPnPPowerShellOnline

You can browse all the properties that are related to the web object, e.g., in the Windows PowerShell ISE (type $web. on the command line to open the menu). Other properties you might be interested in setting at the same time are SiteLogoUrl, and also FooterEnabled and MegaMenuEnabled on communication sites.

Note that changing the header background color programmatically doesn’t affect the comment section background color like using the backgroundOverlay token does.

The theme generator

When I originally wrote this blog post, Sean Squires confirmed my suspicions on Twitter that the theme generator was indeed going to be improved!

 

And it did. For a few months, you could select different colors for different tokens right in the theme generator by clicking the little squares below the main color pickers.

In the beginning of May 2019, the theme generator – or should I say Theme Designer App – was updated again and moved to a new location. You can no longer select colors for individual tokens via the color pickers, and have to fall back to the old method of inserting the hex values directly to the script. The good thing is that you can now see how the colors appear for the different components.

However, it still doesn’t help with the original dilemma: where do each of the different tokens appear on a SharePoint site? And how do the component colors change if the section background color is altered? I don’t know if the theme designer app will ever give a straight answer to these questions because the color tokens seem to be in constant flux, and keeping things up to date all the time would require a lot of work. Luckily, we can still achieve the desired result by putting in a little bit of extra effort as described in this blog post.

Adjustments to tokens

During the past year, I got reports from people in the comments that some of the tokens were no longer used in the places where they used to. Changes to the modern themes are inevitable and I knew that I had to update this post sooner or later. And because I could no longer trust my earlier findings, it meant doing the whole research all over again.

In the end there were not too many changes to the tokens. There were a few of cases where an element now received its color from another token than originally reported; the most notable one being the main background color. There were also a couple of tokens that weren’t previously used anywhere that now have a small effect, and also the new header background color.

Afterword

Have you created any custom themes yet? What are your experiences? Do you have some good tips and tricks to share, or have you perhaps noticed some token value used in a place not yet mentioned in this post? Let me know in the comments below! Also, if you found this article useful and would like to read similar content in the future, follow me on Twitter to be notified of future posts. Thank you so much for reading, it means a lot to me, and until next time!

Laura

Congratulations, you’ve just finished reading one of my blog post classics! Please note that I’ve personally stopped answering questions left in the comments section of this article because I no longer actively work with the topic. Still, you are more than welcome to comment and ask questions as other readers also often offer their help.


133 thoughts on “How to Create a Multicolored Theme for a Modern SharePoint Online Site”

  • Dear Laura

    Thanks a lot for the great article and the deep insights. They helped a lot. One open question would be how to adjust the alternating row color for the table style option in the Text webpart. Do you have any insights or ideas about which class this could be?

    Thanks a lot in advance

    • Hi Marc,

      I should update this blog post because the SharePoint Online UI has changed again, most likely affecting which colors appear in different elements. At this time, I’m unable to answer your question, unfortunately.

      Laura

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.