Настройка темы сайта SharePoint: схема JSON

Общие сведения о структуре хранилища тем сайта

Функции темы сайта SharePoint используют схему JSON для хранения параметров цвета и других сведений о каждой теме. Параметры темы хранятся в объекте JSON, который содержит следующие ключи. Только новый формат темы поддерживает поля secondaryColor и displayMode:

  • isInverted: этот параметр должен иметь значение False для светлых и True для темных тем. Он указывает, какие цвета темы (темные или светлые) должен использовать SharePoint для отображения текста на цветном фоне.
  • backgroundImageUri: универсальный код ресурса (URI) необязательного фонового рисунка для темы (если фоновый рисунок не используется, значение этого параметра может быть пустым).
  • palette: вложенный объект JSON, в котором хранятся значения цвета RGB для темы. При использовании нового формата темы значения themePrimary и backgroundColor используются в качестве первой цветовой пары в палитре. Объект палитры включает следующие ключи:
    • 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 указаны в виде шести- или трехзначных шестнадцатеричных строковых значений RGB.

Другой вариант — использовать средство "Генератор тем" для создания настраиваемой палитры тем. Он имеет интерактивный пользовательский интерфейс для выбора цветов темы и автоматически создает определения JSON, SASS и PowerShell для вашей темы.

Примечание.

Определения генератора тем в настоящее время не включают следующие цветовые слоты и пары "ключ-значение":

  • primaryBackground
  • primaryText
  • bodyBackground
  • bodyText
  • "disabledBackground"
  • "disabledText"
  • "error"
  • "акцент"
  • "backgroundColor"

Их можно добавить в созданное определение вручную перед отправкой в клиент.

Средство создания тем

  • secondaryColors: необязательный раздел, доступный только в новом формате темы схемы темы сайта SharePoint. Он определяет дополнительные пары цвета акцента и фона, которые дополняют основную палитру темы. Первая цветовая пара поступает из палитры. В настоящее время поддерживается только тема светлого режима.

Ниже приведен пример secondaryColors, это набор сочетания themePrimary и backgroundColor. Цвета в элементе secondaryColors указаны в виде шести- или трехзначных шестнадцатеричных строковых значений RGB.

  "secondaryColors": {
    "light": [
      { "themePrimary": "#FFFFFF", "backgroundColor": "#007780" },
      { "themePrimary": "#E3FFFD", "backgroundColor": "#007780" },
      { "themePrimary": "#007780", "backgroundColor": "#E3FFFD" },
      { "themePrimary": "#FFF9E3", "backgroundColor": "#007780" },
      { "themePrimary": "#007780", "backgroundColor": "#FFF9E3" },
      { "themePrimary": "#007780", "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 для устаревшего формата темы.
  • version: версия темы. Используйте 2.0.0 для последнего формата темы. Используйте 1.0.0 для устаревшего формата темы.

Ниже приведен пример объекта JSON, который определяет тему в новом формате темы для темы Teal.

{
  "isInverted": true,
  "palette": {    
    "themeDarker": "#003a3d",
    "themeDark": "#00585e",
    "themeDarkAlt": "#00676e",
    "themePrimary": "#007780",
    "themeSecondary": "#078b94",
    "themeTertiary": "#45c3cc",
    "themeLight": "#8ae7ed",
    "themeLighter": "#b0f8ff",
    "themeLighterAlt": "#d4fbff",
    "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": "#007780" },
      { "themePrimary": "#E3FFFD", "backgroundColor": "#007780" },
      { "themePrimary": "#007780", "backgroundColor": "#E3FFFD" },
      { "themePrimary": "#FFF9E3", "backgroundColor": "#007780" },
      { "themePrimary": "#007780", "backgroundColor": "#FFF9E3" },
      { "themePrimary": "#007780", "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": "#003a3d",
    "themeDark": "#00585e",
    "themeDarkAlt": "#00676e",
    "themePrimary": "#007780",
    "themeSecondary": "#078b94",
    "themeTertiary": "#45c3cc",
    "themeLight": "#8ae7ed",
    "themeLighter": "#b0f8ff",
    "themeLighterAlt": "#d4fbff",
    "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 Framework предоставляет десять встроенных тем: восемь для светлого фона и две для темных фонов. Чтобы создать пользовательскую тему, начните с выбора одной из этих встроенных тем и настройки значений по мере необходимости. Затем используйте командлет PowerShell Add-SPOTheme , чтобы создать или обновить настраиваемую тему с помощью этого упрощенного формата.

Сине-зеленая тема

Используйте следующую хэш-информацию PowerShell, чтобы определить цветовые пары для темы Teal.

$colorPairs = @{
  light = @(
    @{ "accentColor" = "#007780"; "backgroundColor" = "#FFFFFF" }
    @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#007780" }
    @{ "accentColor" = "#E3FFFD"; "backgroundColor" = "#007780" }
    @{ "accentColor" = "#007780"; "backgroundColor" = "#E3FFFD" }
    @{ "accentColor" = "#FFF9E3"; "backgroundColor" = "#007780" }
    @{ "accentColor" = "#007780"; "backgroundColor" = "#FFF9E3" }
    @{ "accentColor" = "#007780"; "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, чтобы определить пары цветов для темы Purple.

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

Тема перивинка

Используйте следующую хэш-информацию 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, чтобы определить пары цветов для темы Dark Teal.

$colorPairs = @{
  light = @(
    @{ "accentColor" = "#51AEB2"; "backgroundColor" = "#292929" }
    @{ "accentColor" = "#FFFFFF"; "backgroundColor" = "#007780" }
    @{ "accentColor" = "#E3FFFD"; "backgroundColor" = "#007780" }
    @{ "accentColor" = "#007780"; "backgroundColor" = "#E3FFFD" }
    @{ "accentColor" = "#FFF9E3"; "backgroundColor" = "#007780" }
    @{ "accentColor" = "#007780"; "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