Brand modern SharePoint Online sites

With SharePoint Online modern sites the branding options that used to available with Classic sites were removed, however Microsoft introduced new alternatives to apply you company brand to SharePoint.

The new theming experience allow site owners to apply themes to all modern pages in the site collection, to deliver new engaging and familiar looks.

By default, there are 8 themes available but you as an Administrator can create and deploy your owns, in this article you will find instructions on how to achieve it.

SharePoint Branding

Create the theme

To create the color themes Microsoft provides the Theme Generator, an online tool that generates the color palette to be deployed in the tenant.

In the tool you will be able to introduce the primary theme color, body text color and body background color. The Fabric palette is generated in three formats, JSON, SASS and PowerShell, as an Admin you will need to use the PowerShell version.

  1. Open the Theme Generator
  2. Define your colors
  3. Save the PowerShell version of the schema
    SharePoint Online Theme Generator

Deploy the theme

To deploy new SharePoint themes, you will need to install SharePoint Online Management Shell, and you will need to be a SharePoint Admin.

  1. To connect to your SharePoint Online environment open PowerShell and execute the command:
    Connect-SPOService -Url https://contoso-admin.sharepoint.com
  2. In the console create a PowerShell variable with the generated color pallet
    $customTheme = @{
    "themePrimary" = "#ff0000";
    "themeLighterAlt" = "#ffeded";
    "themeLighter" = "#ffd1d1";
    "themeLight" = "#ff9090";
    "themeTertiary" = "#ff3f3f";
    "themeSecondary" = "#ff0b0b";
    "themeDarkAlt" = "#e60000";
    "themeDark" = "#a30000";
    "themeDarker" = "#8c0000";
    "neutralLighterAlt" = "#f8f8f8";
    "neutralLighter" = "#f4f4f4";
    "neutralLight" = "#eaeaea";
    "neutralQuaternaryAlt" = "#dadada";
    "neutralQuaternary" = "#d0d0d0";
    "neutralTertiaryAlt" = "#c8c8c8";
    "neutralTertiary" = "#a6a6a6";
    "neutralSecondary" = "#666666";
    "neutralPrimaryAlt" = "#3c3c3c";
    "neutralPrimary" = "#333333";
    "neutralDark" = "#212121";
    "black" = "#1c1c1c";
    "white" = "#ffffff";
    "primaryBackground" = "#ffffff";
    "primaryText" = "#333333";
    "bodyBackground" = "#ffffff";
    "bodyText" = "#333333";
    "disabledBackground" = "#f4f4f4";
    "disabledText" = "#c8c8c8";
    }
  3. To deploy the theme run the command below, define the custom Name that will be visible on SharePoint online and in the Palette argument reference the variable created on step #2
    Add-SPOTheme -Name "Contoso Theme" -Palette $customTheme -IsInverted $false -Overwrite

    Apply SharePoint Online Powershell theme

  4. To validate if the theme was successfully deployed run the command below and validate if it is listed
    SharePoint Online Powershell theme

Apply the theme

  1. Open your modern site and click on the cog icon
  2. Click on Change the Look
  3. Select your custom theme and click Apply
    SharePoint Online Theme Selection

Conclusion

This method will not deploy the newly created theme to the classic sites, if you want to have your brand applied consistently to all the sites you will need to create a classic theme, to apply it automatically with PowerShell you can follow this article.

When compared with the classic themes, the modern version will only change the colors, the option to change the font and the background image is only available to the classic themes.

Banner vector created by Freepik


9 Responses to “Brand modern SharePoint Online sites”

  1. David Noble

    March 14, 2018

    After I updated my SharePoint Online Management Shell. It worked perfectly.

    Reply
  2. Dave

    May 16, 2018

    Now, how do you remove the default themes?

    Reply
    • João Ferreira

      May 16, 2018

      Hi Dave,

      I don’t think it’s possible to remove the default themes.

      Reply
      • Tomek

        June 1, 2018

        you can remove them by running this: Set-SPOHideDefaultThemes $true

        Reply
        • João Ferreira

          June 1, 2018

          Thanks Tomek,

          I’ll update this article with the command to hide the default ones

          Reply
        • João Ferreira

          June 1, 2018

          Thanks Tomek, I will add this tom complement the article

          Reply
          • Nick

            August 27, 2018

            I have applied custom themes using powershell shown above and which are visible when I run Get-spotheme but do not show in the tenant under the modern site change the look? any idea why this might be?

          • João Ferreira

            October 10, 2018

            Hi Nick,

            To make sure this is correctly installed you need to execute it with a tenant admin account.
            A few months ago Microsoft had issues with the change the look functionality but they are now solved, I just retested the steps and I was able to get the new theme.

            Regards,

            Joao Ferreira

  3. David Ramalho

    October 9, 2018

    Hey João,

    The SharePoint PNP team have also released this functionality below are the commands for this effect:

    Add-PnPTenantTheme -Identity “My Theme” -Palette $customTheme -IsInverted $false
    Get-PnPTenantTheme
    Remove-PnPTenantTheme -Name “”

    Reply

Leave a Reply


Web developer focused on SharePoint branding, blogger, tech enthusiast. Travelling and sports are my addictions, knowledge and success are my daily motivations.