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

# Farbschema

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

## Farbschema Karte

Repräsentiert verschiedene Farbschemata und ist speziell für helle und dunkle Themen abgestimmt.

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

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

  <Tab title="Eigenschaften">
    | Eigenschaften     | Typ                                     | Beschreibung                                                                      | Standard |
    | ----------------- | --------------------------------------- | --------------------------------------------------------------------------------- | -------- |
    | Variante          | Zeichenkette                            | Die Variante des Farbschemas. Optionen umfassen `Dunkel`, `Hell` und `System`     | hell     |
    | ausgewählt        | boolesch                                | Wenn `true`, wird ein Häkchen angezeigt, um das ausgewählte Farbschema anzuzeigen |          |
    | zusätzliche Props | `React.ComponentPropsWithoutRef<'div'>` | Standard HTML `div` Elementeigenschaften                                          |          |
  </Tab>
</Tabs>

## Farbschema-Auswahl

Ermöglicht es den Benutzern, zwischen verschiedenen Farbschemata zu wählen.

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

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

  <Tab title="Eigenschaften">
    | Eigenschaften | Typ          | Beschreibung                                                                   |
    | ------------- | ------------ | ------------------------------------------------------------------------------ |
    | wert          | `Farbschema` | Das aktuell ausgewählte Farbschema                                             |
    | onChange      | Funktion     | Die Rückruffunktion, die Sie beim Auswählen eines Farbschemas auslösen möchten |
  </Tab>
</Tabs>