Palette de couleurs

Collection de couleurs réutilisables qui peuvent être référencées dans les dispositions.

Propriétés

default - objet, facultatif. Collection de définitions de couleurs hexadécimales qui peuvent être référencées à l’aide d’une référence de couleur. highContrast - objet, facultatif. Collection de définitions de couleurs hexadécimales qui peuvent être référencées à l’aide d’une référence de couleur. Remplace les définitions de default lorsque le mode de contraste élevé est activé.

Exemple

{
  "$schema": "https://raw.githubusercontent.com/microsoft/xbox-game-streaming-tools/main/touch-adaptation-kit/schemas/layout/4.0/layout.json",
  "styles": {
    "colors": {
      "default": {
        "myColor1": "#ff0000ff",
        "myColor2": "#00ff00ff",
        "system_contentPrimary": "#0000ffff"
      },
      "highContrast": {
        "myColor1": "#00ff00ff",
        "system_contrastPrimary": "#0000ffaa"
      }
    }
  },
  "content": {
    "left": {
      "inner": [
        {
          "type": "directionalPad",
          "styles": {
            "idle": {
              "background": {
                "type": "color",
                "value": "colors/myColor1"
              }
            }
          }
        }
      ]
    },
    "right": {
      "inner": [
          {
              "type": "button",
              "action": "gamepadY"
          },
          {
              "type": "button",
              "action": "gamepadB"
          },
          {
              "type": "button",
              "action": "gamepadA",
              "styles": {
                "idle": {
                  "background": {
                    "type": "color",
                    "value": "colors/myColor2"
                  }
                }
              }
          },
          {
              "type": "button",
              "action": "gamepadX"
          }
      ]
    }
  }
}

La disposition ci-dessus avec le mode de contraste élevé désactivé :

Disposition tactile avec palette de couleurs et mode de contraste élevé désactivé

Et avec le mode de contraste élevé activé :

Disposition tactile avec palette de couleurs et mode de contraste élevé activé

Remarques

L’exemple ci-dessus comprend des définitions de couleurs qui remplacent les couleurs système (p. ex., system_contentPrimary, system_accentPrimary, etc.) ainsi que des définitions de couleurs personnalisées (myColor1, myColor2). Les contrôles échantillonnent implicitement les couleurs système lors de l’application du style, ce qui signifie que tout remplacement aura une incidence sur le style global de tous les contrôles (à moins qu’un contrôle ait son propre remplacement dans un bloc styles personnalisé). Les couleurs personnalisées doivent être référencées explicitement à l’aide d’une référence de couleur (p. ex., colors/myColor1). De plus, les définitions de couleurs personnalisées ne peuvent pas utiliser le préfixe system_, car il est réservé aux couleurs système. Les définitions de couleurs sont déclarées dans les objets default et highContrast, et sont activées lorsque le mode de contraste élevé est respectivement désactivé ou activé. Lorsque le mode de contraste élevé est désactivé, les couleurs sont échantillonnées à partir de default. Lorsqu’il est activé, les couleurs sont d’abord échantillonnées à partir de highContrast, avec un repli sur default si aucune définition n’existe. Si aucun remplacement de couleur système n’est présent dans default, une valeur système par défaut est utilisée, tandis que les couleurs personnalisées doivent être définies dans default. Le tableau suivant indique comment les définitions de couleurs ci-dessus seront résolues selon que le mode de contraste élevé (HC) est activé ou non :

Définition de couleur	Mode HC désactivé	Mode HC activé
myColor1	`#ff0000ff`	`#00ff00ff`
myColor2	`#00ff00ff`	`#00ff00ff`
system_contentPrimary	`#0000ffff`	`#0000ffff`
system_contrastPrimary	valeur système par défaut	`#0000ffaa`

Couleurs système

Le tableau suivant résume la liste des couleurs système du Touch Adaptation Kit, une description de la façon dont elles sont utilisées pour styliser les contrôles, ainsi que leurs valeurs système par défaut lorsque le mode de contraste élevé (HC) est désactivé/activé.

Couleur système	Description	Mode HC désactivé	Mode HC activé
system_contentPrimary	Couleur utilisée pour styliser des composants tels que les traits intermédiaires, les teintes d’icônes et les dégradés de la croix directionnelle.	`#ffffffff`	`#ffffffff`
system_contentSecondary	Couleur utilisée pour styliser des composants tels que les arrière-plans et les remplissages.	`#ffffff1a`	`#ffffffff`
system_contrastPrimary	Couleur utilisée pour styliser des composants de contraste tels que les traits intérieurs/extérieurs et les plaques d’arrière-plan des images de face.	`#00000000`	`#000000bf`
system_contrastSecondary	Couleur utilisée pour styliser des composants de contraste tels que les traits du pavé tactile.	`#00000000`	`#ffffffff`
system_actionColorDefault	Couleur utilisée pour styliser les composants des contrôles dont le champ `action` est défini sur une action autre qu’une action de manette.	`#ffffffff`	`#ffffffe6`
system_actionColorA	Couleur utilisée pour styliser les composants des contrôles dont le champ `action` est défini sur `gamepadA`.	`#7eb902ff`	`#ffffffe6`
system_actionColorB	Couleur utilisée pour styliser les composants des contrôles dont le champ `action` est défini sur `gamepadB`.	`#f25127ff`	`#ffffffe6`
system_actionColorX	Couleur utilisée pour styliser les composants des contrôles dont le champ `action` est défini sur `gamepadX`.	`#00a2eeff`	`#ffffffe6`
system_actionColorY	Couleur utilisée pour styliser les composants des contrôles dont le champ `action` est défini sur `gamepadY`.	`#ffb807ff`	`#ffffffe6`
system_accentPrimary	Couleur utilisée pour styliser des composants tels que la roue intérieure d’ergo-edit.	`#8cc08cff`	`#8cc08cff`
system_accentSecondary	Couleur utilisée pour styliser des composants tels que la roue extérieure d’ergo-edit.	`#61ab61ff`	`#61ab61ff`

Pour obtenir une liste à jour, consultez les définitions précédées du préfixe _SystemColor dans le schéma le plus récent.

Voir aussi

Référence du Touch Adaptation Kit
Mode de contraste élevé pour les dispositions Touch Adaptation

Introduction

Onboarding & Access

Setup & Install

Build Your First Title

Palette de couleurs

Palette de couleurs

Propriétés

Exemple

Remarques

Couleurs système

Voir aussi

​Palette de couleurs

​Propriétés

​Exemple

​Remarques

​Couleurs système

​Voir aussi

Palette de couleurs

Propriétés

Exemple

Remarques

Couleurs système

Voir aussi