> ## 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="프로퍼티">
    | 프로퍼티  | 유형                                      | 설명                                                  | 기본값 |
    | ----- | --------------------------------------- | --------------------------------------------------- | --- |
    | 변형    | 문자열                                     | 색상 구성표 변형. 옵션에는 `Dark`, `Light`, 및 `System`이 포함됩니다. | 라이트 |
    | 선택됨   | 부울                                      | `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>