سیستم تم و رنگها
سیستم تم اپادیتور کمک میکند رنگهای رابط کاربری را یکبار و بر اساس نقش هر رنگ تعریف کنید و همان طراحی را در حالت روشن و تاریک تحویل بگیرید. بهجای انتخاب دستی یک رنگ برای تکتک ویجتها، مشخص میکنید هر بخش «پسزمینه صفحه»، «سطح کارت»، «متن اصلی»، «رنگ برند» یا نقش دیگری دارد؛ اپادیتور رنگ درست آن نقش را از تم فعال انتخاب میکند.
برای رنگهای رابط کاربری از رنگ تم استفاده کنید. رنگ ثابت را برای لوگو، تصویر یا رنگی نگه دارید که عمداً نباید با تم روشن و تاریک تغییر کند.
سیستم تم چگونه کار میکند؟
مسیر کلی انتخاب و نمایش رنگ این است:
رنگ برند + شدت حضور برند
↓
پالت روشن و تاریک
↓
نقشهای معنایی مثل سطح، متن، حاشیه و دکمه
↓
رنگ نهایی ویجت در تم فعال
تنظیمات اصلی این سیستم در تنظیمات پروژه ← ظاهر قرار دارد.
| تنظیم | کاربرد |
|---|---|
| تم پیشفرض اپ | تعیین میکند اپ در اولین اجرا روشن یا تاریک باز شود |
| پالت آماده | رنگ برند و شدت مناسب آن را با یک انتخاب تنظیم میکند |
| رنگ برند اپ | رنگ اصلی هویت اپ و مبنای ساخت پالت روشن و تاریک است |
| حضور رنگ برند در زمینهها | میزان تهرنگ برند در صفحه، کارت، پنجره، ورودی و جداکننده را تعیین میکند |
| رنگهای سفارشی تم | برای نقشهای اختصاصی، یک رنگ روشن و یک رنگ تاریک تعریف میکند |
| دکمه تم در پیشنمایش | فقط حالت نمایش شبیهساز را برای آزمایش عوض میکند |
راهاندازی سریع یک تم
برای شروع، این ترتیب مطمئن و ساده را انجام دهید:
- تنظیمات پروژه را باز کنید و به بخش ظاهر بروید.
- در تم پیشفرض اپ یکی از حالتهای روشن یا تاریک را انتخاب کنید.
- از پالت آماده یک گزینه نزدیک به هویت بصری اپ انتخاب کنید؛ یا رنگ برند را دستی تعیین کنید.
- مقدار حضور رنگ برند در زمینهها را انتخاب کنید. حالت ملایم برای بیشتر اپها مناسب است.
- تنظیمات پروژه را ذخیره کنید.
- در تنظیمات رنگ ویجتها، نوع مقدار را روی رنگ تم بگذارید و نقش مناسب را انتخاب کنید.
- با دکمه روشن/تاریک شبیهساز، صفحههای مهم را در هر دو حالت بررسی کنید.
اگر قبلاً همه رنگها را ثابت انتخاب کردهاید، تغییر رنگ برند بهتنهایی آن ویجتها را تغییر نمیدهد. رنگ هر ویجت را به نقش مناسب از رنگ تم تبدیل کنید.
انتخاب پالت آماده
پالت آماده سریعترین راه برای ساخت یک ظاهر هماهنگ است. هر گزینه سه نمونهرنگ نشان میدهد: رنگ برند، نمونه تم روشن و نمونه تم تاریک.
پالتهای موجود عبارتاند از:
| خانواده | پالتها |
|---|---|
| آبی و سرمهای | آبی حرفهای، سرمهای رسمی، آبی آسمانی، آبی فیروزهای، آبی خاکستری |
| سبز و فیروزهای | سبز طبیعی، فیروزهای آرام، سبز زمردی، زیتونی طبیعی |
| گرم و پرانرژی | نارنجی گرم، قرمز جسور، طلایی گرم، مرجانی پرانرژی، صورتی پویا |
| بنفش و خنثی | بنفش مدرن، یاسی لطیف، خاکستری مینیمال، گرافیتی تیره |
| کلاسیک | قهوهای کلاسیک، تیره لوکس |
انتخاب یک پالت آماده فقط این دو مقدار را تنظیم میکند:
- رنگ برند اپ
- حضور رنگ برند در زمینهها
رنگهای سفارشی تم حذف یا بازنویسی نمیشوند. همچنین میتوانید پس از انتخاب پالت، رنگ برند یا شدت حضور آن را دستی تغییر دهید؛ در این حالت تنظیمات شما دیگر دقیقاً معادل پالت آماده قبلی نیست.
رنگ برند و پالت تولیدشده
رنگ برند اپ رنگ اصلی هویت محصول است. این رنگ بهطور مستقیم برای بخشهای اصلی مانند دکمه اصلی و نوار بالای صفحه استفاده میشود و اپادیتور بر اساس آن یک پالت هماهنگ برای هر دو حالت روشن و تاریک میسازد.
با انتخاب رنگ برند، موارد زیر بهصورت هماهنگ آماده میشوند:
- رنگ اصلی و رنگ خوانای متن روی آن
- رنگ مکمل
- پسزمینه صفحه، کارتها، پنجرهها و ورودیها
- حاشیهها و جداکنندهها
- رنگهای موردنیاز اجزای استاندارد مانند دکمه، منو، تب، فیلد و پنجره
رنگ موفقیت و خطا معنای ثابت خود را حفظ میکنند تا برای مثال در یک برند قرمز، پیام خطا با رنگ برند اشتباه نشود.
اگر رنگ برند انتخاب نشود
اپ از پالت پیشفرض اپادیتور استفاده میکند. بنابراین رنگ برند اجباری نیست و اپهای قبلی نیز بدون انتخاب آن ظاهر پیشفرض خود را حفظ میکنند.
متن روی رنگ برند
اپادیتور با توجه به روشنایی رنگ برند، برای نقش متن روی رنگ اصلی رنگ سفید یا مشکی را انتخاب میکند تا نوشته و آیکن روی دکمه یا نوار اصلی خوانا بمانند. برای متن روی دکمه اصلی، خود «رنگ اصلی» را انتخاب نکنید؛ از متن روی رنگ اصلی استفاده کنید.
حضور رنگ برند در زمینهها
این گزینه تعیین میکند چه مقدار از رنگ برند وارد سطوح خنثی رابط کاربری شود.
| حالت | نتیجه | مناسب برای |
|---|---|---|
| خنثی | زمینهها بدون تهرنگ برند میمانند | اپهای رسمی، محتوایی یا مینیمال |
| ملایم | تهرنگ بسیار ظریف برند به زمینهها افزوده میشود | انتخاب پیشنهادی برای بیشتر اپها |
| پررنگ | رنگ برند در زمینهها حضور واضحتری دارد | طراحیهای تبلیغاتی و پرانرژی |
این تنظیم روی پسزمینه صفحه، کارتها، سطح فرعی، پنجرهها، ورودیها، حاشیهها و جداکنندهها اثر میگذارد. متن اصلی، موفقیت و خطا همچنان خوانا و مستقل میمانند.
انواع مقدار در انتخابگر رنگ
با کلیک روی یک فیلد رنگ، گزینههای در دسترس آن ویژگی نمایش داده میشوند. همه فیلدها الزاماً تمام حالتهای زیر را ندارند.
| نوع مقدار | رفتار | کاربرد پیشنهادی |
|---|---|---|
| رنگ ثابت | در روشن و تاریک یکسان میماند | لوگو، رنگ محتوایی یا رنگی که نباید تغییر کند |
| رنگ تم | از پالت روشن یا تاریک و نقش انتخابشده خوانده میشود | تقریباً همه رنگهای رابط کاربری |
| متغیر رنگ | مقدار یک متغیر را در زمان اجرا میخواند و در نبود مقدار، از رنگ جایگزین استفاده میکند | رنگ وابسته به وضعیت، داده یا رویداد |
| خودکار، هماهنگ با تم | انتخاب رنگ را به ظاهر استاندارد همان جزء و تم فعال میسپارد | ویژگیهایی که حالت خودکار دارند |
| بدون رنگ | رنگ را حذف یا شفاف میکند | فقط فیلدهایی که اجازه «بدون رنگ» میدهند |
خودکار با بدون رنگ یکسان نیست. خودکار یعنی جزء از تم فعال رنگ میگیرد؛ بدون رنگ یعنی آن ویژگی رنگی اعمال نمیکند. در هر فیلد فقط گزینههایی نمایش داده میشوند که همان ویژگی پشتیبانی میکند. برای مثال رنگ برند اپ فقط رنگ ثابت یا حالت پیشفرض را میپذیرد و نمیتواند رنگ تم یا متغیر باشد.
چه زمانی از متغیر رنگ استفاده کنم؟
متغیر رنگ برای تغییر رنگ بر اساس داده و وضعیت است؛ برای مثال:
- سبز شدن وضعیت سفارش پس از پرداخت
- قرمز شدن پیام در صورت خطا
- تغییر رنگ نشانگر با داده دریافتشده از سرور
اگر تنها هدف شما هماهنگی با تم روشن و تاریک است، رنگ تم انتخاب درستتری است و نیازی به متغیر ندارید.
رنگهای آماده تم
در حالت رنگ تم، دو نمونه کوچک کنار هر گزینه رنگ آن را در تم روشن و تاریک نشان میدهند. نقشها و کاربرد آنها عبارتاند از:
| نقش | کاربرد درست |
|---|---|
| رنگ اصلی | دکمه اصلی، نوار بالای صفحه و بخش انتخابشده |
| متن روی رنگ اصلی | متن یا آیکن روی رنگ اصلی |
| رنگ مکمل | تأکید ثانویه، کنترل یا بخش فعالی که نباید با دکمه اصلی رقابت کند |
| متن روی رنگ مکمل | متن یا آیکن روی رنگ مکمل |
| پسزمینه صفحه | زمینه اصلی صفحه |
| سطح / کارت | کارت، گروه و پنل روی زمینه صفحه |
| متن اصلی | عنوان، متن و آیکن اصلی روی سطح |
| سطح فرعی | بخش فرعی، تراشه یا سطحی با تأکید کمتر |
| متن روی سطح فرعی | متن و آیکن روی سطح فرعی |
| حاشیه | مرز واضح فیلد یا جزء |
| حاشیه کمرنگ | مرز ظریف کارت و بخش فرعی |
| جداکننده | خط بین ردیفها یا بخشها |
| پسزمینه ورودی | زمینه فیلدهای فرم |
| پسزمینه پنجره | زمینه پنجره و گفتوگو |
| موفقیت | پیام، وضعیت یا نشان موفق |
| خطا | پیام، وضعیت یا نشان خطا |
| متن روی خطا | متن یا آیکن روی زمینه خطا |
| متن کمرنگ | توضیح، راهنما و اطلاعات کماهمیتتر |
الگوی پیشنهادی برای یک صفحه
| بخش صفحه | نقش پیشنهادی |
|---|---|
| زمینه کل صفحه | پسزمینه صفحه |
| کارت یا گروه | سطح / کارت |
| عنوان | متن اصلی |
| توضیح کوتاه | متن کمرنگ |
| دکمه اصلی | رنگ اصلی |
| نوشته دکمه اصلی | متن روی رنگ اصلی |
| فیلد فرم | پسزمینه ورودی |
| حاشیه فیلد | حاشیه یا جداکننده |
| پیام موفق | موفقیت |
| پیام ناموفق | خطا |
نمونه عملی: کارت محصول
- پسزمینه گروه کارت را روی سطح / کارت قرار دهید.
- برای عنوان محصول متن اصلی را انتخاب کنید.
- برای توضیح و قیمت قبلی متن کمرنگ را انتخاب کنید.
- برای کادر کارت از حاشیه کمرنگ استفاده کنید.
- پسزمینه دکمه خرید را روی رنگ اصلی قرار دهید.
- نوشته و آیکن دکمه را روی متن روی رنگ اصلی بگذارید.
- کارت را در هر دو تم پیشنمایش کنید.
با این روش به ساخت دو نسخه جداگانه از کارت نیاز ندارید.
ساخت رنگ سفارشی تم
وقتی نقشهای آماده کافی نیستند، میتوانید برای یک مفهوم اختصاصی مانند «عضویت طلایی»، «ارسال فوری» یا «سفارش در انتظار» رنگ روشن و تاریک جداگانه تعریف کنید.
برای ساخت رنگ سفارشی:
- به تنظیمات پروژه ← ظاهر بروید.
- در بخش رنگهای سفارشی تم روی افزودن رنگ سفارشی کلیک کنید.
- در ستون نام فنی یک شناسه انگلیسی وارد کنید؛ برای مثال
premiumCard. - در ستون عنوان یک نام قابلفهم مانند «کارت کاربران ویژه» بنویسید.
- رنگ ستون روشن را تعیین کنید.
- رنگ ستون تاریک را تعیین کنید.
- تنظیمات پروژه را ذخیره کنید.
رنگ ساختهشده با عنوان انتخابی شما در فهرست رنگ تم ظاهر میشود و با رنگ آبی از نقشهای آماده قابل تشخیص است.
قوانین رنگ سفارشی
- برای هر اپ حداکثر ۳۲ رنگ سفارشی قابل تعریف است.
- نام فنی باید با حرف انگلیسی شروع شود.
- در نام فنی فقط حرف انگلیسی، عدد، نقطه (
.)، خط تیره (-) و زیرخط (_) مجاز است. - نام فنی باید یکتا و حداکثر ۶۴ نویسه باشد.
- عنوان میتواند فارسی و حداکثر ۸۰ نویسه باشد.
- هر دو رنگ روشن و تاریک باید تعیین شوند.
- اگر هر دو رنگ را یکسان انتخاب کنید، با تغییر تم تفاوتی دیده نمیشود.
نامهای مناسب:
premiumCard
fastDelivery
goldMember
pendingOrder
برای یک کارت طلایی، میتوانید در حالت روشن از کرم یا طلایی بسیار روشن و در حالت تاریک از قهوهای یا طلایی بسیار تیره استفاده کنید. هدف این است که رنگ نقش خود را حفظ کند، اما کنتراست متن و اجزای اطراف در هر دو تم مناسب بماند.
حذف یا تغییر نام رنگ سفارشی
اگر رنگ سفارشیای را که قبلاً در ویجتها استفاده شده حذف کنید یا نام فنی آن را تغییر دهید، اتصال قبلی دیگر پیدا نمیشود. در این وضعیت، اپ از رنگ جایگزین ذخیرهشده در همان فیلد استفاده میکند. بهتر است پیش از حذف یا تغییر نام، موارد استفاده آن رنگ را پیدا و به نقش جدید منتقل کنید.
رنگ جایگزین یا fallback
هر مقدار رنگ تم و متغیر رنگ یک رنگ جایگزین نیز همراه خود نگه میدارد. این رنگ برای حالتهای غیرعادی است:
- نقش تم یا رنگ سفارشی دیگر وجود نداشته باشد.
- نام رنگ سفارشی تغییر کرده یا حذف شده باشد.
- متغیر رنگ هنوز مقدار معتبر نداشته باشد.
در استفاده عادی، fallback رنگ روشن یا تاریک را کنترل نمیکند؛ نقش انتخابشده از تم فعال خوانده میشود. بنابراین fallback را راه ساخت تم دوم در نظر نگیرید.
بررسی تم در شبیهساز
دکمه دارای نماد نیمه روشن/نیمه تاریک در نوار ابزار شبیهساز، پیشنمایش را بین دو حالت جابهجا میکند.
این دکمه فقط برای آزمایش طراحی است. تغییر آن تم پیشفرض اپ را عوض نمیکند و انتخاب ذخیرهشده کاربر در خروجی واقعی را نیز تغییر نمیدهد.
پس از هر تغییر مهم، این موارد را در هر دو حالت بررسی کنید:
- نوشته و آیکن روی دکمهها خوانا باشند.
- کارت از پسزمینه صفحه قابل تشخیص باشد.
- متن راهنما از متن اصلی کمرنگتر، اما همچنان خوانا باشد.
- فیلدهای فرم، کمبوباکسها و حالت فوکوس مرز مشخص داشته باشند.
- پیام موفقیت و خطا با رنگ برند اشتباه نشوند.
- پنجرهها، منوها، تبها و حالت انتخابشده هماهنگ باشند.
- رنگهای سفارشی در هر دو حالت کنتراست کافی داشته باشند.
- تصاویر دارای نوشته یا پسزمینه ثابت در هر دو تم قابلاستفاده باشند.
شبیهساز برای بررسی سریع مناسب است، اما پیش از انتشار، مسیرهای مهم را روی خروجی واقعی و حداقل یک گوشی نیز آزمایش کنید.
تغییر تم توسط کاربر در زمان اجرا
برای ساخت دکمه تغییر حالت داخل اپ:
- یک دکمه، آیکن یا آیتم منو بسازید.
- رویداد کلیک آن را باز کنید.
- عملکرد تغییر تم را اضافه کنید.
- در فیلد تم یکی از گزینههای زیر را انتخاب کنید:
| گزینه | نتیجه |
|---|---|
| روشن | تم اپ را روشن میکند |
| تاریک | تم اپ را تاریک میکند |
| سوئیچ روشن/تاریک | تم روشن را تاریک و تم تاریک را روشن میکند |
انتخاب کاربر در دستگاه ذخیره میشود و در اجرای بعدی اپ نیز باقی میماند. تم پیشفرض اپ زمانی استفاده میشود که هنوز انتخاب ذخیرهشدهای وجود نداشته باشد.
جزئیات بیشتر این عملکرد در صفحه تغییر تم روشن و تاریک آمده است.
تشخیص تم فعال با متغیر سیستمی
متغیر سیستمی زیر نام تم فعال اپ را برمیگرداند:
sys.theme.current
مقدار آن یکی از این دو رشته است:
lightبرای تم روشنdarkبرای تم تاریک
این مقدار بلافاصله پس از اجرای عملکرد تغییر تم بهروز میشود. میتوانید از آن در شرطها، متنهای پویا یا نمایش متفاوت ویجتها استفاده کنید؛ برای مثال:
- در تم روشن آیکن ماه و در تم تاریک آیکن خورشید را نشان دهید.
- عنوان دکمه را بین «فعالکردن تم تاریک» و «فعالکردن تم روشن» تغییر دهید.
- یک تصویر تزئینی مخصوص هر حالت نمایش دهید.
sys.theme.current تمی را نشان میدهد که خود اپ اکنون استفاده میکند. متغیر sys.runtime.brightness روشنایی سیستمعامل را گزارش میکند. این دو ممکن است متفاوت باشند؛ برای مثال گوشی روی حالت تاریک باشد، اما کاربر تم روشن اپ را انتخاب کرده باشد.
در حال حاضر تم اپ دو حالت روشن و تاریک دارد و گزینه جداگانهای برای دنبالکردن خودکار تم سیستم در «تم پیشفرض» وجود ندارد.
هماهنگی نوار وضعیت و نوار پیمایش
در تنظیمات پروژه ← ظاهر ← تنظیمات پیشرفته نوارهای سیستم میتوانید ظاهر نوار وضعیت و نوار پیمایش دستگاه را نیز با تم هماهنگ کنید.
- روشنایی آیکن نوار وضعیت: خودکار بر اساس تم، روشن یا تاریک
- رنگ زمینه نوار وضعیت: خودکار/شفاف، رنگ ثابت یا رنگ تم
- روشنایی آیکن نوار پیمایش: خودکار بر اساس تم، روشن یا تاریک
- رنگ زمینه نوار پیمایش: خودکار/شفاف، رنگ ثابت یا رنگ تم
- رنگ جداکننده نوار پیمایش: خودکار/بدون جداکننده، رنگ ثابت یا رنگ تم
برای بیشتر پروژهها، روشنایی آیکنها را روی خودکار بر اساس تم نگه دارید. تنظیم دستی زمانی مفید است که یک صفحه خاص، پسزمینهای متفاوت با تم عمومی دارد. نتیجه نوارهای سیستم را حتماً روی خروجی واقعی اندروید بررسی کنید.
تم در خروجی نهایی
پالت روشن و تاریک، رنگ برند و رنگهای سفارشی هنگام ساخت خروجی داخل اپ قرار میگیرند. تغییر تم در دستگاه به اینترنت یا ارتباط با پنل وابسته نیست.
دو نکته مهم:
- برای اعمال تغییرات رنگ برند، شدت حضور برند یا رنگهای سفارشی در نسخه نصبشده، باید خروجی جدید بگیرید.
- انتخاب روشن یا تاریک کاربر در همان دستگاه ذخیره میشود؛ نصب یا شرایط ذخیرهسازی دستگاه میتواند تعیین کند این انتخاب پس از جایگزینی نسخه همچنان باقی بماند یا نه.
رفع مشکلات رایج
با تغییر تم، رنگ یک ویجت عوض نمیشود
- انتخابگر همان ویژگی را باز کنید.
- مطمئن شوید نوع مقدار روی رنگ تم یا خودکار است، نه رنگ ثابت.
- برای رنگ تم، نقش مناسبی مانند «سطح / کارت» یا «متن اصلی» انتخاب کنید.
- تنظیمات را ذخیره و شبیهساز را یک بار میان روشن و تاریک جابهجا کنید.
با تغییر رنگ برند، بعضی ویجتها تغییر نمیکنند
رنگ برند فقط روی اجزای خودکار و رنگهای متصل به تم اثر دارد. رنگهای ثابت و رنگهای سفارشی مستقل، عمداً دستنخورده میمانند. رنگ آن ویجت را به رنگ تم ← رنگ اصلی یا نقش مناسب دیگری تبدیل کنید.
رنگ سفارشی در انتخابگر دیده نمیشود
- ابتدا تنظیمات پروژه را ذخیره کنید.
- مطمئن شوید نام فنی معتبر و تکراری نیست.
- برای هر دو ستون روشن و تاریک رنگ تعیین کنید.
- بررسی کنید فیلد موردنظر از رنگ تم پشتیبانی کند.
- پنجره انتخابگر رنگ را ببندید و دوباره باز کنید تا فهرست بهروز خوانده شود.
رنگ سفارشی در تم تاریک همان رنگ روشن است
- رنگ ستون تاریک را بررسی کنید.
- مطمئن شوید دو ستون را یکسان تنظیم نکردهاید.
- بررسی کنید ویجت به رنگ ثابت یا متغیر رنگ متصل نشده باشد.
- از دکمه تغییر تم خود شبیهساز استفاده کنید، نه فقط تغییر ظاهر سایت یا مرورگر.
متن روی دکمه خوانا نیست
برای زمینه دکمه رنگ اصلی و برای نوشته یا آیکن روی آن متن روی رنگ اصلی را انتخاب کنید. برای دکمه مکمل نیز همین جفت را با «رنگ مکمل» و «متن روی رنگ مکمل» بسازید.
پسزمینه بیش از حد رنگی شده است
مقدار حضور رنگ برند در زمینهها را از «پررنگ» به ملایم یا خنثی تغییر دهید. اگر فقط یک بخش باید رنگی باشد، بهجای تغییر همه زمینهها برای آن بخش یک رنگ سفارشی تم بسازید.
پیشنمایش با تم پیشفرض هماهنگ نیست
دکمه روشن/تاریک شبیهساز میتواند یک حالت آزمایشی موقت اعمال کند. پنل پیشنمایش را دوباره باز کنید یا دکمه را به حالت تم پیشفرض برگردانید. این وضعیت روی تنظیم ذخیرهشده اپ اثر ندارد.
چکلیست پیش از انتشار
- تم پیشفرض روشن یا تاریک مشخص شده است.
- رنگ برند و شدت حضور آن با هویت اپ هماهنگ است.
- برای رابط کاربری تا حد ممکن از نقشهای رنگ تم استفاده شده است.
- متن روی رنگ اصلی و مکمل از نقش «متن روی» درست استفاده میکند.
- تمام رنگهای سفارشی، مقدار روشن و تاریک مناسب دارند.
- صفحههای اصلی، فرمها، منوها و پنجرهها در هر دو تم آزمایش شدهاند.
- دکمه تغییر تم، در صورت نیاز، با عملکرد تغییر تم ساخته شده است.
- آیکن یا عنوان دکمه تغییر تم با
sys.theme.currentهماهنگ میشود. - نوار وضعیت و نوار پیمایش روی خروجی واقعی بررسی شدهاند.
- پس از آخرین تغییرات تم، خروجی جدید ساخته شده است.
با این ساختار، تغییر رنگ برند یا اصلاح ظاهر کلی اپ به ویرایش دهها ویجت نیاز ندارد و طراحی روشن و تاریک در همه صفحهها یکپارچه باقی میماند.