> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Esquema de Cores

<Frame>
  <img src="https://mintcdn.com/twenty/JIRRbviz5phT8G2L/images/user-guide/fields/field.png?fit=max&auto=format&n=JIRRbviz5phT8G2L&q=85&s=d05539b92dcec1953026ba95f2bfe07d" alt="Cabeçalho" width="1440" height="680" data-path="images/user-guide/fields/field.png" />
</Frame>

## Cartão de Esquema de Cores

Representa diferentes esquemas de cores e é especialmente adaptado para temas claros e escuros.

<Tabs>
  <Tab title="Uso">
    ```jsx theme={null}
    import { ColorSchemeCard } from "twenty-ui/display";

    export const MyComponent = () => {
      return (
          <ColorSchemeCard
          variant="Dark"
          selected={true}
          />
      );
    };
    ```
  </Tab>

  <Tab title="Propriedades">
    | Propriedades            | Tipo                                    | Descrição                                                                         | Padrão |
    | ----------------------- | --------------------------------------- | --------------------------------------------------------------------------------- | ------ |
    | variante                | string                                  | A variante do esquema de cores. As opções incluem `Escuro`, `Claro` e `Sistema`   | claro  |
    | selecionado             | booleano                                | Se `true`, exibe uma marca de seleção para indicar o esquema de cores selecionado |        |
    | propriedades adicionais | `React.ComponentPropsWithoutRef<'div'>` | Propriedades padrão do elemento HTML `div`                                        |        |
  </Tab>
</Tabs>

## Seletor de Esquema de Cores

Permite que os usuários escolham entre diferentes esquemas de cores.

<Tabs>
  <Tab title="Uso">
    ```jsx theme={null}
    import { ColorSchemePicker } from "twenty-ui/display";

    export const MyComponent = () => {
      return <ColorSchemePicker
      value="Dark"
      onChange
      />;
    };
    ```
  </Tab>

  <Tab title="Propriedades">
    | Propriedades | Tipo               | Descrição                                                                                              |
    | ------------ | ------------------ | ------------------------------------------------------------------------------------------------------ |
    | valor        | `Esquema de Cores` | O esquema de cores atualmente selecionado                                                              |
    | onChange     | função             | A função de retorno de chamada que você deseja acionar quando um usuário seleciona um esquema de cores |
  </Tab>
</Tabs>