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

# Schéma de couleurs

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

## Carte de schéma de couleurs

Représente différents schémas de couleurs et est spécialement adapté aux thèmes clairs et sombres.

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

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

  <Tab title="Propriétés">
    | Propriétés                 | Type                                    | Description                                                                             | Par défaut |
    | -------------------------- | --------------------------------------- | --------------------------------------------------------------------------------------- | ---------- |
    | variante                   | chaîne                                  | La variante du schéma de couleurs. Les options incluent `Sombre`, `Clair` et `Système`. | clair      |
    | sélectionné                | booléen                                 | Si `vrai`, affiche une coche pour indiquer le schéma de couleurs sélectionné.           |            |
    | propriétés supplémentaires | `React.ComponentPropsWithoutRef<'div'>` | Propriétés standard de l'élément HTML `div`.                                            |            |
  </Tab>
</Tabs>

## Sélecteur de schéma de couleurs

Permet aux utilisateurs de choisir entre différents schémas de couleurs.

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

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

  <Tab title="Propriétés">
    | Propriétés | Type                 | Description                                                                                                  |
    | ---------- | -------------------- | ------------------------------------------------------------------------------------------------------------ |
    | valeur     | `Schéma de couleurs` | Le schéma de couleurs actuellement sélectionné.                                                              |
    | onChange   | fonction             | La fonction de rappel que vous souhaitez déclencher lorsqu'un utilisateur sélectionne un schéma de couleurs. |
  </Tab>
</Tabs>