How to export theme from SharePoint Brand Center

The new SharePoint Brand Center allows you to create new themes quickly. Choose your colours, and you are ready to go. The downside is that no official documentation exists on exporting the created themes.

For now, Microsoft CLI or PnP PowerShell cannot help export created themes either. It establishes tenant themes but does not list them in the globally deployed tenant themes for some reason.

$ m365 spo theme list
name: N8D - Blue

In my case, only the “N8D – Blue” theme is listed, not the “Coffee Theme” from the brand center.

The solution for now

I aim to include the themes in the Microsoft 365 CLI. You can export all brand-centred themes using an unofficial SharePoint API endpoint.

/_api/_api/brandcenter/GetTenantThemes

This exports the following JSON:

{
  "hideDefaultThemes": false,
  "themeData": [
    {
      "id": 83,
      "isThemesV2": false,
      "isVisible": true,
      "name": "Coffee Theme",
      "source": 1,
      "themeJson": "{\"name\":\"Coffee Theme\",\"isInverted\":true,\"palette\":{\"themeDarker\":\"#171f1d\",\"themeDark\":\"#2c3b37\",\"themeDarkAlt\":\"#415751\",\"themePrimary\":\"#C0FFEE\",\"themeSecondary\":\"#56736b\",\"themeTertiary\":\"#6b8f85\",\"themeLight\":\"#80ab9f\",\"themeLighter\":\"#95c7ba\",\"themeLighterAlt\":\"#aae3d4\",\"black\":\"#171f1d\",\"neutralDark\":\"#2c3b37\",\"neutralPrimary\":\"#C0FFEE\",\"neutralPrimaryAlt\":\"#56736b\",\"neutralSecondary\":\"#6b8f85\",\"neutralTertiary\":\"#80ab9f\",\"neutralTertiaryAlt\":\"#000000\",\"neutralLight\":\"#000000\",\"neutralLighter\":\"#000000\",\"neutralLighterAlt\":\"#000000\",\"white\":\"#000000\",\"neutralQuaternaryAlt\":\"#000000\",\"neutralQuaternary\":\"#000000\",\"accent\":\"#4F6BED\"}}"
    }
  ]
}

Under the property the themeData, you will find all themes and the coffee theme, including the themeJson.

You can grab this property and format it to a proper JSON or use the following Node script.

// Print the theme JSON object in a formatted manner
const readFile = require('fs').readFileSync;

// Read the content of all-themes.json file and parse it as JSON
const themeContent = readFile('all-themes.json', 'utf8');
// Convert the JSON string to a JavaScript object
const themeContentJson = JSON.parse(themeContent);
// Access the first theme JSON object from the array
const themeJSON = JSON.parse(themeContentJson.themeData[0].themeJson);

// Print the theme JSON object in a formatted manner
console.log(JSON.stringify(themeJSON, null, 2))

With that, you get to the following JSON:

{
  "name": "Coffee Theme",
  "isInverted": true,
  "palette": {
    "themeDarker": "#171f1d",
    "themeDark": "#2c3b37",
    "themeDarkAlt": "#415751",
    "themePrimary": "#C0FFEE",
    "themeSecondary": "#56736b",
    "themeTertiary": "#6b8f85",
    "themeLight": "#80ab9f",
    "themeLighter": "#95c7ba",
    "themeLighterAlt": "#aae3d4",
    "black": "#171f1d",
    "neutralDark": "#2c3b37",
    "neutralPrimary": "#C0FFEE",
    "neutralPrimaryAlt": "#56736b",
    "neutralSecondary": "#6b8f85",
    "neutralTertiary": "#80ab9f",
    "neutralTertiaryAlt": "#000000",
    "neutralLight": "#000000",
    "neutralLighter": "#000000",
    "neutralLighterAlt": "#000000",
    "white": "#000000",
    "neutralQuaternaryAlt": "#000000",
    "neutralQuaternary": "#000000",
    "accent": "#4F6BED"
  }
}

In addition add, validate, update

In addition to getTenantTheme, there are additional endpoints worth mentioning.

Add Theme

Adding a theme to the brand center is in your SharePoint under the following path.

/_api/brandcenter/AddThenantTheme

The payload needs to be the same as the one from GetTenantTheme.

Update Theme

Send the new theme file to the following URL via a post request to update the theme.

/_api/brandcenter/UpdateThenantTheme

Validate Tenant Theme Name

To check if a theme exists in your tenant, you can use the following endpoint:

/_api/brandcenter/ValidateTenantThemeName

Send the following object in a POST request.

{
    "name": "Coffee"
}

Finally

That said, you can export and import themes directly into the brand center via Microsoft CLI.

I have already created a new issue on the CLI repo. This issue focuses more on the actual implementation and seeks opinions.

Check out more post on branding.