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

# Schema culorilor

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

## Card pentru schema culorilor

Reprezintă scheme de culori diferite și este special adaptat pentru teme deschise și întunecate.

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

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

  <Tab title="Proprietăți">
    | Proprietăți              | Tip                                     | Descriere                                                                        | Implicit |
    | ------------------------ | --------------------------------------- | -------------------------------------------------------------------------------- | -------- |
    | variantă                 | șir                                     | Varianta schemei de culori. Opțiuni includ `Întunecată`, `Deschisă`, și `Sistem` | luminos  |
    | selectat                 | boolean                                 | Dacă este `true`, afișează o bifă pentru a indica schema culorilor selectată     |          |
    | proprietăți suplimentare | `React.ComponentPropsWithoutRef<'div'>` | Proprietăți standard pentru elementul HTML `div`                                 |          |
  </Tab>
</Tabs>

## Selector de scheme de culori

Permite utilizatorilor să aleagă între diferite scheme de culori.

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

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

  <Tab title="Proprietăți">
    | Proprietăți | Tip                | Descriere                                                                                           |
    | ----------- | ------------------ | --------------------------------------------------------------------------------------------------- |
    | valoare     | `Schema culorilor` | Schema de culori curentă selectată                                                                  |
    | onChange    | funcție            | Funcția de callback pe care doriți să o declanșați când un utilizator selectează o schemă de culori |
  </Tab>
</Tabs>