SharePoint site theming: REST API

You can use the the SharePoint REST interface to perform basic create, read, update, and delete (CRUD) operations on site themes.

The SharePoint Online (and SharePoint 2016 and later on-premises) REST service supports combining multiple requests into a single call to the service by using the OData $batch query option. For details and links to code samples, see Make batch requests with the REST APIs.

Prerequisites

Before you get started, make sure that you're familiar with the following:

• Get to know the SharePoint REST service
• Complete basic operations using SharePoint REST endpoints

REST commands for site themes

The following REST commands are available for working with site themes:

• AddTenantThemeAdvanced – create a new theme; supports new theme format; similar to the Add-SPOTheme SharePoint cmdlet
• AddTenantTheme – create a new theme; similar to the Add-SPOTheme SharePoint cmdlet
• DeleteTenantTheme – remove a theme from the tenant store; similar to the Remove-SPOTheme PowerShell cmdlet
• GetTenantThemingOptions – read theme settings
• ApplyTheme – apply tenant theme to site
• UpdateTenantThemeAdvanced – updates tenant theme definition; supports new theme format
• UpdateTenantTheme – updates tenant theme definition

The URL for theme management REST commands is based on _api/thememanager. For example, the following are the endpoints for the commands:

• http://<site url>/_api/thememanager/AddTenantThemeAdvanced
• http://<site url>/_api/thememanager/AddTenantTheme
• http://<site url>/_api/thememanager/DeleteTenantTheme
• http://<site url>/_api/thememanager/GetTenantThemingOptions
• http://<site url>/_api/thememanager/ApplyTheme
• http://<site url>/_api/thememanager/UpdateTenantThemeAdvanced
• http://<site url>/_api/thememanager/UpdateTenantTheme

AddTenantThemeAdvanced

The following JavaScript sample code shows how to add a new format theme to a tenant.

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 colorPairs = {
  "light": [
    { "accentColor": "#03787C", "backgroundColor": "#FFFFFF" },
    { "accentColor": "#FFFFFF", "backgroundColor": "#03787C" },
    { "accentColor": "#E3FFFD", "backgroundColor": "#03787C" },
    { "accentColor": "#03787C", "backgroundColor": "#E3FFFD" },
    { "accentColor": "#FFF9E3", "backgroundColor": "#03787C" },
    { "accentColor": "#03787C", "backgroundColor": "#FFF9E3" },
    { "accentColor": "#03787C", "backgroundColor": "#F5F5F5" },
    { "accentColor": "#242424", "backgroundColor": "#F5F5F5" },
    { "accentColor": "#155473", "backgroundColor": "#FFFFFF" },
    { "accentColor": "#FFFFFF", "backgroundColor": "#155473" },
    { "accentColor": "#155473", "backgroundColor": "#E3FFFD" },
    { "accentColor": "#E3FFFD", "backgroundColor": "#155473" },
    { "accentColor": "#FFF9E3", "backgroundColor": "#155473" },
    { "accentColor": "#155473", "backgroundColor": "#FFF9E3" }
  ]
}

RestRequest("/_api/thememanager/AddTenantThemeAdvanced", {name:"Teal Theme", themeJson: JSON.stringify(colorPairs), shouldParseColorPair: true});

AddTenantTheme

The following JavaScript sample code shows how to add a legacy format theme to a tenant.

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 = {
    "isInverted": false,
    "palette" : {
        "themePrimary": "#1BF242",
        "themeLighterAlt": "#0d0b00",
        "themeLighter": "#0b35bc",
        "themeLight": "#322d00",
        "themeTertiary": "#6a5f00",
        "themeSecondary": "#1B22F2",
        "themeDarkAlt": "#ffe817",
        "themeDark": "#ffed4b",
        "themeDarker": "#fff171",
        "neutralLighterAlt": "#252525",
        "neutralLighter": "#282828",
        "neutralLight": "#313131",
        "neutralQuaternaryAlt": "#3f3f3f",
        "neutralQuaternary": "#484848",
        "neutralTertiaryAlt": "#4f4f4f",
        "neutralTertiary": "#c8c8c8",
        "neutralSecondaryAlt": "#d0d0d0",
        "neutralSecondary": "#dadada",
        "neutralPrimary": "#ffffff",
        "neutralDark": "#eaeaea",
        "black": "#f8f8f8",
        "white": "#1f1f1f",
        "primaryBackground": "#1f1f1f",
        "primaryText": "#ffffff",
        "error": "#ff5f5f"
    }
}

RestRequest("/_api/thememanager/AddTenantTheme", {name:"Sounders Rave Green", themeJson: JSON.stringify(pal)});

DeleteTenantTheme

The following JavaScript sample code shows how to remove a theme.

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);
}


RestRequest("/_api/thememanager/DeleteTenantTheme", { name:"Sounders Rave Green" });

GetTenantThemingOptions

The following JavaScript sample code shows how to read theme settings.

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);
}

RestRequest("/_api/thememanager/GetTenantThemingOptions");

ApplyTheme

The following JavaScript sample code shows how to apply theme to the site. For details about the themeJson structure, see the SharePoint site theming: JSON schema

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 themeJson = {
    "palette" : {
        "themePrimary": "#1BF242",
        "themeLighterAlt": "#0d0b00",
        "themeLighter": "#0b35bc",
        "themeLight": "#322d00",
        "themeTertiary": "#6a5f00",
        "themeSecondary": "#1B22F2",
        "themeDarkAlt": "#ffe817",
        "themeDark": "#ffed4b",
        "themeDarker": "#fff171",
        "neutralLighterAlt": "#252525",
        "neutralLighter": "#282828",
        "neutralLight": "#313131",
        "neutralQuaternaryAlt": "#3f3f3f",
        "neutralQuaternary": "#484848",
        "neutralTertiaryAlt": "#4f4f4f",
        "neutralTertiary": "#c8c8c8",
        "neutralSecondaryAlt": "#d0d0d0",
        "neutralSecondary": "#dadada",
        "neutralPrimary": "#ffffff",
        "neutralDark": "#eaeaea",
        "black": "#f8f8f8",
        "white": "#1f1f1f",
        "primaryBackground": "#1f1f1f",
        "primaryText": "#ffffff",
        "error": "#ff5f5f"
    }
}
RestRequest("/_api/thememanager/ApplyTheme", {name:"Sounders Rave Green", themeJson: JSON.stringify(themeJson)});

UpdateTenantThemeAdvanced

The following JavaScript example shows how to update a tenant theme in the new format.

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 colorPairs = {
  "light": [
    { "accentColor": "#03787C", "backgroundColor": "#FFFFFF" },
    { "accentColor": "#FFFFFF", "backgroundColor": "#03787C" },
    { "accentColor": "#E3FFFD", "backgroundColor": "#03787C" },
    { "accentColor": "#03787C", "backgroundColor": "#E3FFFD" },
    { "accentColor": "#FFF9E3", "backgroundColor": "#03787C" },
    { "accentColor": "#03787C", "backgroundColor": "#FFF9E3" },
    { "accentColor": "#03787C", "backgroundColor": "#F5F5F5" },
    { "accentColor": "#242424", "backgroundColor": "#F5F5F5" },
    { "accentColor": "#155473", "backgroundColor": "#FFFFFF" },
    { "accentColor": "#FFFFFF", "backgroundColor": "#155473" },
    { "accentColor": "#155473", "backgroundColor": "#E3FFFD" },
    { "accentColor": "#E3FFFD", "backgroundColor": "#155473" },
    { "accentColor": "#FFF9E3", "backgroundColor": "#155473" },
    { "accentColor": "#155473", "backgroundColor": "#FFF9E3" }
  ]
}

RestRequest("/_api/thememanager/UpdateTenantThemeAdvanced", {name:"Teal Theme", themeJson: JSON.stringify(colorPairs), shouldParseColorPair: true});

UpdateTenantTheme

The following JavaScript example shows how to update a tenant theme in the legacy format.

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 = {
    "isInverted": false,
    "palette" : {
			"themePrimary": "#008cff",
			"themeLighterAlt": "#f5faff",
			"themeLighter": "#d6edff",
			"themeLight": "#b3ddff",
			"themeTertiary": "#66baff",
			"themeSecondary": "#1f9aff",
			"themeDarkAlt": "#007ee6",
			"themeDark": "#006bc2",
			"themeDarker": "#004f8f",
			"neutralLighterAlt": "#f8f8f8",
			"neutralLighter": "#f4f4f4",
			"neutralLight": "#eaeaea",
			"neutralQuaternaryAlt": "#dadada",
			"neutralQuaternary": "#d0d0d0",
			"neutralTertiaryAlt": "#c8c8c8",
			"neutralTertiary": "#595959",
			"neutralSecondary": "#373737",
			"neutralPrimaryAlt": "#2f2f2f",
			"neutralPrimary": "#000000",
			"neutralDark": "#151515",
			"black": "#0b0b0b",
			"white": "#ffffff",
			"primaryBackground": "#ffffff",
			"primaryText": "#000000",
			"disabledBackground": "#f4f4f4",
			"disabledText": "#c8c8c8"
    }
}
RestRequest("/_api/thememanager/UpdateTenantTheme", {name:"Sounders Rave Green", themeJson: JSON.stringify(pal)});

See also

• SharePoint site theming overview
• SharePoint site theming: JSON schema
• SharePoint site theming: PowerShell cmdlets
• SharePoint site theming: CSOM API