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

# Color Scheme

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

## Color Scheme Card

Represents different color schemes and is specially tailored for light and dark themes.

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

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

  <Tab title="Props">
    | Props            | Type                                    | Description                                                             | Default |
    | ---------------- | --------------------------------------- | ----------------------------------------------------------------------- | ------- |
    | variant          | string                                  | The color scheme variant. Options include `Dark`, `Light`, and `System` | light   |
    | selected         | boolean                                 | If `true`, displays a checkmark to indicate the selected color scheme   |         |
    | additional props | `React.ComponentPropsWithoutRef<'div'>` | Standard HTML `div` element props                                       |         |
  </Tab>
</Tabs>

## Color Scheme Picker

Allows users to choose between different color schemes.

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

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

  <Tab title="Props">
    | Props    | Type           | Description                                                                  |
    | -------- | -------------- | ---------------------------------------------------------------------------- |
    | value    | `Color Scheme` | The currently selected color scheme                                          |
    | onChange | function       | The callback function you want to trigger when a user selects a color scheme |
  </Tab>
</Tabs>