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

# ColorSchemePicker

> Choose light, dark, or the system color scheme.

`ColorSchemePicker` is controlled through `value` and `onChange`. Supply the three labels from your application. Selecting a scheme does not persist it or change a theme provider automatically.

```tsx theme={null}
import { useState } from 'react';
import { ColorSchemePicker } from 'twenty-ui/components';
import { type ColorScheme } from 'twenty-ui/primitives/input';

export const AppearanceChoice = () => {
  const [scheme, setScheme] = useState<ColorScheme>('System');

  return (
    <ColorSchemePicker
      value={scheme}
      onChange={setScheme}
      lightLabel="Light"
      darkLabel="Dark"
      systemLabel="Use system setting"
    />
  );
};
```

`ColorScheme` values are capitalized, while [ThemeProvider](/ui/theming) expects `light` or `dark`. Map `Light` and `Dark` to their lowercase names and resolve `System` from the system preference before passing the result to the provider. The three previews are separate button controls with Enter and Space activation. Their accessible names are `Light`, `Dark`, and `System`; the label props change only the visible captions. The selected checkmark is visual.

## Props

<ParamField body="className" type="string">
  Class applied to the outer container.
</ParamField>

<ParamField body="darkLabel" type="string" required>
  Visible caption for the dark scheme. The control’s accessible name remains Dark.
</ParamField>

<ParamField body="lightLabel" type="string" required>
  Visible caption for the light scheme. The control’s accessible name remains Light.
</ParamField>

<ParamField body="onChange" type="(value: ColorScheme) => void" required>
  Called with the newly selected color scheme.
</ParamField>

<ParamField body="systemLabel" type="string" required>
  Visible caption for the system scheme. The control’s accessible name remains System.
</ParamField>

<ParamField body="value" type="&#x22;Dark&#x22; | &#x22;Light&#x22; | &#x22;System&#x22;" required>
  Selected scheme: Light, Dark, or System. The application resolves system to a concrete theme.
</ParamField>