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

# Barevné schéma

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

## Karta barevného schématu

Zobrazuje různá barevná schémata a je speciálně přizpůsobená pro světlé a tmavé motivy.

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

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

  <Tab title="Vlastnosti">
    | Vlastnosti       | Typ                                     | Popis                                                                          | Výchozí |
    | ---------------- | --------------------------------------- | ------------------------------------------------------------------------------ | ------- |
    | varianta         | řetězec                                 | Varianta barevného schématu. Možnosti zahrnují `Tmavý`, `Světlý` a `Systémový` | světlý  |
    | vybráno          | booleovská hodnota                      | Pokud 'true' zobrazí zaškrtnutí pro označení vybraného barevného schématu      |         |
    | další vlastnosti | `React.ComponentPropsWithoutRef<'div'>` | Standardní vlastnosti HTML `div` elementu                                      |         |
  </Tab>
</Tabs>

## Výběr barevného schématu

Umožňuje uživatelům vybrat různá barevná schémata.

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

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

  <Tab title="Vlastnosti">
    | Vlastnosti | Typ              | Popis                                                                                  |
    | ---------- | ---------------- | -------------------------------------------------------------------------------------- |
    | hodnota    | `Barevné schéma` | Aktuálně vybrané barevné schéma                                                        |
    | onChange   | funkce           | Funkce zpětného volání, kterou chcete spustit při výběru barevného schématu uživatelem |
  </Tab>
</Tabs>