‏دارک‌مود Flare و درس‌های راهش

تو بلاگ Flare اومده که دارک‌مود این سرویس ردیابی خطا (همون جایی که استک‌تریس خطاهای اپت رو می‌بینی) حالا آماده‌ست. از Account → Appearance یا از منوی پشت آواتارت می‌تونی Light یا Dark یا Match my system رو انتخاب کنی. نویسنده می‌گه سال‌ها این درخواست ته لیست کارهاشون موند، چون درست انجام دادنش کار کمی نبود و جور کردن پالت تیره با تم فعلی اپ، در عین دسترس‌پذیر موندن، راحت نبود.

اولین چیزی که یاد گرفتن این بود که سایه تو تم تیره جواب نمی‌ده: مشکی روی مشکی دیده نمی‌شه و اگه سایه رو سفید کنی یه هالهٔ نورانی می‌گیری. جاش از بوردرهای روشن استفاده کردن تا سطح از پس‌زمینه جدا شه. گرادیان شیشه‌ایشون هم که بیشتر تو فلش‌مسیج‌ها استفاده می‌شه، به خاطر شفافیتی که توش هست تو تم تیره کامل خراب می‌شد؛ پس برعکسش کردن، یعنی قرمز متن شد رنگ پس‌زمینه و قرمز محوِ پس‌زمینه شد رنگ متن.

بخش سخت ماجرا متغیرهای CSS بود. رنگ‌ها از قبل تو متغیر بودن، ولی اسم‌ها روی رنگ گذاشته شده بود نه روی نقش؛ --fl-purple-light به آدم نمی‌گه این رنگ کجا استفاده می‌شه. پس یه لایه توکن معنایی اضافه کردن: --canvas، --surface، --line، --fg-muted و مثل این‌ها. کامپوننت‌ها فقط همین اسم‌ها رو می‌بینن، پس تم تیره دیگه چیزی نیست جز یه ست مقدار دوم برای همون توکن‌ها:

:root {
    --canvas: var(--fl-gray-30);
    --surface: var(--fl-white);
    --elevation-card: 0px 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.dark {
    --canvas: #111219;
    --surface: #191a24;
    --elevation-card: 0 0 0 1px var(--line);
}

کامپوننت‌هاشون ۱۳۲۳ بار از اسم رنگ‌های قدیمی استفاده کرده بودن. پاس اول رو با AI زدن، چون بیشترش فقط تغییر اسم بود، مثل text-fl-gray که شد text-fg-muted. بقیه رو دستی نگاه کردن، چون یه رنگ قدیمی گاهی دو کار جدا می‌کرد؛ مثلاً سفید هم پس‌زمینهٔ کارت بود هم رنگ لیبل روی دکمهٔ بنفش. بعدش هم چندتا مقدار هگز هاردکد پیدا شد که تمیز کردنشون ساده بود.

برای مطمئن شدن از اینکه تم روشن دست‌نخورده مونده، با Playwright از همون صفحه‌ها روی برنچ main و برنچ دارک‌مود اسکرین‌شات گرفتن و پیکسل‌به‌پیکسل مقایسه کردن. نویسنده می‌گه اگه صفحه‌ای تو حالت تیره هنوز بد به نظر می‌رسه، خبر بدید تا درستش کنن.

نکات کلیدی:

• دارک‌مود از Account → Appearance یا منوی آواتار، با سه گزینهٔ Light و Dark و Match my system
• سایه جاش رو به بوردر یک‌پیکسلی داد: --elevation-card تو تم تیره می‌شه 0 0 0 1px var(--line)
• توکن‌های معنایی مثل --canvas و --surface و --line و --fg-muted جای اسم رنگ‌ها نشستن
• ۱۳۲۳ بار اسم رنگ قدیمی تو کامپوننت‌ها بود و پاس اول تغییرش با AI انجام شد
• صحت تم روشن با اسکرین‌شات Playwright و مقایسهٔ پیکسلی بین main و برنچ دارک‌مود چک شد