> ## 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="プロパティ">
    | プロパティ    | タイプ                                     | 説明                                                  | デフォルト |
    | -------- | --------------------------------------- | --------------------------------------------------- | ----- |
    | バリアント    | string                                  | 配色のバリエーション。 オプションには `ダーク`、`ライト`、および `システム` が含まれています | ライト   |
    | 選択済み     | ブール型                                    | `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>