> ## 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="属性">
    | 属性   | 类型                                      | 描述                              | 默认 |
    | ---- | --------------------------------------- | ------------------------------- | -- |
    | 变体   | 字符串                                     | 颜色方案的变体。 选项包括 `深色`, `浅色` 和 `系统` | 浅色 |
    | 已选择  | 布尔值                                     | 如果 `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>