Thèmes de site SharePoint : schéma JSON

Comprendre la structure du magasin de thèmes de site

Les fonctionnalités de thème de site SharePoint utilisent un schéma JSON pour stocker les paramètres de couleur et d’autres informations sur chaque thème. Les paramètres de thème sont stockés dans un objet JSON qui contient les clés suivantes. Seul le nouveau format de thème prend en charge les champs secondaryColor et displayMode :

isInverted : cette valeur doit être false pour les thèmes clairs et true pour les thèmes foncés. Elle détermine si SharePoint doit utiliser des couleurs de thème foncées ou claires pour le rendu du texte sur les arrière-plans colorés.
backgroundImageUril : URI d’une image d’arrière-plan facultative pour le thème (cette valeur est vide si aucune image d’arrière-plan n’est présente).
palette : objet JSON imbriqué qui stocke les valeurs de couleur RVB du thème. Lorsque vous utilisez le nouveau format de thème, les valeurs de themePrimary et backgroundColor sont utilisées comme première paire de couleurs dans la palette. L’objet palette comprend les clés suivantes :
- 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

Remarque

backgroundColor est disponible uniquement dans le nouveau format de thème.

Les couleurs spécifiées de l’élément palette apparaissent sous la forme de valeurs de chaîne RVB hexadécimale à 6 ou 3 chiffres.

Une autre option consiste à utiliser l’outil Générateur de thèmes pour créer une palette de thèmes personnalisée. Il vous fournit une interface utilisateur interactive pour sélectionner les couleurs du thème. Il génère aussi automatiquement les définitions JSON, SASS et PowerShell pour votre thème personnalisé :

Remarque

Les définitions du générateur de thème n’incluent pas actuellement les emplacements de couleur et les paires clé/valeur suivants :

« primaryBackground »
« primaryText »
« bodyBackground »
« bodyText »
« disabledBackground »
« disabledText »
« erreur »
« accent »
« backgroundColor »

Celles-ci peuvent être ajoutées manuellement à la définition générée avant d’être chargées sur le client.

Outil Générateur de thème

secondaryColors : section facultative disponible uniquement dans le nouveau format de thème du schéma de thème de site SharePoint. Il définit des paires de couleurs d’accentuation et d’arrière-plan supplémentaires qui complètent la palette de thèmes principale. La première paire de couleurs provient de la palette. Actuellement, seul le thème en mode clair est pris en charge.

Voici un exemple de secondaryColors, il s’agit de l’ensemble de la combinaison de themePrimary et backgroundColor. Les couleurs spécifiées de l’élément secondaryColors apparaissent sous la forme de valeurs de chaîne RVB hexadécimale à 6 ou 3 chiffres.

  "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 : mode visuel auquel correspond la palette de thèmes. Actuellement, seul le light mode est pris en charge.
themeSchemaVersion : version du schéma de thème. Utilisez 2.0.0 pour le dernier format de thème. Utilisez pour le 1.0.0 format de thème hérité.
version : version du thème. Utilisez 2.0.0 pour le dernier format de thème. Utilisez pour le 1.0.0 format de thème hérité.

Voici un exemple d’objet JSON qui définit un thème dans un nouveau format de thème pour le thème 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"
}

Voici un exemple d’objet JSON qui définit un thème au format de thème hérité.

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

Ajouter ou mettre à jour un thème

Pour créer ou mettre à jour un thème, utilisez un format JSON simplifié plutôt que le schéma complet du magasin de thèmes.

SharePoint Framework fournit dix thèmes intégrés : huit pour les arrière-plans clairs et deux pour les arrière-plans sombres. Pour générer un thème personnalisé, commencez par sélectionner l’un de ces thèmes intégrés et ajustez les valeurs en fonction des besoins. Utilisez ensuite l’applet de commande PowerShell Add-SPOTheme pour créer ou mettre à jour votre thème personnalisé à l’aide de ce format simplifié.

Thème bleu-vert

Utilisez la table de hachage PowerShell suivante pour définir les paires de couleurs pour le thème 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" }
  )
}

Thème Bleu

Utilisez la table de hachage PowerShell suivante pour définir les paires de couleurs pour le thème Bleu.

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

Thème Orange

Utilisez la table de hachage PowerShell suivante pour définir les paires de couleurs pour le thème Orange.


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

Thème Rouge

Utilisez la table de hachage PowerShell suivante pour définir les paires de couleurs pour le thème Rouge.

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

Thème Violet

Utilisez la table de hachage PowerShell suivante pour définir les paires de couleurs pour le thème Violet.

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

Thème Vert

Utilisez la table de hachage PowerShell suivante pour définir les paires de couleurs pour le thème Vert.

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

Thème Periwinkle

Utilisez la table de hachage PowerShell suivante pour définir les paires de couleurs pour le thème 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" }
  )
}

Thème Cobalt

Utilisez la table de hachage PowerShell suivante pour définir les paires de couleurs pour le thème 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" }
  )
}

Thème de la sarcelle foncée

Utilisez la table de hachage PowerShell suivante pour définir les paires de couleurs pour le thème Teal foncé.

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

Thème Bleu foncé

Utilisez la table de hachage PowerShell suivante pour définir les paires de couleurs pour le thème Bleu foncé.

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

Voir aussi

Last updated on 2026-03-21