Palette de couleurs

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

Propriétés

default - objet, facultatif. Une 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. Une 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 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 Contraste élevé désactivé :

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

Et avec le mode Contraste élevé activé :

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

Remarques

L’exemple ci-dessus inclut des définitions de couleurs qui remplacent les couleurs système (par exemple, system_contentPrimary, system_accentPrimary, etc.) ainsi que des définitions de couleurs personnalisées (myColor1, myColor2). Les contrôles utilisent implicitement les couleurs système lors de l’application du style, ce qui signifie que tout remplacement affecte le style global de tous les contrôles (sauf si un contrôle possède 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 (par exemple, colors/myColor1). En outre, les définitions de couleurs personnalisées ne peuvent pas utiliser le préfixe réservé 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 respectivement lorsque le mode Contraste élevé est désactivé ou activé. Lorsque le mode Contraste élevé est désactivé, les couleurs sont prises dans default. Lorsqu’il est activé, les couleurs sont d’abord prises dans highContrast, avec un repli sur default si aucune définition n’existe. Si un remplacement de couleur système n’est pas 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 sont résolues selon que le mode 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écapitule 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 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 médians, 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 de fond 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 de l’édition ergonomique.	`#8cc08cff`	`#8cc08cff`
system_accentSecondary	Couleur utilisée pour styliser des composants tels que la roue extérieure de l’édition ergonomique.	`#61ab61ff`	`#61ab61ff`

Pour obtenir une liste à jour, reportez-vous aux définitions préfixées par _SystemColor dans le schéma le plus récent.

Voir aussi

Référence du Touch Adaptation Kit
Mode 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