Личный сайт, который знает который час и плавно меняет небо
Без фреймворков — только новый Temporal API и CSS color-mix().
Софи Кунин переделала тему своего сайта и подробно задокументировала всю механику. В основе три идеи, которые редко встречаются вместе:
**Temporal вместо Date** — Date API сломан: local vs UTC в зависимости от метода, неудобная арифметика, поэтому все тянутся за date-fns или luxon. Temporal решает это типизированными примитивами. PlainTime хранит только время — без даты, без таймзоны. Сравнение двух моментов — это просто Temporal.PlainTime.compare().
**color-mix() как живой движок смешивания** — четыре палитры для рассвета, дня, заката и ночи заданы в oklch. По мере приближения к следующей стадии процент в color-mix() растёт от 0% до 100%. Фон градиента непрерывно дрейфует между палитрами, а не переключается резко.
**@property через JS, а не CSS** — чтобы CSS-переменные можно было анимировать, их нужно зарегистрировать через @property с syntax: "". Но декларация в CSS давала FOUC: initial-value мелькал до того, как JS успевал посчитать нужный цвет. Решение: вызывать CSS.registerProperty() из JavaScript, сразу с правильным начальным цветом.
В статье ещё есть полифилл для Safari (Temporal пока не поддерживается), граничный случай с PlainTime и переходом через полночь (отрицательные Duration), и баг Safari с background-attachment: fixed + container-type: inline-size — пофиксено @supports-хаком с browserstrangeness.github.io.
Весь код и объяснения — у Софи 👇 https://localghost.dev/blog/time-based-background-colour-transitions-with-temporal-and-css-color-mix/
