SharePoint 网站主题：JSON 架构

新的 SharePoint 网站主题功能使用 JSON 架构，存储颜色设置和每个主题的其他信息。 主题设置存储在包含以下键的 JSON 对象中：

• name：主题名称，显示在主题选取器 UI 中，也被管理员和开发者用来在 PowerShell cmdlet 或 SharePoint REST API 调用中引用主题。
• isInverted：使用浅色主题时，此值应为 false；使用深色主题时，此值应为 true。此值控制 SharePoint 是使用深色主题还是浅色主题在有色背景上呈现文本。
• backgroundImageUri：可选主题背景图像的 URI（如果没有背景图像，此值可以为空）。
• palette：主题的 RGB 颜色设置，以包含下列键的嵌套 JSON 对象形式存储：
  • 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

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

下面的示例展示了定义主题的 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"
  }
}

SharePoint Framework 内置有八个主题：六个采用浅色背景，两个采用深色背景。 创建自定义主题可能会非常有用，具体方法是从一个内置主题入手，然后根据自己的需求调整此主题。

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

注意

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

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

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

下面汇总了这些内置主题，其中包括可作为自定义着手点的主题颜色 JSON 定义。

青色主题

下表列出了青色主题使用的调色板。

主题颜色	中性色
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

下面的代码演示如何在 PowerShell 中为 Teal 主题的调色板定义字典。

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

红色主题

下表列出了红色主题使用的调色板。

主题颜色	中性色
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

下面的代码展示了如何在 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'
}

橙色主题

下表列出了橙色主题使用的调色板。

主题颜色	中性色
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

下面的代码展示了如何在 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'
}

绿色主题

下表列出了绿色主题使用的调色板。

主题颜色	中性色
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

下面的代码展示了如何在 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'
}

蓝色主题

下表列出了蓝色主题使用的调色板。

主题颜色	中性色
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

下面的代码展示了如何在 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'
}

紫色主题

下表列出了紫色主题使用的调色板。

主题颜色	中性色
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

下面的代码展示了如何在 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'
}

灰色主题

下表列出了灰色主题使用的调色板。

主题颜色	中性色
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

下面的代码展示了如何在 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'
}

Periwinkle 主题

下表显示了 Periwinkle 主题使用的调色板。

主题颜色	中性色
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

以下代码演示如何在 PowerShell 中为 Periwinkle 主题的调色板定义字典。

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

深黄色主题

下表列出了深黄色主题使用的调色板。

主题颜色	中性色
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

下面的代码展示了如何在 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'
}

深蓝色主题

下表列出了深蓝色主题使用的调色板。

主题颜色	中性色
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

下面的代码展示了如何在 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'
}

另请参阅

• SharePoint 网站主题概述
• SharePoint 网站主题：PowerShell cmdlet
• SharePoint 网站主题：CSOM API
• SharePoint 网站主题：REST API