> ## 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 colores

<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="Encabezado" width="1440" height="680" data-path="images/user-guide/fields/field.png" />
</Frame>

## Tarjeta de Esquema de Color

Representa diferentes esquemas de color y está diseñado especialmente para temas claros y oscuros.

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

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

  <Tab title="&#x22;Props&#x22;">
    | "Props"           | Tipo                                    | Descripción                                                                                        | Predeterminado |
    | ----------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------- | -------------- |
    | variante          | string                                  | La variante del esquema de color. Las opciones incluyen `Oscuro`, `Claro` y `Sistema`              | claro          |
    | seleccionado      | booleano                                | Si es `verdadero`, muestra una marca de verificación para indicar el esquema de color seleccionado |                |
    | props adicionales | `React.ComponentPropsWithoutRef<'div'>` | Props del elemento HTML estándar `div`                                                             |                |
  </Tab>
</Tabs>

## Selector de Esquema de Color

Permite a los usuarios elegir entre diferentes esquemas de color.

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

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

  <Tab title="&#x22;Props&#x22;">
    | "Props"    | Tipo                 | Descripción                                                                                            |
    | ---------- | -------------------- | ------------------------------------------------------------------------------------------------------ |
    | valor      | `Esquema de colores` | El esquema de color actualmente seleccionado                                                           |
    | "onChange" | función              | La función de devolución de llamada que desea activar cuando un usuario selecciona un esquema de color |
  </Tab>
</Tabs>