> ## 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="خصائص">
    | خصائص        | النوع                                   | الوصف                                                                  | الإعداد الافتراضي |
    | ------------ | --------------------------------------- | ---------------------------------------------------------------------- | ----------------- |
    | التنوع       | string                                  | نوع مخطط الألوان. تشمل الخيارات `داكنة`, `فاتحة`, و `النظام`           | فاتح              |
    | المحدد       | قيمة منطقية                             | إذا كان `صحيح`, يتم عرض علامة الاختيار للدلالة على مخطط الألوان المحدد |                   |
    | خصائص إضافية | `React.ComponentPropsWithoutRef<'div'>` | خصائص عنصر `div` العادي في HTML                                        |                   |
  </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="خصائص">
    | خصائص       | النوع               | الوصف                                                         |
    | ----------- | ------------------- | ------------------------------------------------------------- |
    | القيمة      | `طريقة عرض الألوان` | مخطط الألوان المحدد حاليًا                                    |
    | عند التغيير | function            | الدالة التي ترغب في تفعيلها عندما يختار المستخدم نظام الألوان |
  </Tab>
</Tabs>