Apply Modern Theme in SharePoint Subscription Edition

By Denis Molodtsov

Published in SharePoint

May 07, 2023

1 min read

Apply Modern Theme in SharePoint Subscription Edition

Prerequisites

Apply a theme using REST API via the browser console

Use REST API via PowerShell ❌ (Does not work)

Conclusion

You might be shocked, but many companies still use the SharePoint server version. If you are a proud owner of the SharePoint Server Subscription Edition, you should take advantage of the modern themes but can’t find the option to apply them.

After spending a few hours trying to figure out how to apply a modern theme to SharePoint Server Subscription Edition, I finally got it working. However, I had to use a browser console. I know it’s not a great option, but it’s better than no custom theme.

Prerequisites

Make sure to get a JSON from your theme. You can use the UI Fabric Theme Designer to create a theme. After you pick the primary color, go to Export > JSON and simply copy the JSON. You will need it later.

If you want to continue and apply a theme, you will need to be a site collection administrator on the target site.

Apply a theme using REST API via the browser console

Open your SharePoint site
Go to site content. It’s crucial for the next step.
Open the browser console (browser dev tools) by pressing F12.
Paste and run the following javascript code:

javascript

function RestRequest(url,params) {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function ()
  {
    if (req.readyState != 4) // Loaded
      return;
    console.log(req.responseText);
  };
  // Prepend web URL to url and remove duplicated slashes.
  var webBasedUrl = (_spPageContextInfo.webServerRelativeUrl + "//" + url).replace(/\/{2,}/,"/");
  req.open("POST",webBasedUrl,true);
  req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
  req.setRequestHeader("ACCEPT", "application/json; odata.metadata=minimal");
  req.setRequestHeader("x-requestdigest", _spPageContextInfo.formDigestValue);
  req.setRequestHeader("ODATA-VERSION","4.0");
  req.send(params ? JSON.stringify(params) : void 0);
}

var pal = {
    "palette" : {
      "themePrimary": "#1E479A",
      "themeLighterAlt": "#f3f6fb",
      "themeLighter": "#d0daef",
      "themeLight": "#aabce0",
      "themeTertiary": "#6483c2",
      "themeSecondary": "#2f57a5",
      "themeDarkAlt": "#1a3f8a",
      "themeDark": "#163574",
      "themeDarker": "#102756",
      "neutralLighterAlt": "#f8f8f8",
      "neutralLighter": "#f4f4f4",
      "neutralLight": "#eaeaea",
      "neutralQuaternaryAlt": "#dadada",
      "neutralQuaternary": "#d0d0d0",
      "neutralTertiaryAlt": "#c8c8c8",
      "neutralTertiary": "#bab8b7",
      "neutralSecondary": "#a3a2a0",
      "neutralPrimaryAlt": "#8d8b8a",
      "neutralPrimary": "#323130",
      "neutralDark": "#605e5d",
      "black": "#494847",
      "white": "#ffffff"
    }
}
RestRequest("/_api/thememanager/ApplyTheme", {name:"Corporate theme", themeJson: JSON.stringify(pal)});

As a result, the theme will be applied. You can verify it by going to the site settings > Change the look. You should see the “Current” theme you just applied.

Use REST API via PowerShell ❌ (Does not work)

I hoped to make it work with PnP PowerShell and the Invoke-PnPSPRestMethod method, but it didn’t.

Here is my unsuccessful attempt:

bash

# UnInstall-Module SharePointPnPPowerShellOnline -Scope CurrentUser
Import-Module SharePointPnPPowerShellOnline
Connect-PnPOnline -Url http://spappdevse
# Define the theme properties
$themePalette = @{
    themePrimary       = "#1E479A";
    themeLighterAlt    = "#f3f6fb";
    themeLighter       = "#d0daef";
    themeLight         = "#aabce0";
    themeTertiary      = "#6483c2";
    themeSecondary     = "#2f57a5";
    themeDarkAlt       = "#1a3f8a";
    themeDark          = "#163574";
    themeDarker        = "#102756";
    neutralLighterAlt  = "#f8f8f8";
    neutralLighter     = "#f4f4f4";
    neutralLight       = "#eaeaea";
    neutralQuaternaryAlt = "#dadada";
    neutralQuaternary  = "#d0d0d0";
    neutralTertiaryAlt = "#c8c8c8";
    neutralTertiary    = "#bab8b7";
    neutralSecondary   = "#a3a2a0";
    neutralPrimaryAlt  = "#8d8b8a";
    neutralPrimary     = "#323130";
    neutralDark        = "#605e5d";
    black              = "#494847";
    white              = "#ffffff";
}

# Convert the theme properties to a JSON object
$themeJson = ConvertTo-Json $themePalette

# Create the payload for the REST request
$payload = @{
    name      = "Corporate theme";
    themeJson = $themeJson;
}
$payloadJson = ConvertTo-Json $payload


# Invoke the REST request. This will fail
Invoke-PnPSPRestMethod -Method Post -Url "/_api/thememanager/ApplyTheme" -Content $payloadJson