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

Quick Look at the Surface Duo Android Emulator

Microsoft recently released their SDK and Emulator for developing dual screen applications for the Surface Duo ( https://docs.microsoft.com/en-us/dual-screen/introduction ) and being a bit curious about what the experience was going to be on a dual screen device I decided to give download it and give it a try.  First Impressions First and foremost there is the novelty of having two apps launched side by side. The Duo emulator is using Android Version 10 and to be API version 29, both are the latest versions of Android. There is no Play Store or Microsoft Store on the emulator, which is to be expected as its main purpose is app development. But beyond that it appears that most of the Google applications are not included in the device and the build is based off the Android Open Source Project (AOSP) more than anything else. What typically are the default applications on Android have been replaced with Microsoft Applications.  Launcher is the Microsoft Launcher: 
1 comment
Read more