Paleta de cores

Uma coleção de cores reutilizáveis que podem ser referenciadas em layouts.

Propriedades

default - object, opcional. Uma coleção de definições de cor hexadecimal que podem ser referenciadas usando uma referência de cor. highContrast - object, opcional. Uma coleção de definições de cor hexadecimal que podem ser referenciadas usando uma referência de cor. Substitui as definições em default quando o modo de alto contraste está habilitado.

Exemplo

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

O layout acima com o modo de alto contraste desabilitado:

Layout de toque com paleta de cores e modo de alto contraste desabilitado

E com o modo de alto contraste habilitado:

Layout de toque com paleta de cores e modo de alto contraste habilitado

Comentários

O exemplo acima inclui definições de cores que substituem as cores do sistema (por exemplo, system_contentPrimary, system_accentPrimary etc.), bem como definições de cores personalizadas (myColor1, myColor2). Os controles amostram implicitamente as cores do sistema ao aplicar estilos, o que significa que quaisquer substituições afetarão o estilo global de todos os controles (a menos que um controle tenha sua própria substituição dentro de um bloco styles personalizado). As cores personalizadas devem ser referenciadas explicitamente usando uma referência de cor (por exemplo, colors/myColor1). Além disso, as definições de cores personalizadas não podem usar o prefixo reservado system_, pois ele é reservado para cores do sistema. As definições de cores são declaradas nos objetos default e highContrast e são ativadas quando o modo de alto contraste está desabilitado ou habilitado, respectivamente. Quando o modo de alto contraste está desabilitado, as cores são amostradas de default. Quando habilitado, as cores são amostradas primeiro de highContrast, recorrendo a default se não existir nenhuma definição. Se uma substituição de cor do sistema não estiver presente em default, um padrão do sistema será usado, enquanto as cores personalizadas devem ser definidas em default. A tabela a seguir descreve como as definições de cores acima serão resolvidas, dependendo de o modo de alto contraste (HC) estar habilitado ou não:

Definição de cor	Modo HC desabilitado	Modo HC habilitado
myColor1	`#ff0000ff`	`#00ff00ff`
myColor2	`#00ff00ff`	`#00ff00ff`
system_contentPrimary	`#0000ffff`	`#0000ffff`
system_contrastPrimary	padrão do sistema	`#0000ffaa`

Cores do sistema

A tabela a seguir resume a lista de cores do sistema no touch adaptation kit, uma descrição de como elas são usadas para estilizar controles, bem como seus valores padrão do sistema quando o modo de alto contraste (HC) está desabilitado/habilitado.

Cor do sistema	Descrição	Modo HC desabilitado	Modo HC habilitado
system_contentPrimary	Cor usada para estilizar componentes como traços intermediários, tonalidades de ícones e gradientes do direcional.	`#ffffffff`	`#ffffffff`
system_contentSecondary	Cor usada para estilizar componentes como fundos e preenchimentos.	`#ffffff1a`	`#ffffffff`
system_contrastPrimary	Cor usada para estilizar componentes de contraste, como traços internos/externos e placas de fundo de imagens frontais.	`#00000000`	`#000000bf`
system_contrastSecondary	Cor usada para estilizar componentes de contraste, como traços do touchpad.	`#00000000`	`#ffffffff`
system_actionColorDefault	Cor usada para estilizar componentes em controles nos quais o campo `action` está definido como uma ação que não é de gamepad.	`#ffffffff`	`#ffffffe6`
system_actionColorA	Cor usada para estilizar componentes em controles nos quais o campo `action` está definido como `gamepadA`.	`#7eb902ff`	`#ffffffe6`
system_actionColorB	Cor usada para estilizar componentes em controles nos quais o campo `action` está definido como `gamepadB`.	`#f25127ff`	`#ffffffe6`
system_actionColorX	Cor usada para estilizar componentes em controles nos quais o campo `action` está definido como `gamepadX`.	`#00a2eeff`	`#ffffffe6`
system_actionColorY	Cor usada para estilizar componentes em controles nos quais o campo `action` está definido como `gamepadY`.	`#ffb807ff`	`#ffffffe6`
system_accentPrimary	Cor usada para estilizar componentes como a roda interna de edição ergonômica.	`#8cc08cff`	`#8cc08cff`
system_accentSecondary	Cor usada para estilizar componentes como a roda externa de edição ergonômica.	`#61ab61ff`	`#61ab61ff`

Para obter uma lista atualizada, consulte as definições prefixadas com _SystemColor no esquema mais recente.

Consulte também

Referência do Touch Adaptation Kit
Modo de alto contraste para layouts do Touch Adaptation Kit

Porting

Build Paths

Paleta de cores

Paleta de cores

Propriedades

Exemplo

Comentários

Cores do sistema

Consulte também

​Paleta de cores

​Propriedades

​Exemplo

​Comentários

​Cores do sistema

​Consulte também

Paleta de cores

Propriedades

Exemplo

Comentários

Cores do sistema

Consulte também