> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# تخصيص التصميم والثيم

> خصص شكل ومظهر صفحة الدفع، المتجر، وبوابة العملاء من مكان واحد. اختر ثيمات جاهزة، ضبط الطباعة والألوان، وتطبيق تجاوزات لكل قسم، وكل ذلك مع معاينة مباشرة.

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-overview.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=89f19bfb791cb903fccb3ea7127246ba" alt="صفحة إعدادات التصميم مع معاينة فورية لعملية الدفع، بوابة العملاء، والواجهة الأمامية" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="1920" data-path="images/design/general-overview.jpg" />
</Frame>

<Info>
  تُعد صفحة التصميم المركز الرئيسي لعلامتك التجارية على كل الواجهات التي يراها العميل: صفحة الدفع، المتجر، وبوابة العملاء. يتم تطبيق التعديلات على الفور عبر الثلاثة وتُعرض في المعاينة الحية قبل الحفظ.
</Info>

## أبرز النقاط

1. **مركز تصميم موحد** - اضبط مظهر صفحة الدفع، المتجر، وبوابة العملاء من صفحة واحدة.
2. **ثيمات جاهزة** - ابدأ بثيم مُختار ثم قم بتخصيصه.
3. **الوضع الفاتح والداكن** - حدد لوحات ألوان منفصلة لكل وضع.
4. **المعاينة الحية** - شاهد كيف تبدو التعديلات عبر صفحة الدفع، بوابة العملاء، والمتجر قبل الحفظ.
5. **تجاوزات لكل قسم** - قم بضبط الأقسام الفردية (الدفع، المتجر، بوابة العملاء) دون التأثير على الباقي.
6. **التحكم البرمجي** - تجاوز الثيمات عند وقت الدفع عبر API أو Checkout SDK.

## للبدء

انتقل إلى **الإعدادات → التصميم** في لوحة التحكم الخاصة بالتاجر. تحتوي صفحة التصميم على أربعة علامات تبويب:

| التبويب           | الغرض                                                       |
| ----------------- | ----------------------------------------------------------- |
| **عام**           | اسم العمل، الشعار، اختيار الثيم، والإعدادات المتقدمة العامة |
| **الدفع**         | تجاوز إعدادات الثيم تحديدًا لصفحة الدفع                     |
| **المتجر**        | تجاوز إعدادات الثيم وضبط تخطيط المتجر                       |
| **بوابة العملاء** | تجاوز إعدادات الثيم لبوابة العملاء                          |

## الإعدادات العامة

يتحكم تبويب **عام** في هوية علامتك التجارية الأساسية والثيم العام.

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-advanced-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=00131c2a9d74d4c120bf85f588e358d8" alt="علامة التبويب العامة تعرض الإعدادات المتقدمة مع تكوين الطباعة، الألوان، والحدود" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2672" data-path="images/design/general-advanced-settings.jpg" />
</Frame>

### التهيئة الأساسية

| الإعداد        | الوصف                                                           |
| -------------- | --------------------------------------------------------------- |
| **اسم العمل**  | الاسم المعروض في صفحة الدفع، المتجر، وبوابة العملاء             |
| **شعار العمل** | شعار علامتك التجارية المعروض عبر جميع الصفحات التي يراها العميل |
| **الثيم**      | اختر ثيمًا جاهزًا كنقطة بداية                                   |

### الإعدادات المتقدمة

افتح **الإعدادات المتقدمة** للوصول إلى عناصر التحكم الدقيقة:

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-color-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=c09ecc738beb79cff0d130f46bb72b0a" alt="الإعدادات المتقدمة الموسعة التي تعرض التكوين الكامل للألوان للوضعين الفاتح والداكن" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="4192" data-path="images/design/general-color-settings.jpg" />
</Frame>

#### الطباعة

| الإعداد          | الخيارات                                | الوصف                                       |
| ---------------- | --------------------------------------- | ------------------------------------------- |
| **الخط الأساسي** | أي خط من Google Font                    | الخط الرئيسي للعناوين والنصوص               |
| **الخط الثانوي** | أي خط من Google Font                    | خط تمييزي للعناوين الفرعية والنصوص الثانوية |
| **حجم الخط**     | `xs`، `sm`، `md`، `lg`، `xl`، `2xl`     | حجم الخط الأساسي العام                      |
| **وزن الخط**     | `normal`، `medium`، `bold`، `extraBold` | وزن الخط الافتراضي                          |

#### تكوين الألوان

حدد لوحات ألوان منفصلة لـ **الوضع الفاتح** و**الوضع الداكن**. يدعم كل وضع الخصائص التالية:

| الخاصية              | الوصف                                  |
| -------------------- | -------------------------------------- |
| **الخلفية الأساسية** | لون الخلفية الرئيسي                    |
| **الخلفية الثانوية** | الخلفية الثانوية (التبويبات، البطاقات) |
| **النص الأساسي**     | لون النص الرئيسي                       |
| **النص الثانوي**     | لون النص الخافت                        |
| **زر أساسي**         | خلفية الزر الأساسي                     |
| **نص الزر الأساسي**  | لون النص في الأزرار الأساسية           |
| **زر ثانوي**         | خلفية الزر الثانوي                     |
| **نص الزر الثانوي**  | لون النص في الأزرار الثانوية           |
| **الحد الأساسي**     | لون الحد الرئيسي                       |
| **الحد الثانوي**     | لون الحد التمييزي                      |

#### الحدود

| الإعداد            | الوصف                                                                                                                          |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| **نصف قطر الحدود** | يتحكم في إنحناء الحقول، الأزرار، التبويبات، والبطاقات (مثلاً `0` للحواف الحادة، `8px` للحواف المستديرة، `16px` للشكل الكبسولي) |

## الثيمات الجاهزة

يأتي Dodo Payments بأربعة ثيمات مُختارة. اختر واحدًا من قائمة **الثيم** في تبويب العام لتطبيق تصميم متناسق على الفور عبر صفحة الدفع، المتجر، وبوابة العملاء.

### Dodo Pulses

الثيم الافتراضي، مع لمسات خضراء ليمونية تمنحه إحساسًا نشيطًا ومنعشًا. طباعة Sans-serif نظيفة مع تباعد جيّد.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Dodo Pulses in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=f081086300770146c0df373b6304ea12" alt="موضوع Dodo Pulses في الوضع الفاتح يظهر الدفع، بوابة العملاء، والواجهة الأمامية" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Dodo Pulses in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=d2fe47c69734ccb419471609095627fe" alt="موضوع Dodo Pulses في الوضع الداكن يظهر الدفع، بوابة العملاء، والواجهة الأمامية" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Terminal

ثيم موجه للمطورين مع طباعة أحادية المسافات ولمسات زرقاء ملكية. زوايا حادة ومظهر تقني يتماشى جيدًا مع أدوات المطورين ومنتجات API-first.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Terminal in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=3e3320fc9c073ed9bf3ebe7b03bf7a3f" alt="موضوع Terminal في الوضع الفاتح يظهر الدفع مع تباينات زرقاء وخط متساوي التباعد" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Terminal in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=dea087e1c0fad9cf7a66fc37cfbda8ac" alt="موضوع Terminal في الوضع الداكن يظهر الدفع مع تباينات زرقاء وخط متساوي التباعد" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bumblebee

لمسات كهرمانية وذهبية دافئة مع تصميم مستدير حديث. جريء وعالي التباين، مثالي للمنتجات الموجهة للمستهلك التي تريد أن تبدو فاخرة.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bumblebee in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-bumblebee-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=e276288fe683a831d10add3f8af4eae0" alt="موضوع Bumblebee في الوضع الفاتح يظهر الدفع مع تباينات كهرمانية" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bumblebee in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bumblebee-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a35df24ccd45a9acb717652ce5b5fd19" alt="موضوع Bumblebee في الوضع الداكن يظهر الدفع مع تباينات ذهبية" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bubblegum

لمسات وردية ومغناطيسية مرحة مع زوايا دائرية بالكامل. مظهر حديث وودود يعمل بشكل رائع لأدوات الإبداع، منتجات التصميم، والعلامات التجارية الحياتية.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bubblegum in light mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-light.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b53c9d3c6d07ef0ff44d4c613520789" alt="موضوع Bubblegum في الوضع الفاتح يظهر الدفع، بوابة العملاء، والواجهة الأمامية مع تباينات وردية" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bubblegum in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=ef4a70ff8f289715628377b0631adf25" alt="موضوع Bubblegum في الوضع الداكن يظهر الدفع، بوابة العملاء، والواجهة الأمامية مع تباينات وردية" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-dark.png" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  بعد اختيار ثيم جاهز، يمكنك الاستمرار في تخصيص الخصائص الفردية في الإعدادات المتقدمة. أي خصائص غير محددة ترجع إلى إعدادات الثيم الافتراضية.
</Tip>

## تجاوزات لكل قسم

يتضمن كل تبويب قسم (الدفع، المتجر، بوابة العملاء) مفتاح تبديل **تجاوز الثيم**. عند التفعيل، يمكنك تخصيص مظهر ذلك القسم بشكل مستقل عن الثيم العام.

### تبويب الدفع

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/checkout-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a17880492490e6abe2f6b8b9e9f4680e" alt="علامة تبويب الدفع تعرض معاينة كاملة لعملية الدفع مع تفاصيل المنتج ونموذج الدفع" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/checkout-tab.jpg" />
</Frame>

تجاوز الطباعة، الألوان، وإعدادات الحدود خصيصًا لتجربة الدفع. تعرض المعاينة الحية:

* معلومات المنتج والأسعار
* خيارات الدفع السريعة (Apple Pay، Google Pay)
* اختيار وسيلة الدفع ونموذج البطاقة
* إدخال كود الخصم وتفصيل الأسعار

### تبويب المتجر

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/storefront-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b45fc842eb771be573ae1a5744d82c5" alt="علامة تبويب الواجهة الأمامية تعرض عنوان URL الخاص بالمتجر، عناصر التحكم في العلامة التجارية، ومعاينة الواجهة الأمامية" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/storefront-tab.jpg" />
</Frame>

اضبط إعدادات خاصة بالمتجر:

| الإعداد          | الوصف                                                   |
| ---------------- | ------------------------------------------------------- |
| **عنوان المتجر** | عنوان متجرك (مثلاً `store.dodopayments.com/your-store`) |
| **اسم المتجر**   | فعّل وعيّن الاسم المعروض في المتجر                      |
| **شعار المتجر**  | فعّل ورفع شعار لرأس المتجر                              |
| **لافتة المتجر** | فعّل ورفع صورة لافتة                                    |
| **وصف المنتج**   | فعّل لعرض أو إخفاء أوصاف المنتجات على البطاقات          |
| **تجاوز الثيم**  | فعّل لتخصيص الطباعة، الألوان، والحدود للمتجر فقط        |

### تبويب بوابة العملاء

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/customer-portal-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=38c16ef9ed1648f0f5d3851d7c91f17c" alt="علامة تبويب بوابة العملاء تعرض إدارة الاشتراك، تاريخ الفواتير، ومعاينة طرق الدفع" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/customer-portal-tab.jpg" />
</Frame>

تجاوز الثيم لبوابة العملاء، التي تشمل:

* إدارة الاشتراكات
* تاريخ الفواتير
* طرق الدفع
* المحفظة والرصيد

## موارد ذات صلة

<CardGroup cols={2}>
  <Card title="Checkout Features" icon="cart-shopping" href="/features/checkout">
    ميزات صفحة الدفع بما في ذلك العملة، اللغة، الضريبة، الخصومات، والمزيد.
  </Card>

  <Card title="Overlay Checkout SDK" icon="layer-group" href="/developer-resources/overlay-checkout">
    تضمين صفحة الدفع كطبقة عائمة على صفحتك.
  </Card>

  <Card title="Inline Checkout SDK" icon="credit-card" href="/developer-resources/inline-checkout">
    تضمين صفحة الدفع مباشرة ضمن تخطيط صفحتك.
  </Card>

  <Card title="Storefront" icon="store" href="/features/storefront">
    إعداد وإدارة متجرك المخصص بعلامتك التجارية.
  </Card>

  <Card title="Customer Portal" icon="user" href="/features/customer-portal">
    بوابة الخدمة الذاتية للعملاء للاشتراكات والفوترة.
  </Card>

  <Card title="Multi-Brand Setup" icon="building-columns" href="/features/multi-brands">
    قم بتشغيل علامتين تجاريتين تحت حساب واحد مع تمييز علامة تجارية منفصلة.
  </Card>
</CardGroup>