SharePoint 网站主题：JSON 架构

了解网站主题存储结构

SharePoint 网站主题功能使用 JSON 架构来存储有关每个主题的颜色设置和其他信息。主题设置存储在包含以下键的 JSON 对象中，只有新主题格式支持 secondaryColor 和 displayMode 字段：

isInverted：使用浅色主题时，此值应为 false；使用深色主题时，此值应为 true。此值控制 SharePoint 是使用深色主题还是浅色主题在有色背景上呈现文本。
backgroundImageUri：可选主题背景图像的 URI（如果没有背景图像，此值可以为空）。
调色板：存储主题的 RGB 颜色值的嵌套 JSON 对象。使用新的主题格式时，和 themePrimarybackgroundColor 的值将用作调色板中的第一个颜色对。调色板对象包括以下键：
- themePrimary
- themeLighterAlt
- themeLighter
- themeLight
- themeTertiary
- themeSecondary
- themeDarkAlt
- themeDark
- themeDarker
- neutralLighterAlt
- neutralLighter
- neutralLight
- neutralQuaternaryAlt
- neutralQuaternary
- neutralTertiaryAlt
- neutralTertiary
- neutralSecondaryAlt
- neutralSecondary
- neutralPrimaryAlt
- neutralPrimary
- neutralDark
- black
- white
- primaryBackground
- primaryText
- bodyBackground
- bodyText
- DisabledBackground
- DisabledText
- error
- accent
- backgroundColor

注意

backgroundColor 仅以新的主题格式提供。

palette 元素中的颜色指定为 6 位或 3 位十六进制 RGB 字符串值。

另一个选项是使用主题生成器工具生成自定义主题调色板。它不仅提供交互式 UI 以供选择主题颜色，还自动生成自定义主题的 JSON、SASS 和 PowerShell 定义。

注意

主题生成器定义目前不包括以下颜色槽和键/值对：

“primaryBackground”
“primaryText”
“bodyBackground”
“bodyText”
“disabledBackground”
“disabledText”
“error”
“accent”
“backgroundColor”

在上载到租户之前，可以将这些颜色插槽手动添加到你生成的定义。

主题生成器工具

secondaryColors：仅在 SharePoint 网站主题架构的新主题格式中可用的可选部分。它定义了补充主主题调色板的附加主题色和背景色对。第一个颜色对来自调色板。目前，仅支持浅色模式主题。

下面是 secondaryColors 的示例，它是 themePrimary 和 backgroundColor 的组合集。 secondaryColors 元素中的颜色指定为 6 位或 3 位十六进制 RGB 字符串值。

  "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 最新主题格式。用于 1.0.0 旧主题格式。
版本：主题版本。将用于 2.0.0 最新主题格式。用于 1.0.0 旧主题格式。

下面是一个 JSON 对象的示例，该对象以新的主题格式为 Teal 主题定义主题。

{
  "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"
}

下面是一个 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"
}

添加或更新主题

若要创建或更新主题，请使用简化的 JSON 格式，而不是完整的主题存储架构。

SharePoint 框架提供 10 个内置主题-8 个用于浅色背景，2 个用于深色背景。若要生成自定义主题，请首先选择其中一个内置主题并根据需要调整值。然后使用 Add-SPOTheme PowerShell cmdlet 使用此简化格式创建或更新自定义主题。

青色主题

使用以下 PowerShell 哈希表定义 Teal 主题的颜色对。

$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" }
  )
}

蓝色主题

使用以下 PowerShell 哈希表定义蓝色主题的颜色对。

$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" }
  )
}

橙色主题

使用以下 PowerShell 哈希表定义橙色主题的颜色对。


$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" }
  )
}

红色主题

使用以下 PowerShell 哈希表定义红色主题的颜色对。

$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" }
  )
}

紫色主题

使用以下 PowerShell 哈希表定义紫色主题的颜色对。

$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" }
  )
}

绿色主题

使用以下 PowerShell 哈希表定义绿色主题的颜色对。

$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 主题

使用以下 PowerShell 哈希表定义 Periwinkle 主题的颜色对。

$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" }
  )
}

“钴”主题

使用以下 PowerShell 哈希表定义 Cobalt 主题的颜色对。

$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" }
  )
}

深青色主题

使用以下 PowerShell 哈希表定义深青色主题的颜色对。

$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" }
  )
}

深蓝色主题

使用以下 PowerShell 哈希表定义深蓝色主题的颜色对。

$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" }
  )
}

另请参阅

Last updated on 2026-03-21