Edit

Share via

SharePoint site theming: REST API

  • Article

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:

REST commands for site themes

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

  • 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
  • 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/AddTenantTheme
  • http://<site url>/_api/thememanager/DeleteTenantTheme
  • http://<site url>/_api/thememanager/GetTenantThemingOptions
  • http://<site url>/_api/thememanager/ApplyTheme
  • http://<site url>/_api/thememanager/UpdateTenantTheme

AddTenantTheme

The following JavaScript sample code shows how to add a new 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);
}


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

var pal = {
    "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.

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": "#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(pal)});

UpdateTenantTheme

The following JavaScript sample code shows how to update tenant 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);
}


var pal = {
    "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