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

# Renk Şeması

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

## Renk Şeması Kartı

Farklı renk şemalarını temsil eder ve açık ve koyu temalar için özel olarak tasarlanmıştır.

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

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

  <Tab title="Özellikler">
    | Özellikler    | Tür                                     | Açıklama                                                                            | Varsayılan |
    | ------------- | --------------------------------------- | ----------------------------------------------------------------------------------- | ---------- |
    | variant       | string                                  | Renk şeması varyantı. Seçenekler arasında `Koyu`, `Açık` ve `Sistem` bulunmaktadır. | aydınlık   |
    | seçili        | boolean                                 | Eğer `true` ise, seçilen renk şemasını belirtmek için bir onay işareti görüntüler.  |            |
    | ek özellikler | `React.ComponentPropsWithoutRef<'div'>` | Standart HTML `div` öğe özellikleri                                                 |            |
  </Tab>
</Tabs>

## Renk Şeması Seçici

Kullanıcıların farklı renk şemaları arasında seçim yapmasına olanak tanır.

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

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

  <Tab title="Özellikler">
    | Özellikler | Tür           | Açıklama                                                                            |
    | ---------- | ------------- | ----------------------------------------------------------------------------------- |
    | değer      | `Renk Şeması` | Şu anda seçili olan renk şeması                                                     |
    | onChange   | fonksiyon     | Bir kullanıcı bir renk şeması seçtiğinde tetiklemek istediğiniz geri çağırma işlevi |
  </Tab>
</Tabs>