Skip to main content

SharePoint Site Theming: Header Background Colors

As Microsoft rolls out the new Mega Menu experience for the Modern UI some of you may be wondering where these colors come from. In this post I will review the header background color options and call out which theme colors get used along the way. From left to right in the image below we have the four background options, which I'll call by the names of their color labels, Background Color (White) Theme, Neutral Light Theme, Light Theme, Dark Theme.


I used the Microsoft Theme generator (https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) to create my theme and applied the theme to my tenant using the Add-PnPTenantTheme (https://docs.microsoft.com/en-us/powershell/module/sharepoint-pnp/add-pnptenanttheme?view=sharepoint-ps) command to apply the following theme in PowerShell, I've also added comments to lines that impact themes for your reference.

@{
"themePrimary" = "#0a162b"; #Theme Dark Local
"themeLighterAlt" = "#d0d8e6"; #Theme Light Local
"themeLighter" = "#aab7ce"; #Theme Light Global
"themeLight" = "#8799b7";
"themeTertiary" = "#687da0";
"themeSecondary" = "#4e6388";
"themeDarkAlt" = "#374c71"; #Theme Dark Global
"themeDark" = "#24385a";
"themeDarker" = "#152643";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4"; #Command Bar & Neutral Light Local
"neutralLight" = "#eaeaea"; #Neutral Light Global
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#fbcfba";
"neutralSecondary" = "#f7a078";
"neutralPrimaryAlt" = "#f4763b";
"neutralPrimary" = "#f26522"; #Text Color
"neutralDark" = "#b84c1a";
"black" = "#883813";
"white" = "#ffffff"; #Theme Dark text & White Theme Global & Local
}

What gets themed

In the Header both the global/hub navigation and the local navigation have theme colors applied to them. The Dark Theme does the best job of showcasing this with the global/hub navigation in the lighter blue, while the local navigation is in the darker blue. The command bar is also included in the theme and will always use the neutralLighter color no matter what header background you choose. Finally, in all themes except Dark Theme the text will be the neutralPrimary color, in the Dark Theme it will be the white color.  

Background Color Theme (White Theme)

The Background Color theme is straight forward and uses whatever color is defined as white in your applied theme, in most cases this will be #ffffff with a typical white body. If you're using the Microsoft theme generator this is the color picked in the 'Body Background Color' selector. 


@{
"themePrimary" = "#0a162b";
"themeLighterAlt" = "#d0d8e6";
"themeLighter" = "#aab7ce";
"themeLight" = "#8799b7";
"themeTertiary" = "#687da0";
"themeSecondary" = "#4e6388";
"themeDarkAlt" = "#374c71";
"themeDark" = "#24385a";
"themeDarker" = "#152643";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4"; #Command Bar
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#fbcfba";
"neutralSecondary" = "#f7a078";
"neutralPrimaryAlt" = "#f4763b";
"neutralPrimary" = "#f26522"; #Text Color
"neutralDark" = "#b84c1a";
"black" = "#883813";
"white" = "#ffffff"; #Global & Local
}

Neutral Light Theme

The Neutral Light theme uses the neutralLight and neutralLighter colors for the local and global navigation respectively. With a standard white body this will be #eaeaea for the global navigation and #f4f4fr for the local navigation.  If you're using the Microsoft theme generator this is the derived from the color picked in the 'Body Background Color' selector. 


@{
"themePrimary" = "#0a162b";
"themeLighterAlt" = "#d0d8e6";
"themeLighter" = "#aab7ce";
"themeLight" = "#8799b7";
"themeTertiary" = "#687da0";
"themeSecondary" = "#4e6388";
"themeDarkAlt" = "#374c71";
"themeDark" = "#24385a";
"themeDarker" = "#152643";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4"; #Command Bar & Local
"neutralLight" = "#eaeaea"; #Global
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#fbcfba";
"neutralSecondary" = "#f7a078";
"neutralPrimaryAlt" = "#f4763b";
"neutralPrimary" = "#f26522"; #Text Color
"neutralDark" = "#b84c1a";
"black" = "#883813";
"white" = "#ffffff";
}

Light Theme

The Light Theme uses the themeLighter and themeLighterAlt colors for the local and global navigation respectively.  If you're using the Microsoft theme generator this is the derived from the color picked in the 'Primary Theme Color' selector.

@{
"themePrimary" = "#0a162b"; 
"themeLighterAlt" = "#d0d8e6"; #Global
"themeLighter" = "#aab7ce"; #Local
"themeLight" = "#8799b7"; 
"themeTertiary" = "#687da0";
"themeSecondary" = "#4e6388";
"themeDarkAlt" = "#374c71"; 
"themeDark" = "#24385a"; 
"themeDarker" = "#152643";
"neutralLighterAlt" = "#f8f8f8"; 
"neutralLighter" = "#f4f4f4"; #Command Bar
"neutralLight" = "#eaeaea"; 
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#fbcfba";
"neutralSecondary" = "#f7a078";
"neutralPrimaryAlt" = "#f4763b";
"neutralPrimary" = "#f26522"; #Text Color
"neutralDark" = "#b84c1a";
"black" = "#883813";
"white" = "#ffffff";
}

Dark Theme

The Dark Theme uses the themePimary and themeDarkAlt colors for the local and global navigation respectively.  If you're using the Microsoft theme generator this is the derived from the color picked in the 'Primary Theme Color' selector.


@{
"themePrimary" = "#0a162b"; #Local
"themeLighterAlt" = "#d0d8e6"; 
"themeLighter" = "#aab7ce"; 
"themeLight" = "#8799b7"; 
"themeTertiary" = "#687da0";
"themeSecondary" = "#4e6388";
"themeDarkAlt" = "#374c71"; #Global
"themeDark" = "#24385a"; 
"themeDarker" = "#152643";
"neutralLighterAlt" = "#f8f8f8"; 
"neutralLighter" = "#f4f4f4"; #Command Bar
"neutralLight" = "#eaeaea"; 
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#fbcfba";
"neutralSecondary" = "#f7a078";
"neutralPrimaryAlt" = "#f4763b";
"neutralPrimary" = "#f26522"; 
"neutralDark" = "#b84c1a";
"black" = "#883813";
"white" = "#ffffff"; #Text Color
}


Labels:

Comments

Post a Comment

Popular posts from this blog

PowerApps Delegation Warning

Update Aug 15 2019 - Microsoft has updated PowerApps to allow for some complex SharePoint data delegation, this will hopefully resolve most issues you were seeing when working with SharePoint data:  https://powerapps.microsoft.com/en-us/blog/sharepoint-delegation-improvements/ If you've tried to use the Filter, LookUp or Search actions in PowerApps you have seen the yellow warning error that shows a 'delegation warning' and you might have even ignored it because your PowerApp was working fine in testing. However once you get into larger data sets your PowerApp will have some issues so in this blog I will attempt to explain what the delegation warning is and how you can fix your PowerApp. Delegation So what even is Delegation in PowerApps? When doing any sort of data manipulation for an app, PowerApps will try to push the processing of that data to the source system instead of doing all of the manipulation in the app. This is done to increase the efficiency of you
1 comment
Read more

What's new in Learning Pathways version 3

Microsoft Learning Pathways just launched with version 3.0. In this blog I'll provide an overview of what has updated with this new version of Learning Pathways. If you don't know what Learning Pathways is check out my blog or Microsoft documentation . If you already have Learning Pathways you can manually deploy the app package to your app catalog to update the application. New Content New content has been added for the following apps:  Teams Outlook OneDrive Planner Sway OneDrive In addition to these updates for existing applications two additional areas now have content:  Accessibility  Access To view the full change log of these visit:  https://docs.microsoft.com/en-us/office365/customlearning/custom_contentupdates New Features Microsoft Success Center The Microsoft Success Center provides you with all the information you need to know what's going on inside of Learning Pathways such as how to customize Learning Pathways, to help
1 comment
Read more

The Behind the Scenes Scope of SharePoint News

I recently had someone ask if there was any way to disable the ability to send a SharePoint news article to an external party and after some clarification it became apparently that even with external sharing completely disabled in the tenant you can, in fact, send a preview of the article to any email address. After some research it became apparent that there is no ability to turn off this functionality which caused some concern of potential data leakage. For reference we are talking about the SharePoint news article 'Send to' functionality shown below.  While a credential is needed to access the full article, any email sent will include an article preview. The article preview doesn't show anything too worrisome as it is just the title, the first few lines of text, and an image but one area that caught my eye was the ability to add in the optional message. After some testing it does not appear that there is any length limit to the text that can be put in the summary, it got
Post a Comment
Read more