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

# العلامة البيضاء

> تخصيص العلامة التجارية ومظهر Gorbit

تتيح العلامة البيضاء تخصيص مظهر Gorbit ليتطابق مع هوية مؤسستك.

<Note>
  العلامة البيضاء هي ميزة في نسخة المؤسسات.
</Note>

## خيارات العلامة البيضاء

<img className="rounded-image" src="https://mintcdn.com/gorbit/i9pIrvFbh53KkrjR/assets/admins/advanced_configs/whitelabeling_overview.png?fit=max&auto=format&n=i9pIrvFbh53KkrjR&q=85&s=5a4a5355ade94a8a1aa28f3d3a3401bf" alt="White Labeling Overview" width="2588" height="1952" data-path="assets/admins/advanced_configs/whitelabeling_overview.png" />

### الاسم والشعار

اضبط اسم وشعار مثيل Gorbit الخاص بك عن طريق تحديد **اسم التطبيق** ورفع **شعار مخصص**.

تغير هذه العناصر ما يظهر في الزاوية العلوية اليسرى من واجهة Gorbit بالإضافة إلى صفحة تسجيل الدخول.

### الرؤوس والنوافذ المنبثقة

في قسم **الخيارات المتقدمة**، يمكنك إضافة محتوى في الرأس بالإضافة إلى نافذة منبثقة مخصصة.

بالإضافة إلى ذلك، يمكنك تمكين شاشة موافقة ستُعرض للمستخدمين قبل أن يتمكنوا من الوصول إلى واجهة Gorbit.

<img className="rounded-image" src="https://mintcdn.com/gorbit/i9pIrvFbh53KkrjR/assets/admins/advanced_configs/whitelabeling_advanced.png?fit=max&auto=format&n=i9pIrvFbh53KkrjR&q=85&s=535a2f8b59fdcaeef7a9410c68e6eb56" alt="White Labeling Headers and Popups" width="4132" height="1400" data-path="assets/admins/advanced_configs/whitelabeling_advanced.png" />

### التذييل

أسفل مفتاح تبديل شاشة الموافقة، يمكنك إضافة محتوى لتذييل واجهة Gorbit.

<img className="rounded-image" src="https://mintcdn.com/gorbit/i9pIrvFbh53KkrjR/assets/admins/advanced_configs/whitelabeling_footer.png?fit=max&auto=format&n=i9pIrvFbh53KkrjR&q=85&s=6178caff42f2c9d0ed14df48f0f6b2b6" alt="White Labeling Footer" width="4132" height="934" data-path="assets/admins/advanced_configs/whitelabeling_footer.png" />

## سمة الألوان

يستخدم Gorbit [Tailwind CSS](https://tailwindcss.com/).

### بنية السمة

نظام الألوان مبني على ملفين رئيسيين:

* `web/tailwind-themes/tailwind.config.js`: تكوين Tailwind الأساسي وتعريفات الألوان
* `web/src/app/globals.css`: متغيرات CSS للألوان المستخدمة في تكوين Tailwind

### طرق التخصيص

<AccordionGroup>
  <Accordion title="الطريقة 1: تعديل متغير CSS مباشرة">
    <Steps>
      <Step title="انتقل إلى globals.css">
        انتقل إلى `web/src/app/globals.css`
      </Step>

      <Step title="تعديل متغيرات CSS">
        عدّل متغيرات CSS لتخصيص الألوان الأساسية (ألوان التمييز، الخلفيات، إلخ)
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="الطريقة 2: تجاوز تكوين Tailwind">
    <Steps>
      <Step title="انتقل إلى تكوين Tailwind">
        انتقل إلى `web/tailwind-themes/tailwind.config.js`
      </Step>

      <Step title="تجاوز قيم التكوين">
        تجاوز قيم محددة من التكوين الأساسي
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="الطريقة 3: سمة خاصة بالمؤسسة (موصى بها)">
    للثيمات الشاملة:

    <Steps>
      <Step title="انتقل إلى مجلد السمات">
        انتقل إلى `web/tailwind-themes/`
      </Step>

      <Step title="إنشاء مجلد المؤسسة">
        أنشئ مجلدًا جديدًا باسم مؤسستك
      </Step>

      <Step title="إنشاء تكوين Tailwind">
        أنشئ ملف `tailwind.config.js` في هذا المجلد
      </Step>

      <Step title="تجاوز التكوين الأساسي">
        تجاوز أي قيم من التكوين الأساسي
      </Step>

      <Step title="تعيين متغير البيئة">
        عيّن متغير البيئة `NEXT_PUBLIC_THEME` على اسم مجلد مؤسستك
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

### مثال على التكوين

لتغيير الخلفية إلى الأسود، أنشئ أو عدّل ملف سمتك:

```javascript theme={null}
/** @type {import('tailwindcss').Config} */

module.exports = {
  theme: {
    extend: {
      colors: {
        "background": "#000000",
      },
    },
  },
};
```

<Warning>
  تخصيصات الألوان تتطلب بناء Gorbit من المصدر. للاختبار المحلي،
  أعد تشغيل تطبيق NextJS لتطبيق التغييرات.
</Warning>