‏پس‌زمینه‌ای که با ساعت روز رنگ عوض می‌کنه

نویسنده تو این پست توضیح می‌ده چطور تم city وبلاگش رو — که قبلاً یه دارک‌مود آسمان پرستاره بود — جوری بازسازی کرده که رنگ پس‌زمینه با ساعت روز عوض بشه. روز به چهار مرحله تقسیم شده: طلوع، روز، غروب و شب. روز و شب هرکدوم ۱۱.۵ ساعتن و طلوع و غروب هرکدوم ۹۰ دقیقه. هر مرحله سه رنگ داره؛ دوتاش برای گرادیان پس‌زمینه و سومی برای درخششی که به پایین صفحه می‌چسبه.

برای کار با زمان به‌جای Date سراغ Temporal رفته، APIای که فعلاً به‌صورت آزمایشی تو کروم و فایرفاکسه. به گفتهٔ اون Date گیج‌کننده‌ست چون بسته به تابعی که صدا می‌زنی زمان محلی یا UTC نشون می‌ده، و کار با تاریخ انقدر دردسر داره که بیشترمون می‌ریم سراغ کتابخونه‌هایی مثل date-fns یا luxon. Temporal مفاهیم روشنی مثل PlainTime و ZonedDateTime معرفی می‌کنه و اینجا PlainTime کافی بوده، چون فقط ساعت مهمه نه تاریخ.

برخلاف Date، مقایسه و محاسبهٔ فاصله ساده‌ست: Temporal.PlainTime.compare مشخص می‌کنه تو کدوم مرحله‌ای و until فاصله تا مرحلهٔ بعد رو به‌صورت یه Duration می‌ده که با فرمت ISO 8601 نمایش داده می‌شه:

const timeNow = Temporal.Now.plainTimeISO();
const timeUntilNextStage = timeNow.until(stages.night.start);
console.log(timeUntilNextStage.toString()); // PT1H15M

بعد یادش افتاده color-mix هم وجود داره، پس چرا فقط چهار حالت ثابت؟ این تابع CSS دو رنگ رو تو فضای رنگی دلخواه ترکیب می‌کنه و می‌شه بهش درصد هم داد تا نسبت‌ها مشخص بشه:

background: color-mix(in oklch, color1 20%, color2)

برای پیدا کردن اون درصد، مدت گذار رو ۹۰ دقیقه در نظر گرفته و با subtract و total({ unit: "seconds" }) حساب می‌کنه چقدر از گذار گذشته. یه مشکل هم داشته: مرحلهٔ شب از نیمه‌شب رد می‌شه و چون PlainTime تاریخ نداره، فاصله تا طلوع منفی درمیاد — که با abs حلش کرده.

نکات کلیدی:

• چهار مرحلهٔ طلوع، روز، غروب و شب با سه رنگ گرادیان
• Temporal.Now.plainTimeISO() برای گرفتن ساعت محلی کاربر
• compare، until، subtract و total به‌جای محاسبات دستی Date
• ترکیب تدریجی رنگ مرحلهٔ بعد با color-mix تو فضای oklch
• عبور شب از نیمه‌شب، فاصلهٔ منفی می‌ده که با abs حل می‌شه