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

# Цветовая Схема

<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="Заголовок" width="1440" height="680" data-path="images/user-guide/fields/field.png" />
</Frame>

## Карточка цветовой схемы

Представляет различные цветовые схемы и специально подходит для светлых и темных тем.

<Tabs>
  <Tab title="Использование">
    ```jsx theme={null}
    import { ColorSchemeCard } from "twenty-ui/display";

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

  <Tab title="Свойства">
    | Свойства                | Тип                                     | Описание                                                                     | По умолчанию |
    | ----------------------- | --------------------------------------- | ---------------------------------------------------------------------------- | ------------ |
    | вариант                 | строка                                  | Вариант цветовой схемы. Варианты включают `Тёмный`, `Светлый`, и `Системный` | светлый      |
    | выбран                  | boolean                                 | Если `true`, отображает галочку, чтобы указать выбранную цветовую схему      |              |
    | дополнительные свойства | `React.ComponentPropsWithoutRef<'div'>` | Стандартные свойства HTML-элемента `div`                                     |              |
  </Tab>
</Tabs>

## Выбор цветовой схемы

Позволяет пользователям выбирать между различными цветовыми схемами.

<Tabs>
  <Tab title="Использование">
    ```jsx theme={null}
    import { ColorSchemePicker } from "twenty-ui/display";

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

  <Tab title="Свойства">
    | Свойства | Тип              | Описание                                                                                        |
    | -------- | ---------------- | ----------------------------------------------------------------------------------------------- |
    | значение | `Цветовая Схема` | Текущая выбранная цветовая схема                                                                |
    | onChange | функция          | Функция обратного вызова, которую вы хотите вызвать, когда пользователь выбирает цветовую схему |
  </Tab>
</Tabs>