# رنگ‌ها، تم و چیدمان

ویراوان برای هر صنف پالت پیش‌فرض مستقل دارد. تنظیمات ظاهر در تمام صفحات پنل از هستهٔ مشترک استفاده می‌کند و انتخاب کاربر بر پیش‌فرض صنف اولویت دارد.

## پیش‌فرض پنل

در `config/industry.js` پنل، پالت و روشنایی را تعیین کنید:

```js
defaultPalette: 'teal',
defaultTheme: 'light',
storagePrefix: 'ariya-v1-clinic-',
```

پیش‌فرض‌ها: فروشگاه `blue`، فروشنده `indigo`، طلا `amber`، رستوران `terracotta`، کلینیک `teal`، املاک `navy`، حسابداری `emerald`، آموزشگاه `violet`، زیبایی `rose`، لجستیک `orange` و میزبانی `ocean`.

پالت‌های `burgundy`، `slate` و `legacy-green` نیز در تنظیمات ظاهر در دسترس‌اند. رنگ روشن، تاریک، متن، دکمه، منوی کناری و رنگ مکمل از همان پالت محاسبه می‌شوند. رنگ‌های موفقیت، هشدار و خطا مستقل‌اند.

## انتخاب کاربر و ذخیره‌سازی

انتخابگر رنگ و ورودی HEX مانند `#3865E8` تغییرات را فوراً اعمال می‌کنند. کد نامعتبر اعمال نمی‌شود. نسخه‌های مناسب روشن و تاریک برای حفظ کنتراست ساخته می‌شوند؛ مقدار رنگ انتخابی بدون تغییر ذخیره می‌شود.

کلید ذخیرهٔ رنگ، ترکیب `storagePrefix` هر پنل با `appearance` است:

```json
{"version":1,"paletteId":"custom","customHex":"#3865e8"}
```

برای پالت آماده، `paletteId` نام پالت و `customHex` برابر `null` است. ذخیرهٔ تنظیمات قدیمی به قالب جدید مهاجرت می‌کند؛ `blue` قدیمی که سبز نمایش داده می‌شد به `legacy-green` تبدیل می‌شود. پالت‌های قدیمی با رنگ پایهٔ قبلی حفظ می‌شوند.

کلید `theme` با همان پیشوند، انتخاب `light`، `dark` یا `system` را ذخیره می‌کند. حالت سیستم به تغییر روشنایی دستگاه واکنش نشان می‌دهد. دموهای `dark` و `horizontal-dark` در ورود اولیه عمداً تاریک باز می‌شوند.

انتخاب در یک پنل، روی پنل دیگری تأثیر ندارد. پنل فروشندگی نیز پیشوند مستقل دارد. «رنگ پیش‌فرض این صنف» فقط پالت را برمی‌گرداند؛ «بازنشانی تنظیمات» تنظیمات ظاهر همان پنل را پاک می‌کند. در صورت مسدود بودن localStorage، تنظیمات در همان صفحه قابل استفاده‌اند.

## استفاده در کد و اجزای جدید

```js
Ariya.applyAccent('navy');
Ariya.applyAccent('#4f46e5');
Ariya.applyTheme('system');
```

آرگومان دوم `false` تغییر را بدون ذخیره اعمال می‌کند. رنگ نمودارها با رویداد `ariya-theme-changed` تازه می‌شود.

در استایل اجزا از توکن‌های `--ariya-primary` برای متن، `--ariya-primary-fill` و `--ariya-on-primary` برای زمینه و متن دکمه، `--ariya-primary-fill-hover` برای هاور دکمه، `--ariya-primary-rgb` برای زمینهٔ شفاف و `--ariya-accent` برای مکمل استفاده کنید. متغیرهای متن، زمینه و آیتم فعال منوی کناری نیز با پالت هماهنگ‌اند. بازنویسی رنگ ثابت در CSS ممکن است هماهنگی انتخاب کاربر را از بین ببرد.

برای افزودن پالت، یک ورودی شامل `hex`، نام‌های `fa` و `en` و در صورت نیاز `accent` به مجموعهٔ `palettes` در `core/js/app.js` اضافه کنید. گزینهٔ تنظیمات ظاهر به‌صورت خودکار ساخته می‌شود.

رنگ‌های معرفی محصول در `assets/css/brand-colors.css` از لوگوی ویراوان گرفته می‌شوند و مستقل از انتخاب کاربر در پنل‌ها هستند.