Applying custom primary and secondary colors to your Office 365 tenant

Admin Tips and Shortcuts
1

Theme colors in Office 365 will be applied to various part of the site, such as the header:

image
image1918×49 3.26 KB

The controls on pages:

image

You can change the theme with a set of limited options that Office 365 gives you or you can assign it a custom corporate theme color.

Here is how to do that:

  1. Navigate to this URL where you build your own theme:
    https://developer.microsoft.com/en-us/fluentui#/styles/themegenerator?fabricVer=5
    or here:
    Fluent UI Theme Designer

  2. Let’s say that your primary color is: #0081C3, enter it as your primary color

image

  1. You can also set the text color and the background color but unless you’re a designer, I’d leave them as is

  2. SharePoint will generate a shading and other color palette depending on this primary color. Copy the output from the PowerShell column (we’ll need this).

image
NOTE: here is what all of those theme tokens mean, if you’re curious to know

  1. Open a Notepad, we’ll use it to prepare our new theme for install. Add this script to it:

$themepallette = @{
“themePrimary” = “#0081c3”;
“themeLighterAlt” = “#f2f9fd”;
“themeLighter” = “#cee8f5”;
“themeLight” = “#a6d5ed”;
“themeTertiary” = “#57afda”;
“themeSecondary” = “#188ec9”;
“themeDarkAlt” = “#0074ae”;
“themeDark” = “#006293”;
“themeDarker” = “#00486d”;
“neutralLighterAlt” = “#f8f8f8”;
“neutralLighter” = “#f4f4f4”;
“neutralLight” = “#eaeaea”;
“neutralQuaternaryAlt” = “#dadada”;
“neutralQuaternary” = “#d0d0d0”;
“neutralTertiaryAlt” = “#c8c8c8”;
“neutralTertiary” = “#c2c2c2”;
“neutralSecondary” = “#858585”;
“neutralPrimaryAlt” = “#4b4b4b”;
“neutralPrimary” = “#333333”;
“neutralDark” = “#272727”;
“black” = “#1d1d1d”;
“white” = “#ffffff”;
“primaryBackground” = “#ffffff”;
“primaryText” = “#333333”;
“bodyBackground” = “#ffffff”;
“bodyText” = “#333333”;
“disabledBackground” = “#f4f4f4”;
“disabledText” = “#c8c8c8”;
}

Add-SPOTheme -Name “Corporate Theme” -Palette $themepallette -IsInverted $false

  1. Next, open the [SharePoint Online Management Shell] or download and install it on your computer if you don’t have it already.

  2. Note, that in step #5 you need to paste the PowerShell code that Theme Generator created for you starting from “themePrimary”, so don’t replace all of it.

  3. Back in your [SharePoint Online Management Shell] execute the following line of script to connect to your Office 365 tenant:

Connect-SPOService -Url 'https://[tenant-name]-admin.sharepoint.com'

*** Replace [tenant-name] with your own tenant name. For example: if your tenant URL is origamiconnect.sharepoint.com, the tenant name would be origamiconnect.
The results:

EXAMPLE: Connect-SPOService -Url 'https://origamiconnect-admin.sharepoint.com'

You will be asked for the username and password, make sure it’s a tenant admin username you’re using.

  1. Now, also paste the script we have prepared in step 5 and run it.

  2. Go back to your SharePoint site ([Gear] → [Change the look] → [Theme]) and you’ll see the option to select your newly installed [Corporate Theme]

image