---
title: Color Scheme
sidebar_position: 2
sidebar_custom_props:
  icon: TbColorFilter
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import colorSchemeCardCode from '!!raw-loader!@site/src/ui/input/color-scheme/colorSchemeCardCode.js'
import colorSchemePickerCode from '!!raw-loader!@site/src/ui/input/color-scheme/colorSchemePickerCode.js'

import { SandpackEditor} from '@site/src/ui/SandpackEditor'

## Color Scheme Card

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

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/color-scheme/components/ColorSchemeCard']}
  componentCode={colorSchemeCardCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>variant</td>
      <td>string</td>
      <td>The color scheme variant. Options include `Dark`, `Light`, and `System`</td>
      <td>light</td>
    </tr>

    <tr>
      <td>selected</td>
      <td>boolean</td>
      <td>If `true`, displays a checkmark to indicate the selected color scheme</td>
    </tr>

    <tr>
      <td>additional props</td>
      <td>`React.ComponentPropsWithoutRef<'div'>`</td>
      <td>Standard HTML `div` element props</td>
    </tr>

  </tbody>
</table>

</TabItem>

</Tabs>

## Color Scheme Picker 

Allows users to choose between different color schemes.

<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/color-scheme/components/ColorSchemePicker']}
  componentCode={colorSchemePickerCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>value</td>
      <td>`Color Scheme`</td>
      <td>The currently selected color scheme</td>
    </tr>

    <tr>
      <td>onChange</td>
      <td>function</td>
      <td>The callback function you want to trigger when a user selects a color scheme</td>
    </tr>

  </tbody>
</table>

</TabItem>

</Tabs>