diff --git a/docs/declarative-customization/images/default-themes.png b/docs/declarative-customization/images/default-themes.png new file mode 100644 index 0000000000..f6f6b88feb Binary files /dev/null and b/docs/declarative-customization/images/default-themes.png differ diff --git a/docs/declarative-customization/site-theming/sharepoint-site-theming-csom.md b/docs/declarative-customization/site-theming/sharepoint-site-theming-csom.md index a15b25f9cc..cfe97994ea 100644 --- a/docs/declarative-customization/site-theming/sharepoint-site-theming-csom.md +++ b/docs/declarative-customization/site-theming/sharepoint-site-theming-csom.md @@ -1,7 +1,7 @@ --- title: SharePoint site theming - CSOM development description: The SharePoint client-side object model (CSOM) provides access to the SharePoint object model from code that is running locally or on a different server than SharePoint. -ms.date: 06/28/2022 +ms.date: 01/21/2026 ms.localizationpriority: high --- @@ -16,7 +16,7 @@ Before you get started, make sure that you're familiar with the following: - [Using the Client Object Model](https://msdn.microsoft.com/library/ff798388.aspx) - [Common Programming Tasks in the Managed Client Object Model](https://msdn.microsoft.com/library/ee537013.aspx) -You also need to reference the [Microsoft.SharePointOnline.CSOM](https://www.nuget.org/packages/Microsoft.SharePointOnline.CSOM/) NuGet package (version 16.1.6906.1200 or later). +You also need to reference the [Microsoft.SharePointOnline.CSOM](https://www.nuget.org/packages/Microsoft.SharePointOnline.CSOM/) NuGet package (version 16.1.26712.12000 or later). ## CSOM code example @@ -46,7 +46,7 @@ ClientObjectList themes = tenant.GetAllTenantThemes(); ## Theme definition example -For methods that take a theme argument, the following code defines an __SPOTheme__ class that you can use to create custom themes. +For methods that take a theme argument, the following code defines an __SPOTheme__ class that you can use to create custom themes. For the new theme format, only the `Name` and `ColorPairs` properties are required. For the legacy theme format, include the `Name`, `Palette`, and `IsInverted` properties. ```csharp ///   @@ -67,6 +67,13 @@ public class SPOTheme      public IDictionary Palette      {          get; private set;  +    }  + ///   + /// Specifies the color pairs setting of the theme. +    ///   +    public IDictionary>> ColorPairs +    {  +        get; private set;      }      ///       /// Specifies whether the theme is inverted, with a dark background and a light foreground.  @@ -86,14 +93,39 @@ There's currently no supported CSOM API to programmatically apply a theme to a s Use the following methods to customize the set of available themes for a SharePoint tenant administration site. You can add a new custom theme, update an existing theme, or delete a theme, and you can retrieve a specific theme or all themes. You can also hide or restore the default themes that come with SharePoint. +### AddTenantThemeAdvanced public method + +Add a theme to the organization. + +In multi-geo environments, themes added by an administrator in the primary geography are automatically propagated and available across the organization. This method is not supported for administrators in satellite geographies. + +__Namespace:__ Microsoft.Online.SharePoint.TenantAdministration.Tenant
+__Parameters:__ string name, string themeJson, bool shouldParseColorPair
+__Return type:__ ClientResult\ + +### UpdateTenantThemeAdvanced public method + +Update the settings for an existing theme. + +__Namespace:__ Microsoft.Online.SharePoint.TenantAdministration.Tenant
+__Parameters:__ string name, string themeJson, bool shouldParseColorPair
+__Return type:__ ClientResult\ + ### AddTenantTheme public method -Add a theme to the tenant. +Add a theme to the organization. This method is not supported for administrators in satellite geographies. __Namespace:__ Microsoft.Online.SharePoint.TenantAdministration.Tenant
__Parameters:__ string name, string themeJson
__Return type:__ ClientResult\ +### UpdateTenantTheme public method + +Update the settings for an existing theme. + +__Namespace:__ Microsoft.Online.SharePoint.TenantAdministration.Tenant
+__Parameters:__ string name, string themeJson
+__Return type:__ ClientResult\ ### DeleteTenantTheme public method Delete a theme from the tenant. @@ -104,7 +136,11 @@ __Return type:__ void ### GetAllTenantThemes public method -Retrieve all the themes that are currently available in the tenant, including any custom themes that have been added. Default themes are only included if the __HideDefaultThemes__ property is __false__ (the default value). +Retrieves the complete set of custom themes defined at the tenant level, including themes created through command-based tools and those created in the Brand Center UI. +> [!NOTE] +> To support consistent branding and simplify governance, theme management is transitioning to a centralized model. +> - The **primary geo** will act as the central location for **organization-wide theme creation and management**. Themes created here will be visible and applicable across satellite geos. +> - The satellite **Geo Administrators** will be able to view themes from the primary geo to their own sites by using `GetAllTenantThemes` method. Themes previously created within satellite geos will remain available for use. However, **creating new themes in satellite geos will no longer be supported** going forward. __Namespace:__ Microsoft.Online.SharePoint.TenantAdministration.Tenant
__Parameters:__ none
@@ -125,13 +161,6 @@ This property indicates whether the default themes are available in the theme pi __Namespace:__ Microsoft.Online.SharePoint.TenantAdministration.Tenant
__Type:__ Boolean -### UpdateTenantTheme public method - -Update the settings for an existing theme. - -__Namespace:__ Microsoft.Online.SharePoint.TenantAdministration.Tenant
-__Parameters:__ string name, string themeJson
-__Return type:__ ClientResult\ ## Methods of the Microsoft.Online.SharePoint.TenantManagement.Tenant class diff --git a/docs/declarative-customization/site-theming/sharepoint-site-theming-json-schema.md b/docs/declarative-customization/site-theming/sharepoint-site-theming-json-schema.md index db182d93b4..91fbd9ddad 100644 --- a/docs/declarative-customization/site-theming/sharepoint-site-theming-json-schema.md +++ b/docs/declarative-customization/site-theming/sharepoint-site-theming-json-schema.md @@ -1,18 +1,18 @@ --- title: SharePoint site theming - JSON schema description: The new SharePoint site theming features use a JSON schema to store color settings and other information about each theme. -ms.date: 08/08/2024 +ms.date: 01/21/2026 ms.localizationpriority: high --- # SharePoint site theming: JSON schema -The new [SharePoint site theming](sharepoint-site-theming-overview.md) features use a JSON schema to store color settings and other information about each theme. Theme settings are stored in a JSON object that contains the following keys: +The new [SharePoint site theming](sharepoint-site-theming-overview.md) features use a JSON schema to store color settings and other information about each theme. Only the new theme format supports the secondaryColor and displayMode fields. Theme settings are stored in a JSON object that contains the following keys: -- **name**: The name of the theme, which appears in the theme picker UI and is also used by administrators and developers to refer to the theme in PowerShell cmdlets or calls to the SharePoint REST API. - **isInverted**: This value should be false for light themes and true for dark themes; it controls whether SharePoint uses dark or light theme colors to render text on colored backgrounds. - **backgroundImageUri**: The URI of an optional background image for the theme (value can be blank if no background image). -- **palette**: The RGB color settings for the theme, stored as a nested JSON object with the following keys: +- **palette**: A nested JSON object that stores the RGB color values for the theme. +When using the new theme format, the values of `themePrimary` and `backgroundColor` are used as the first color pair in the palette. The `backgroundColor` setting is only used in the new theme format. The palette object includes the following keys: - themePrimary - themeLighterAlt - themeLighter @@ -44,55 +44,11 @@ The new [SharePoint site theming](sharepoint-site-theming-overview.md) features - disabledText - error - accent + - backgroundColor The colors in the `palette` element are specified as 6-digit or 3-digit hexadecimal RGB string values. -The following is an example of a JSON object that defines a theme. - -```json -{ - "name": "Blue", - "isInverted": true, - "backgroundImageUri": "", - "palette": { - "themePrimary": "#00bcf2", - "themeLighterAlt": "#00090c", - "themeLighter": "#001318", - "themeLight": "#002630", - "themeTertiary": "#005066", - "themeSecondary": "#00abda", - "themeDarkAlt": "#0ecbff", - "themeDark": "#44d6ff", - "themeDarker": "#6cdfff", - "neutralLighterAlt": "#2e3340", - "neutralLighter": "#353a49", - "neutralLight": "#404759", - "neutralQuaternaryAlt": "#474e62", - "neutralQuaternary": "#4c546a", - "neutralTertiaryAlt": "#646e8a", - "neutralTertiary": "#c8c8c8", - "neutralSecondaryAlt": "#d0d0d0", - "neutralSecondary": "#dadada", - "neutralPrimaryAlt": "#eaeaea", - "neutralPrimary": "#ffffff", - "neutralDark": "#f4f4f4", - "black": "#f8f8f8", - "white": "#262a35", - "primaryBackground": "#262a35", - "primaryText": "#ffffff", - "bodyBackground": "#ffffff", - "bodyText": "#333333", - "disabledBackground": "#f4f4f4", - "disabledText": "#c8c8c8", - "error": "#ff5f5f", - "accent": "#ffb900" - } -} -``` - -The SharePoint Framework includes eight built-in themes: six on light backgrounds, and two on dark backgrounds. You might find it useful to create a custom theme by starting from one of the built-in themes and adjusting it to suit your needs. - -Another option is to use the [Theme Generator tool](https://aka.ms/themedesigner) to build a custom theme. It provides an interactive UI for selecting theme colors, and automatically generates the JSON, SASS, and PowerShell definitions for your custom theme. + Another option is to use the [Theme Generator tool](https://aka.ms/themedesigner) to build a custom theme palette. It provides an interactive UI for selecting theme colors, and automatically generates the JSON, SASS, and PowerShell definitions for your custom theme. > [!NOTE] > The theme generator definitions do not currently include the following color slots and key/value pairs: @@ -105,523 +61,377 @@ Another option is to use the [Theme Generator tool](https://aka.ms/themedesigner > - "disabledText" > - "error" > - "accent" +> - "backgroundColor" > > These can be manually added to your generated definition before uploading to the tenant. ![Theme Generator tool](../../images/theme-generator-tool.png) +- **secondaryColors**: An optional section available only in the new theme format of the SharePoint site theme schema. It defines additional accent and background color pairs that complement the main theme palette. The first color pair comes from the palette. Currently, only the light theme is supported. +Here is an example of secondaryColors, it is the set of combination of themePrimary and backgroundColor. The colors in the `secondaryColors` element are specified as 6-digit or 3-digit hexadecimal RGB string values. -The following is a summary of the built-in themes, including JSON definitions for the theme colors that you can use as a starting point for customization. +```json + "secondaryColors": { + "light": [ + { "themePrimary": "#FFFFFF", "backgroundColor": "#03787C" }, + { "themePrimary": "#E3FFFD", "backgroundColor": "#03787C" }, + { "themePrimary": "#03787C", "backgroundColor": "#E3FFFD" }, + { "themePrimary": "#FFF9E3", "backgroundColor": "#03787C" }, + { "themePrimary": "#03787C", "backgroundColor": "#FFF9E3" }, + { "themePrimary": "#03787C", "backgroundColor": "#F5F5F5" }, + { "themePrimary": "#242424", "backgroundColor": "#F5F5F5" }, + { "themePrimary": "#155473", "backgroundColor": "#FFFFFF" }, + { "themePrimary": "#FFFFFF", "backgroundColor": "#155473" }, + { "themePrimary": "#155473", "backgroundColor": "#E3FFFD" }, + { "themePrimary": "#E3FFFD", "backgroundColor": "#155473" }, + { "themePrimary": "#FFF9E3", "backgroundColor": "#155473" }, + { "themePrimary": "#155473", "backgroundColor": "#FFF9E3" } + ], + "dark": [] + } +``` -## Teal theme +- **displayMode**: The visual mode that the theme palette corresponds to. Currently, only `light` mode is supported. +- **themeSchemaVersion**: The theme schema version. Use `2.0.0` for the latest theme format. Use `1.0.0` for legacy theme format. +- **version**: The theme version. Use `2.0.0` for the latest theme format. Use `1.0.0` for legacy theme format. -The following table shows the color palette used by the Teal theme. +The following is an example of a JSON object that defines a theme in new theme format. -| Theme colors | Neutral colors | -| ------------------------ | --------------------------- | -| themeDarker: #014446 | black: #000000 | -| themeDark: #025c5f | neutralDark: #212121 | -| themeDarkAlt: #026d70 | neutralPrimary: #333 | -| themePrimary: #03787c | neutralPrimaryAlt: #3c3c3c | -| | neutralSecondary: #666666 | -| | neutralTertiary: #a6a6a6 | -| themeSecondary: #13898d | neutralTertiaryAlt: #c8c8c8 | -| themeTertiary: #49aeb1 | neutralLight: #eaeaea | -| themeLight: #98d6d8 | neutralLighter: #f4f4f4 | -| themeLighter: #c5e9ea | neutralLighterAlt: #f8f8f8 | -| themeLighterAlt: #f0f9fa | white: #fff | +```json +{ + "isInverted": true, + "palette": { + "themeDarker": "#014446", + "themeDark": "#025C5F", + "themeDarkAlt": "#026D70", + "themePrimary": "#03787C", + "themeSecondary": "#13898D", + "themeTertiary": "#49AEB1", + "themeLight": "#98D6D8", + "themeLighter": "#C5E9EA", + "themeLighterAlt": "#F0F9FA", + "neutralDark": "#201F1E", + "neutralPrimary": "#323130", + "neutralPrimaryAlt": "#3B3A39", + "neutralSecondary": "#605E5C", + "neutralTertiary": "#A19F9D", + "neutralTertiaryAlt": "#C8C8C8", + "neutralLight": "#EAEAEA", + "neutralLighter": "#F4F4F4", + "neutralLighterAlt": "#F8F8F8", + "neutralQuaternaryAlt": "#DADADA", + "neutralQuaternary": "#D0D0D0", + "black": "#000000", + "white": "#FFFFFF", + "backgroundColor": "#FFFFFF" + }, + "secondaryColors": { + "light": [ + { "themePrimary": "#FFFFFF", "backgroundColor": "#03787C" }, + { "themePrimary": "#E3FFFD", "backgroundColor": "#03787C" }, + { "themePrimary": "#03787C", "backgroundColor": "#E3FFFD" }, + { "themePrimary": "#FFF9E3", "backgroundColor": "#03787C" }, + { "themePrimary": "#03787C", "backgroundColor": "#FFF9E3" }, + { "themePrimary": "#03787C", "backgroundColor": "#F5F5F5" }, + { "themePrimary": "#242424", "backgroundColor": "#F5F5F5" }, + { "themePrimary": "#155473", "backgroundColor": "#FFFFFF" }, + { "themePrimary": "#FFFFFF", "backgroundColor": "#155473" }, + { "themePrimary": "#155473", "backgroundColor": "#E3FFFD" }, + { "themePrimary": "#E3FFFD", "backgroundColor": "#155473" }, + { "themePrimary": "#FFF9E3", "backgroundColor": "#155473" }, + { "themePrimary": "#155473", "backgroundColor": "#FFF9E3" } + ], + "dark": [] + }, + "displayMode": "light", + "themeSchemaVersion": "2.0.0", + "version": "2.0.0" +} +``` -The following code shows how to define a dictionary in PowerShell for the Teal theme's color palette. -```powershell -{  - themeDarker: '#014446',  - themeDark: '#025c5f',  - themeDarkAlt: '#026d70',  - themePrimary: '#03787c',  - themeSecondary: '#13898d',  - themeTertiary: '#49aeb1',  - themeLight: '#98d6d8',  - themeLighter: '#c5e9ea',  - themeLighterAlt: '#f0f9fa',  - black: '#000000',  - neutralDark: '#212121',  - neutralPrimary: '#333',  - neutralPrimaryAlt: '#3c3c3c',  - neutralSecondary: '#666666',  - neutralTertiary: '#a6a6a6',  - neutralTertiaryAlt: '#c8c8c8',  - neutralLight: '#eaeaea',  - neutralLighter: '#f4f4f4',  - neutralLighterAlt: '#f8f8f8',  - white: '#fff',  - neutralQuaternaryAlt: '#dadada',  - neutralQuaternary: '#d0d0d0',  - neutralSecondaryAlt: '#767676',  - primaryBackground: '#fff',  - primaryText: '#333', - accent: '#4f6bed' +The following is an example of a JSON object that defines a theme in legacy theme format. + +```json +{ + "isInverted": true, + "palette": { + "themeDarker": "#014446", + "themeDark": "#025C5F", + "themeDarkAlt": "#026D70", + "themePrimary": "#03787C", + "themeSecondary": "#13898D", + "themeTertiary": "#49AEB1", + "themeLight": "#98D6D8", + "themeLighter": "#C5E9EA", + "themeLighterAlt": "#F0F9FA", + "neutralDark": "#201F1E", + "neutralPrimary": "#323130", + "neutralPrimaryAlt": "#3B3A39", + "neutralSecondary": "#605E5C", + "neutralTertiary": "#A19F9D", + "neutralTertiaryAlt": "#C8C8C8", + "neutralLight": "#EAEAEA", + "neutralLighter": "#F4F4F4", + "neutralLighterAlt": "#F8F8F8", + "neutralQuaternaryAlt": "#DADADA", + "neutralQuaternary": "#D0D0D0", + "black": "#000000", + "white": "#FFFFFF" + }, + "themeSchemaVersion": "1.0.0", + "version": "1.0.0" } ``` -## Red theme -The following table shows the color palette used by the Red theme. +Besides the theme store schema, we also offer a simplified format for creating themes. +SharePoint Framework provides ten built‑in themes—eight for light backgrounds, and two for dark backgrounds. If you want to build a custom theme, a good starting point is to pick one of these built‑in themes and adjust the values as needed. You can then use the [Add‑SPOTheme](/powershell/module/microsoft.online.sharepoint.powershell/add-spotheme) PowerShell cmdlet to create your custom theme with this simplified structure. -| Theme colors | Neutral colors | -| ------------------------ | --------------------------- | -| themeDarker: #751b1e | black: #000000 | -| themeDark: #952226 | neutralDark: #212121 | -| themeDarkAlt: #c02b30 | neutralPrimary: #333 | -| themePrimary: #d13438 | neutralPrimaryAlt: #3c3c3c | -| | neutralSecondary: #666666 | -| | neutralTertiary: #a6a6a6 | -| themeSecondary: #d6494d | neutralTertiaryAlt: #c8c8c8 | -| themeTertiary: #ecaaac | neutralLight: #eaeaea | -| themeLight: #f6d6d8 | neutralLighter:#f4f4f4 | -| themeLighter: #faebeb | neutralLighterAlt: #f8f8f8 | -| themeLighterAlt: #fdf5f5 | white: #fff | +## Teal theme -The following code shows how to define a dictionary in PowerShell for the Red theme's color palette. +Use the following PowerShell hashtable to define the color pairs for the Teal theme. ```powershell -{  - themeDarker: '#751b1e',  - themeDark: '#952226',  - themeDarkAlt: '#c02b30',  - themePrimary: '#d13438',  - themeSecondary: '#d6494d',  - themeTertiary: '#ecaaac',  - themeLight: '#f6d6d8',  - themeLighter: '#faebeb',  - themeLighterAlt: '#fdf5f5',  - black: '#000000',  - neutralDark: '#212121',  - neutralPrimary: '#333',  - neutralPrimaryAlt: '#3c3c3c',  -  neutralSecondary: '#666666',  - neutralTertiary: '#a6a6a6',  - neutralTertiaryAlt: '#c8c8c8',  - neutralLight: '#eaeaea',  - neutralLighter: '#f4f4f4',  - neutralLighterAlt: '#f8f8f8',  - white: '#fff',  - neutralQuaternaryAlt: '#dadada',  - neutralQuaternary: '#d0d0d0',  - neutralSecondaryAlt: '#767676',  - primaryBackground: '#fff',  - primaryText: '#333', - accent: '#ca5010' +$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" } + ) } ``` -## Orange theme - -The following table shows the color palette used by the Orange theme. - -| Theme colors | Neutral colors | -| ------------------------ | --------------------------- | -| themeDarker: #6f2d09 | black: #000000 | -| themeDark: #8d390b | neutralDark: #212121 | -| themeDarkAlt: #b5490f | neutralPrimary: #333 | -| themePrimary: #ca5010 | neutralPrimaryAlt: #3c3c3c | -| | neutralSecondary: #666666 | -| | neutralTertiary: #a6a6a6 | -| themeSecondary: #e55c12 | neutralTertiaryAlt: #c8c8c8 | -| themeTertiary: #f6b28d | neutralLight: #eaeaea | -| themeLight: #fbdac9 | neutralLighter: #f4f4f4 | -| themeLighter: #fdede4 | neutralLighterAlt: #f8f8f8 | -| themeLighterAlt: #fef6f1 | white: #fff | +## Blue theme -The following code shows how to define a dictionary in PowerShell for the Orange theme's color palette. +Use the following PowerShell hashtable to define the color pairs for the Blue theme. ```powershell -{  - themeDarker: '#6f2d09',  - themeDark: '#8d390b',  - themeDarkAlt: '#b5490f',  - themePrimary: '#ca5010',  - themeSecondary: '#e55c12',  - themeTertiary: '#f6b28d',  - themeLight: '#fbdac9',  - themeLighter: '#fdede4',  - themeLighterAlt: '#fef6f1',  - black: '#000000',  - neutralDark: '#212121',  - neutralPrimary: '#333',  - neutralPrimaryAlt: '#3c3c3c',  - neutralSecondary: '#666666',  - neutralTertiary: '#a6a6a6',  - neutralTertiaryAlt: '#c8c8c8',  - neutralLight: '#eaeaea',  - neutralLighter: '#f4f4f4',  - neutralLighterAlt: '#f8f8f8',  - white: '#fff',  - neutralQuaternaryAlt: '#dadada',  - neutralQuaternary: '#d0d0d0',  - neutralSecondaryAlt: '#767676',  - primaryBackground: '#fff',  - primaryText: '#333', - accent: '#986f0b' +$colorPairs = @{ + light = @( + @{ "accentColor" = "#1267B5"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#1267B5" } + @{ "accentColor" = "#1267B5"; "backgroundColor" = "#D7EEFF" } + @{ "accentColor" = "#D7EEFF"; "backgroundColor" = "#1267B5" } + @{ "accentColor" = "#1267B5"; "backgroundColor" = "#B6FEC3" } + @{ "accentColor" = "#B6FEC3"; "backgroundColor" = "#1267B5" } + @{ "accentColor" = "#1267B5"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#242424"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#010B2F"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#010B2F" } + @{ "accentColor" = "#010B2F"; "backgroundColor" = "#D7EEFF" } + @{ "accentColor" = "#D7EEFF"; "backgroundColor" = "#010B2F" } + @{ "accentColor" = "#010B2F"; "backgroundColor" = "#B6FEC3" } + @{ "accentColor" = "#B6FEC3"; "backgroundColor" = "#010B2F" } + ) } ``` -## Green theme - -The following table shows the color palette used by the Green theme. - -| Theme colors | Neutral colors | -| ------------------------ | --------------------------- | -| themeDarker: #294903 | black: #000000 | -| themeDark: #386304 | neutralDark: #201f1e | -| themeDarkAlt: #427505 | neutralPrimary: #323130 | -| themePrimary: #498205 | neutralPrimaryAlt: #3b3a39 | -| | neutralSecondary: #605e5c | -| | neutralTertiary: #a19f9d | -| themeSecondary: #5a9117 | neutralTertiaryAlt: #c8c6c4 | -| themeTertiary: #85b44c | neutralLight: #edebe9 | -| themeLight: #bdda9b | neutralLighter: #f3f2f1 | -| themeLighter: #dbebc7 | neutralLighterAlt: #faf9f8 | -| themeLighterAlt: #f6faf0 | white: #fff | +## Orange theme -The following code shows how to define a dictionary in PowerShell for the Green theme's color palette. +Use the following PowerShell hashtable to define the color pairs for the Orange theme. ```powershell -{  - themePrimary: '#498205',  - themeLighterAlt: '#f6faf0',  - themeLighter: '#dbebc7',  - themeLight: '#bdda9b',  - themeTertiary: '#85b44c',  - themeSecondary: '#5a9117',  - themeDarkAlt: '#427505',  - themeDark: '#386304',  - themeDarker: '#294903',  - neutralLighterAlt: '#faf9f8',  - neutralLighter: '#f3f2f1',  - neutralLight: '#edebe9',  - neutralQuaternaryAlt: '#e1dfdd',  - neutralQuaternary: '#d2d0ce',  - neutralTertiaryAlt: '#c8c6c4',  - neutralTertiary: '#a19f9d',  - neutralSecondaryAlt: '#8a8886',  - neutralSecondary: '#605e5c',  - neutralPrimary: '#323130',  - neutralPrimaryAlt: '#3b3a39',  - neutralDark: '#201f1e',  - black: '#000000',  - white: '#fff',  - primaryBackground: '#fff',  - primaryText: '#333', - accent: '#03787c' -} -``` -## Blue theme +$colorPairs = @{ + light = @( + @{ "accentColor" = "#A74411"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#A74411" } + @{ "accentColor" = "#A74411"; "backgroundColor" = "#D7EEFF" } + @{ "accentColor" = "#D7EEFF"; "backgroundColor" = "#A74411" } + @{ "accentColor" = "#A74411"; "backgroundColor" = "#FFECB6" } + @{ "accentColor" = "#FFECB6"; "backgroundColor" = "#A74411" } + @{ "accentColor" = "#FF9557"; "backgroundColor" = "#242424" } + @{ "accentColor" = "#A74411"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#242424"; "backgroundColor" = "#EBEBEB" } + ) +} -The following table shows the color palette used by the Blue theme. +``` -| Theme colors | Neutral colors | -| ------------------------ | --------------------------- | -| themeDarker: #004578 | black: #000000 | -| themeDark: #005a9e | neutralDark: #212121 | -| themeDarkAlt: #106ebe | neutralPrimary: #333 | -| themePrimary: #0078d7 | neutralPrimaryAlt: #3c3c3c | -| | neutralSecondary: #666666 | -| | neutralTertiary: #a6a6a6 | -| themeSecondary: #2b88d8 | neutralTertiaryAlt: #c8c8c8 | -| themeTertiary: #71afe5 | neutralLight: #eaeaea | -| themeLight: #c7e0f4 | neutralLighter: #f4f4f4 | -| themeLighter: #deecf9 | neutralLighterAlt: #f8f8f8 | -| themeLighterAlt: #eff6fc | white: #fff | +## Red theme -The following code shows how to define a dictionary in PowerShell for the Blue theme's color palette. +Use the following PowerShell hashtable to define the color pairs for the Red theme. ```powershell -{  - themePrimary: '#0078d7',  - themeLighterAlt: '#eff6fc',  - themeLighter: '#deecf9',  - themeLight: '#c7e0f4',  - themeTertiary: '#71afe5',  - themeSecondary: '#2b88d8',  - themeDarkAlt: '#106ebe',  - themeDark: '#005a9e',  - themeDarker: '#004578',  - neutralLighterAlt: '#f8f8f8',  - neutralLighter: '#f4f4f4',  - neutralLight: '#eaeaea',  - neutralQuaternaryAlt: '#dadada',  - neutralQuaternary: '#d0d0d0',  - neutralTertiaryAlt: '#c8c8c8',  - neutralTertiary: '#a6a6a6',  - neutralSecondaryAlt: '#767676',  - neutralSecondary: '#666666',  - neutralPrimary: '#333',  - neutralPrimaryAlt: '#3c3c3c',  - neutralDark: '#212121',  - black: '#000000',  - white: '#fff',  - primaryBackground: '#fff',  - primaryText: '#333', - accent: '#8764b8' +$colorPairs = @{ + light = @( + @{ "accentColor" = "#AD3A39"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#AD3A39" } + @{ "accentColor" = "#AD3A39"; "backgroundColor" = "#FFE0E2" } + @{ "accentColor" = "#FFE0E2"; "backgroundColor" = "#AD3A39" } + @{ "accentColor" = "#AD3A39"; "backgroundColor" = "#FFECB6" } + @{ "accentColor" = "#FFECB6"; "backgroundColor" = "#AD3A39" } + @{ "accentColor" = "#AD3A39"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#242424"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#590408"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#590408" } + @{ "accentColor" = "#590408"; "backgroundColor" = "#FFE0E2" } + @{ "accentColor" = "#FFE0E2"; "backgroundColor" = "#590408" } + @{ "accentColor" = "#590408"; "backgroundColor" = "#FFECB6" } + @{ "accentColor" = "#FFECB6"; "backgroundColor" = "#590408" } + ) } ``` ## Purple theme -The following table shows the color palette used by the Purple theme. - -| Theme colors | Neutral colors | -| ------------------------ | --------------------------- | -| themeDarker: #27268a | black: #000000 | -| themeDark: #3230b0 | neutralDark: #212121 | -| themeDarkAlt: #5250cf | neutralPrimary: #333 | -| themePrimary: #6b69d6 | neutralPrimaryAlt: #3c3c3c | -| | neutralSecondary: #666666 | -| | neutralTertiary: #a6a6a6 | -| themeSecondary: #7a78da | neutralTertiaryAlt: #c8c8c8 | -| themeTertiary: #c1c0ee | neutralLight: #eaeaea | -| themeLight: #e1e1f7 | neutralLighter: #f4f4f4 | -| themeLighter: #f0f0fb | neutralLighterAlt: #f8f8f8 | -| themeLighterAlt: #f8f7fd | white: #fff | - -The following code shows how to define a dictionary in PowerShell for the Purple theme's color palette. +Use the following PowerShell hashtable to define the color pairs for the Purple theme. ```powershell -{  - themePrimary: '#6b69d6',  - themeLighterAlt: '#f8f7fd',  - themeLighter: '#f0f0fb',  - themeLight: '#e1e1f7',  - themeTertiary: '#c1c0ee',  - themeSecondary: '#7a78da',  - themeDarkAlt: '#5250cf',  - themeDark: '#3230b0',  - themeDarker: '#27268a',  - neutralLighterAlt: '#f8f8f8',  - neutralLighter: '#f4f4f4',  - neutralLight: '#eaeaea',  - neutralQuaternaryAlt: '#dadada',  - neutralQuaternary: '#d0d0d0',  - neutralTertiaryAlt: '#c8c8c8',  - neutralTertiary: '#a6a6a6',  - neutralSecondaryAlt: '#767676',  - neutralSecondary: '#666666',  - neutralPrimary: '#333',  - neutralPrimaryAlt: '#3c3c3c',  - neutralDark: '#212121',  - black: '#000000',  - white: '#fff',  - primaryBackground: '#fff',  - primaryText: '#333', - accent: '#038387' +$colorPairs = @{ + light = @( + @{ "accentColor" = "#72559B"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#72559B" } + @{ "accentColor" = "#72559B"; "backgroundColor" = "#EEE2FF" } + @{ "accentColor" = "#EEE2FF"; "backgroundColor" = "#72559B" } + @{ "accentColor" = "#72559B"; "backgroundColor" = "#FFECB6" } + @{ "accentColor" = "#FFECB6"; "backgroundColor" = "#72559B" } + @{ "accentColor" = "#72559B"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#242424"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#382D6F"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#382D6F" } + @{ "accentColor" = "#382D6F"; "backgroundColor" = "#EEE2FF" } + @{ "accentColor" = "#EEE2FF"; "backgroundColor" = "#382D6F" } + @{ "accentColor" = "#382D6F"; "backgroundColor" = "#FFECB6" } + @{ "accentColor" = "#FFECB6"; "backgroundColor" = "#382D6F" } + ) } ``` -## Gray theme - -The following table shows the color palette used by the Gray theme. - -| Theme colors | Neutral colors | -| ------------------------ | --------------------------- | -| themeDarker: #323130 | black: #000000 | -| themeDark: #403e3d | neutralDark: #212121 | -| themeDarkAlt: #53504e | neutralPrimary: #333 | -| themePrimary: #5d5a58 | neutralPrimaryAlt: #3c3c3c | -| | neutralSecondary: #666666 | -| | neutralTertiary: #a6a6a6 | -| themeSecondary: #6d6a67 | neutralTertiaryAlt: #c8c8c8 | -| themeTertiary: #bbb9b8 | neutralLight: #eaeaea | -| themeLight: #dfdedd | neutralLighter: #f4f4f4 | -| themeLighter: #efeeee | neutralLighterAlt: #f8f8f8 | -| themeLighterAlt: #f7f7f7 | white: #fff | +## Green theme -The following code shows how to define a dictionary in PowerShell for the Gray theme's color palette. +Use the following PowerShell hashtable to define the color pairs for the Green theme. ```powershell -{  - themePrimary: '#5d5a58',  - themeLighterAlt: '#f7f7f7',  - themeLighter: '#efeeee',  - themeLight: '#dfdedd',  - themeTertiary: '#bbb9b8',  - themeSecondary: '#6d6a67',  - themeDarkAlt: '#53504e',  - themeDark: '#403e3d',  - themeDarker: '#323130',  - neutralLighterAlt: '#f8f8f8',  - neutralLighter: '#f4f4f4',  - neutralLight: '#eaeaea',  - neutralQuaternaryAlt: '#dadada',  - neutralQuaternary: '#d0d0d0',  - neutralTertiaryAlt: '#c8c8c8',  - neutralTertiary: '#a6a6a6',  - neutralSecondaryAlt: '#767676',  - neutralSecondary: '#666666',  - neutralPrimary: '#333',  - neutralPrimaryAlt: '#3c3c3c',  - neutralDark: '#212121',  - black: '#000000',  - white: '#fff',  - primaryBackground: '#fff',  - primaryText: '#333', - accent: '#0078d4' +$colorPairs = @{ + light = @( + @{ "accentColor" = "#437509"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#437509" } + @{ "accentColor" = "#437509"; "backgroundColor" = "#C2FFFC" } + @{ "accentColor" = "#C2FFFC"; "backgroundColor" = "#437509" } + @{ "accentColor" = "#437509"; "backgroundColor" = "#CCFF4D" } + @{ "accentColor" = "#CCFF4D"; "backgroundColor" = "#437509" } + @{ "accentColor" = "#437509"; "backgroundColor" = "#F5F5F5" } + @{ "accentColor" = "#242424"; "backgroundColor" = "#F5F5F5" } + @{ "accentColor" = "#2C5A43"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#2C5A43" } + @{ "accentColor" = "#2C5A43"; "backgroundColor" = "#C2FFFC" } + @{ "accentColor" = "#C2FFFC"; "backgroundColor" = "#2C5A43" } + @{ "accentColor" = "#2C5A43"; "backgroundColor" = "#CCFF4D" } + @{ "accentColor" = "#CCFF4D"; "backgroundColor" = "#2C5A43" } + ) } ``` ## Periwinkle theme -The following table shows the color palette used by the Periwinkle theme. - -| Theme colors | Neutral colors | -| ------------------------ | --------------------------- | -| themeDarker: #383966 | black: #000000 | -| themeDark: #3D3E78 | neutralDark: #201f1e | -| themeDarkAlt: #444791 | neutralPrimary: #323130 | -| themePrimary: #5B5FC7 | neutralPrimaryAlt: #3b3a39 | -| | neutralSecondary: #605e5c | -| | neutralTertiary: #a19f9d | -| themeSecondary: #7579EB | neutralTertiaryAlt: #c8c6c4 | -| themeTertiary: #7F85F5 | neutralLight: #edebe9 | -| themeLight: #AAB1FA | neutralLighter: #f3f2f1 | -| themeLighter: #B6BCFA | neutralLighterAlt: #faf9f8 | -| themeLighterAlt: #C5CBFA | white: #fff | - -The following code shows how to define a dictionary in PowerShell for the Periwinkle theme's color palette. +Use the following PowerShell hashtable to define the color pairs for the Periwinkle theme. ```powershell -{  - themeDarker: '#383966',  - themeDark: '#3D3E78',  - themeDarkAlt: '#444791',  - themePrimary: '#5B5FC7',  - themeSecondary: '#7579EB',  - themeTertiary: '#7F85F5',  - themeLight: '#AAB1FA',  - themeLighter: '#B6BCFA',  - themeLighterAlt: '#C5CBFA',  - black: '#000000',  - neutralDark: '#201f1e',  - neutralPrimary: '#323130',  - neutralPrimaryAlt: '#3b3a39',  - neutralSecondary: '#605e5c',  - neutralTertiary: '#a19f9d',  - neutralTertiaryAlt: '#c8c6c4',  - neutralLight: '#edebe9',  - neutralLighter: '#f3f2f1',  - neutralLighterAlt: '#faf9f8',  - white: '#fff',  - neutralQuaternaryAlt: '#dadada',  - neutralQuaternary: '#d0d0d0',  - neutralSecondaryAlt: '#767676',  - primaryBackground: '#fff',  - primaryText: '#333', - accent: '#5B5FC7' +$colorPairs = @{ + light = @( + @{ "accentColor" = "#5B5D9B"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#5B5D9B" } + @{ "accentColor" = "#5B5D9B"; "backgroundColor" = "#DEE2FC" } + @{ "accentColor" = "#DEE2FC"; "backgroundColor" = "#5B5D9B" } + @{ "accentColor" = "#5B5D9B"; "backgroundColor" = "#B6FEC3" } + @{ "accentColor" = "#B6FEC3"; "backgroundColor" = "#5B5D9B" } + @{ "accentColor" = "#5B5D9B"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#242424"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#382D6F"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#382D6F" } + @{ "accentColor" = "#382D6F"; "backgroundColor" = "#DEE2FC" } + @{ "accentColor" = "#DEE2FC"; "backgroundColor" = "#382D6F" } + @{ "accentColor" = "#382D6F"; "backgroundColor" = "#B6FEC3" } + @{ "accentColor" = "#B6FEC3"; "backgroundColor" = "#382D6F" } + ) } ``` +## Cobalt theme -## Dark Yellow theme +Use the following PowerShell hashtable to define the color pairs for the Cobalt theme. -The following table shows the color palette used by the Dark Yellow theme. +```powershell +$colorPairs = @{ + light = @( + @{ "accentColor" = "#355DCD"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#355DCD" } + @{ "accentColor" = "#355DCD"; "backgroundColor" = "#D7EEFF" } + @{ "accentColor" = "#D7EEFF"; "backgroundColor" = "#355DCD" } + @{ "accentColor" = "#355DCD"; "backgroundColor" = "#B0F4FF" } + @{ "accentColor" = "#B0F4FF"; "backgroundColor" = "#355DCD" } + @{ "accentColor" = "#355DCD"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#242424"; "backgroundColor" = "#EBEBEB" } + @{ "accentColor" = "#1A1F50"; "backgroundColor" = "#FFFFFF" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#1A1F50" } + @{ "accentColor" = "#1A1F50"; "backgroundColor" = "#D7EEFF" } + @{ "accentColor" = "#D7EEFF"; "backgroundColor" = "#1A1F50" } + @{ "accentColor" = "#1A1F50"; "backgroundColor" = "#B0F4FF" } + @{ "accentColor" = "#B0F4FF"; "backgroundColor" = "#1A1F50" } + ) +} +``` -| Theme colors | Neutral colors | -| ------------------------ | --------------------------- | -| themeDarker: #fff171 | black: #f8f8f8 | -| themeDark: #ffed4b | neutralDark: #f4f4f4 | -| themeDarkAlt: #ffe817 | neutralPrimary: #ffffff | -| themePrimary: #fce100 | neutralPrimaryAlt: #eaeaea | -| | neutralSecondary: #dadada | -| | neutralTertiary: #c8c8c8 | -| themeSecondary: #e3cc00 | neutralTertiaryAlt: #6d6d6d | -| themeTertiary: #6a5f00 | neutralLight: #3f3f3f | -| themeLight: #322d00 | neutralLighter: #313131 | -| themeLighter: #191700 | neutralLighterAlt: #282828 | -| themeLighterAlt: #0d0b00 | white: #1f1f1f | -The following code shows how to define a dictionary in PowerShell for the Dark Yellow theme's color palette. +## Dark Teal theme + +Use the following PowerShell hashtable to define the color pairs for the Dark Teal theme. ```powershell -{  - themePrimary: '#fce100',  - themeLighterAlt: '#0d0b00',  - themeLighter: '#191700',  - themeLight: '#322d00',  - themeTertiary: '#6a5f00',  - themeSecondary: '#e3cc00',  - themeDarkAlt: '#ffe817',  - themeDark: '#ffed4b',  - themeDarker: '#fff171',  - neutralLighterAlt: '#282828',  - neutralLighter: '#313131',  - neutralLight: '#3f3f3f',  - neutralQuaternaryAlt: '#484848',  - neutralQuaternary: '#4f4f4f',  - neutralTertiaryAlt: '#6d6d6d',  - neutralTertiary: '#c8c8c8',  - neutralSecondaryAlt: '#d0d0d0',  - neutralSecondary: '#dadada',  - neutralPrimaryAlt: '#eaeaea',  - neutralPrimary: '#ffffff',  - neutralDark: '#f4f4f4',  - black: '#f8f8f8',  - white: '#1f1f1f',  - primaryBackground: '#1f1f1f',  - primaryText: '#ffffff',  - error: '#ff5f5f', - accent: '#ffc83d' +$colorPairs = @{ + light = @( + @{ "accentColor" = "#51AEB2"; "backgroundColor" = "#292929" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#03787C" } + @{ "accentColor" = "#E3FFFD"; "backgroundColor" = "#03787C" } + @{ "accentColor" = "#03787C"; "backgroundColor" = "#E3FFFD" } + @{ "accentColor" = "#FFF9E3"; "backgroundColor" = "#03787C" } + @{ "accentColor" = "#03787C"; "backgroundColor" = "#FFF9E3" } + @{ "accentColor" = "#FFF9E3"; "backgroundColor" = "#292929" } + @{ "accentColor" = "#F5F5F5"; "backgroundColor" = "#292929" } + @{ "accentColor" = "#E3FFFD"; "backgroundColor" = "#292929" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#155473" } + @{ "accentColor" = "#155473"; "backgroundColor" = "#E3FFFD" } + @{ "accentColor" = "#E3FFFD"; "backgroundColor" = "#155473" } + @{ "accentColor" = "#FFF9E3"; "backgroundColor" = "#155473" } + @{ "accentColor" = "#155473"; "backgroundColor" = "#FFF9E3" } + ) } ``` ## Dark Blue theme -The following table shows the color palette used by the Dark Blue theme. - -| Theme colors | Neutral colors | -| ------------------------ | --------------------------- | -| themeDarker: #6cdfff | black: #f8f8f8 | -| themeDark: #44d6ff | neutralDark: #f4f4f4 | -| themeDarkAlt: #0ecbff | neutralPrimary: #ffffff | -| themePrimary: #00bcf2 | neutralPrimaryAlt: #eaeaea | -| | neutralSecondary: #dadada | -| | neutralTertiary: #c8c8c8 | -| themeSecondary: #00abda | neutralTertiaryAlt: #646e8a | -| themeTertiary: #005066 | neutralLight: #404759 | -| themeLight: #002630 | neutralLighter: #353a49 | -| themeLighter: #001318 | neutralLighterAlt: #2e3340 | -| themeLighterAlt: #00090c | white: #262a35 | - -The following code shows how to define a dictionary in PowerShell for the Dark Blue theme's color palette. +Use the following PowerShell hashtable to define the color pairs for the Dark Blue theme. ```powershell -{  - themePrimary: '#00bcf2',  - themeLighterAlt: '#00090c',  - themeLighter: '#001318',  - themeLight: '#002630',  - themeTertiary: '#005066',  - themeSecondary: '#00abda',  - themeDarkAlt: '#0ecbff',  - themeDark: '#44d6ff',  - themeDarker: '#6cdfff',  - neutralLighterAlt: '#2e3340',  - neutralLighter: '#353a49',  - neutralLight: '#404759',  - neutralQuaternaryAlt: '#474e62',  - neutralQuaternary: '#4c546a',  - neutralTertiaryAlt: '#646e8a',  - neutralTertiary: '#c8c8c8',  - neutralSecondaryAlt: '#d0d0d0',  - neutralSecondary: '#dadada',  - neutralPrimaryAlt: '#eaeaea',  - neutralPrimary: '#ffffff',  - neutralDark: '#f4f4f4',  - black: '#f8f8f8',  - white: '#262a35',  - primaryBackground: '#262a35',  - primaryText: '#ffffff', - error: '#ff5f5f', - accent: '#3a96dd' +$colorPairs = @{ + light = @( + @{ "accentColor" = "#529FF1"; "backgroundColor" = "#292929" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#1267B5" } + @{ "accentColor" = "#1267B5"; "backgroundColor" = "#D7EEFF" } + @{ "accentColor" = "#D7EEFF"; "backgroundColor" = "#1267B5" } + @{ "accentColor" = "#1267B5"; "backgroundColor" = "#B6FEC3" } + @{ "accentColor" = "#B6FEC3"; "backgroundColor" = "#1267B5" } + @{ "accentColor" = "#B6FEC3"; "backgroundColor" = "#292929" } + @{ "accentColor" = "#F5F5F5"; "backgroundColor" = "#292929" } + @{ "accentColor" = "#D7EEFF"; "backgroundColor" = "#292929" } + @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#010B2F" } + @{ "accentColor" = "#010B2F"; "backgroundColor" = "#D7EEFF" } + @{ "accentColor" = "#D7EEFF"; "backgroundColor" = "#010B2F" } + @{ "accentColor" = "#010B2F"; "backgroundColor" = "#B6FEC3" } + @{ "accentColor" = "#B6FEC3"; "backgroundColor" = "#010B2F" } + ) } ``` diff --git a/docs/declarative-customization/site-theming/sharepoint-site-theming-overview.md b/docs/declarative-customization/site-theming/sharepoint-site-theming-overview.md index 5762ad676a..3eec6d5cc4 100644 --- a/docs/declarative-customization/site-theming/sharepoint-site-theming-overview.md +++ b/docs/declarative-customization/site-theming/sharepoint-site-theming-overview.md @@ -1,7 +1,7 @@ --- title: SharePoint site theming description: New options for applying custom styles and colors to sites that make it easier to define and manage themes across site collections. -ms.date: 04/23/2025 +ms.date: 01/21/2026 ms.localizationpriority: high --- @@ -12,10 +12,9 @@ SharePoint site owners have new options for applying custom styles and colors to These new features include: * The ability to define custom themes and make them available to site owners. Themes are defined in a [JSON schema](sharepoint-site-theming-json-schema.md) that stores color settings and related metadata for each theme. -* An online [Theme Generator tool](https://aka.ms/themedesigner) that you can use to define new custom themes. -* A simplified set of default themes, with six light themes and two dark themes presently available. -* An updated color palette, with 12 light colors and 6 dark colors, as well as 16 supplementary themes. +* A simplified set of default themes, with eight light themes and two dark themes presently available. * Control over which themes are available for use on pages within your sites. For example, you can define custom themes based on your organization's branding or identity, and make those the only available themes within your sites. +* Support for up to 16 accent‑and‑background color pairs per theme, enabling multiple brand colors that reflect your organization’s identity. These capabilities are available to administrators via [PowerShell cmdlets](sharepoint-site-theming-powershell.md), and to developers via the [SharePoint client-side object model (CSOM)](sharepoint-site-theming-csom.md) or the [SharePoint REST API](sharepoint-site-theming-rest-api.md). For information on applying custom themes to individual site collections see [SharePoint site design and site script overview](../site-design-overview.md). @@ -31,18 +30,13 @@ The following predefined themes are available by default: * __Red__ * __Purple__ * __Green__ -* __Gray__ * __Periwinkle__ -* __Dark Yellow__ (inverted theme) +* __Cobalt__ +* __Dark Teal__ (inverted theme) * __Dark Blue__ (inverted theme) These themes have been designed for readability, so you might find them to be useful starting points for creating custom themes. For more information about default themes, see [SharePoint site theming: JSON schema](sharepoint-site-theming-json-schema.md). -In addition to the default themes, you can select from supplementary themes. The following customizations are available: - -* __Light themes__: Gold, Teal, Dark Blue, Indigo, Plum, Warm Gray -* __Dark themes__: Red, Green, Purple, Gray - ## Select a modern theme @@ -51,7 +45,7 @@ To select from the available themes for a SharePoint site, choose the __gear ico The following image shows how the default themes are presented in the theme picker dialog box. -![Image showing list of default and dark (inverted) themes](../../images/theme-defaults.png) +![Image showing list of default and dark (inverted) themes](../images/default-themes.png) When you choose a theme in the list, those color settings are instantly applied to the page so that you can see what the selected theme will look like. diff --git a/docs/declarative-customization/site-theming/sharepoint-site-theming-rest-api.md b/docs/declarative-customization/site-theming/sharepoint-site-theming-rest-api.md index de3d444348..d68ff3b59b 100644 --- a/docs/declarative-customization/site-theming/sharepoint-site-theming-rest-api.md +++ b/docs/declarative-customization/site-theming/sharepoint-site-theming-rest-api.md @@ -1,7 +1,7 @@ --- title: SharePoint site theming - REST API description: Use the the SharePoint REST interface to perform basic create, read, update, and delete (CRUD) operations on site themes. -ms.date: 06/28/2022 +ms.date: 01/21/2026 ms.localizationpriority: high --- @@ -38,7 +38,53 @@ The URL for theme management REST commands is based on _api/thememanager. For ex ## AddTenantTheme -The following JavaScript sample code shows how to add a new theme to a tenant. +The following JavaScript sample code shows how to add a new format theme to a tenant. + +```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); +} + + +RestRequest("/_api/thememanager/AddTenantTheme"); + +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/AddTenantTheme", {name:"Teal Theme", themeJson: JSON.stringify(colorPairs), shouldParseColorPair: true}); +``` + +The following JavaScript sample code shows how to add a legacy format theme to a tenant. ```javascript function RestRequest(url,params) { @@ -91,6 +137,7 @@ var pal = { "error": "#ff5f5f" } } + RestRequest("/_api/thememanager/AddTenantTheme", {name:"Sounders Rave Green", themeJson: JSON.stringify(pal)}); ``` @@ -153,7 +200,7 @@ RestRequest("/_api/thememanager/GetTenantThemingOptions"); ## ApplyTheme -The following JavaScript sample code shows how to apply theme to the site. +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](sharepoint-site-theming-json-schema.md) ```javascript function RestRequest(url,params) { @@ -174,14 +221,14 @@ function RestRequest(url,params) { req.send(params ? JSON.stringify(params) : void 0); } -var pal = { +var themeJson = { "palette" : { "themePrimary": "#1BF242", "themeLighterAlt": "#0d0b00", "themeLighter": "#0b35bc", "themeLight": "#322d00", "themeTertiary": "#6a5f00", - "themeSecondary": "#1B22F2", + "themeSecondary": "#1B22F2", "themeDarkAlt": "#ffe817", "themeDark": "#ffed4b", "themeDarker": "#fff171", @@ -203,12 +250,58 @@ var pal = { "error": "#ff5f5f" } } -RestRequest("/_api/thememanager/ApplyTheme", {name:"Sounders Rave Green", themeJson: JSON.stringify(pal)}); +RestRequest("/_api/thememanager/ApplyTheme", {name:"Sounders Rave Green", themeJson: JSON.stringify(themeJson)}); ``` ## UpdateTenantTheme -The following JavaScript sample code shows how to update tenant theme. +The following JavaScript example shows how to update a tenant theme in the new format. + +```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); +} + + +RestRequest("/_api/thememanager/AddTenantTheme"); + +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/UpdateTenantTheme", {name:"Teal Theme", themeJson: JSON.stringify(colorPairs), shouldParseColorPair: true}); +``` + +The following JavaScript example shows how to update a tenant theme in the legacy format. ```javascript function RestRequest(url,params) {