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
}


Comments

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 your app and r…

Getting started with Self Service Support in O365 with Learning Pathways

One thing that comes up in every O365 rollout is the need for employees to have some sort of self-service support in O365. In the past this would mean the learning and development teams would have to create artifact on artifact of material to help employees find the answers they are looking for. Now in Office 365 Microsoft has created a custom learning module to address this need. The learning pathways solution can be customized to the app mix that is used by your organization and brings in the relevant Microsoft resources into an app in your tenant. Provisioning Learning Pathways The learning pathways solution will provision a SharePoint application and will require a SharePoint App Catalog. If you do not have an App Catalog in O365 and one will need to be created. You can install the learning pathways solution in one of two ways, the first is to use the pnp provisioning service (recommended), which will automatically create and set-up the site collection. The second option is to ma…

O365 Weekly Digest - 01/28/2019

Every week I'll be posting a quick summary of O365 updates included in the admin weekly digest email that you can sign up for via the admin Message Center: https://admin.microsoft.com/AdminPortal/Home#/MessageCenter -these emails include items posted to the message center over the last week and come out every Monday.
Lots of updates and reminders to some already talked about features this week. The one I am most excited about is the new site branding and mega menu navigation (Roadmap IDs 33131, 33132, 33138, 43781). The rollout for this feature was pushed back a bit but is now rolling out. There has also been a delay in the rollout for SharePoint reminders based on date fields (Roadmap ID 34267), and the new icons for the waffle which are rolling out soon as well (Roadmap ID 45441).

The updates this week also sent reminders for the Planner Notifications in a Teams activity feed that was covered last week (Roadmap ID 45878), as well as the opt-in toggle for try the early version of…