Temporal API et CSS color-mix : un thème qui change avec l'heure du jour

Le 5 juillet 2026, la développeuse britannique connue sous le nom de plume localghost a publié la refonte de son site personnel. Nouvelle mise en page desktop, page etc supprimée, page de liens reprise avec Raindrop.io, thème vaporwave doté d'une barre de navigation avec de petites icônes. Le changement le plus intéressant sur le plan technique concerne le thème city, auparavant un simple mode sombre façon ciel étoilé : il change désormais de palette selon l'heure réelle de la journée.

Entre 21h et 5h du matin, la différence avec l'ancienne version est presque invisible, ce qui est normal puisque le thème suit l'heure locale du navigateur. Un sélecteur placé en haut à droite, juste après le changeur de thème, permet de forcer une autre heure pour tester les variations, avec un choix persisté en session storage.

Derrière cette fonctionnalité se cachent deux standards web relativement récents : l'API Temporal en JavaScript et la fonction CSS color-mix. Le duo est réuni dans un seul composant, et c'est ce cas d'usage précis qui mérite d'être décortiqué : il illustre comment le web natif réduit, année après année, le besoin de bibliothèques tierces pour des effets qui exigeaient auparavant des bricolages.

Temporal, la fin des acrobaties avec Date

L'objet Date de JavaScript hérite directement de la bibliothèque Date de Java, elle-même dépréciée depuis longtemps. Résultat : une API confuse où l'heure affichée dépend de la méthode appelée (heure locale ou UTC selon les cas), et où la moindre comparaison de dates oblige à jongler avec des timestamps ou à importer date-fns ou luxon.

Temporal, disponible expérimentalement dans Chrome et Firefox, repart de zéro avec des types dédiés à chaque usage :

• PlainDateTime : une date et une heure, sans fuseau horaire
• PlainDate : une date seule, sans heure ni fuseau
• PlainTime : une heure seule, sans date ni fuseau
• ZonedDateTime : une date et une heure rattachées à un fuseau précis

Pour un thème qui ne dépend que de l'heure, peu importe le jour, PlainTime tombe pile. On récupère l'heure locale du visiteur en une ligne :

const timeNow = Temporal.Now.plainTimeISO();

Comparer deux instants ne demande plus de gymnastique : chaque type Temporal expose une fonction compare() statique, qui renvoie 1, 0 ou -1 selon que le premier argument est postérieur, égal ou antérieur au second. Pour calculer un intervalle, la méthode until() renvoie directement un objet Duration, formaté selon la norme ISO 8601, par exemple PT1H15M pour une heure et quart.

color-mix, fusionner deux couleurs sans dégradé figé

Sur le plan CSS, color-mix() permet de mélanger deux couleurs dans un espace colorimétrique donné, avec un dosage en pourcentage :

background: color-mix(in oklch, var(--couleur-1) 20%, var(--couleur-2));

Le navigateur calcule lui-même la teinte intermédiaire. Plus besoin de générer une palette de dégradés à la main ou de faire tourner une animation CSS image par image pour obtenir une transition de couleur crédible.

Le cas d'usage : un thème en quatre phases

Sur le thème city de localghost, la journée est découpée en quatre phases : lever, jour, coucher, nuit. Le jour et la nuit durent chacun 11h30, tandis que le lever et le coucher durent 90 minutes chacun. Chaque phase définit trois couleurs au format oklch pour un dégradé de fond en deux tons, plus une couleur additionnelle pour le halo du pied de page.

La logique JavaScript fonctionne ainsi : un switch/case compare l'heure actuelle aux heures de démarrage de chaque phase via Temporal.PlainTime.compare(), détermine la phase en cours, puis pose les couleurs correspondantes sur des custom properties CSS via root.style.setProperty(). Un attribut data-time est aussi posé sur la racine du document, ce qui permet d'activer des détails propres à chaque phase, comme l'affichage des étoiles la nuit.

Pour que la transition soit progressive plutôt que brutale au changement de phase, le site calcule le temps restant avant la phase suivante avec time1.until(time2), puis rapporte cette durée à la durée totale de la transition (90 minutes pour lever-jour et coucher-nuit, 11h30 pour nuit-lever et jour-coucher) afin d'obtenir un pourcentage. Ce pourcentage alimente directement color-mix() pour doser la couleur de la phase suivante dans la couleur actuelle.

Comment vous en emparer dans vos projets

Le pattern se transpose facilement à un site vitrine, une boutique en ligne ou un dashboard SaaS :

• Un site vitrine ou un e-commerce peut ajuster son ambiance visuelle selon l'heure de visite, sans configuration manuelle demandée à l'utilisateur.
• Un dashboard interne peut proposer un confort visuel progressif en soirée sans bouton à cliquer.
• La logique reste isolée dans un objet de configuration listant les phases et leurs couleurs, ce qui la rend facile à maintenir et à adapter à une charte graphique existante.

Point de vigilance : Temporal est encore expérimental, disponible dans Chrome et Firefox au moment de la publication. Pour un projet en production visité par une audience large, mieux vaut prévoir une détection de support et un repli propre sur une palette statique ou sur Date pour les navigateurs qui ne suivent pas encore. color-mix bénéficie d'un support navigateur déjà plus large et peut s'utiliser en confiance dès aujourd'hui pour toute logique de mélange de couleurs, avec ou sans Temporal derrière.

Notre lecture chez CZSyn

Ce cas d'usage nous plaît parce qu'il illustre une tendance de fond que nous observons sur nos propres projets : le CSS et le JavaScript natifs grignotent, mois après mois, le terrain des bibliothèques tierces. Il y a encore quelques années, un thème qui suit l'heure du jour aurait nécessité luxon ou moment.js pour les calculs de dates, et une palette de dégradés précalculés pour les transitions de couleur. Aujourd'hui, deux API de la plateforme web suffisent.

Pour une PME française qui envisage ce genre d'effet sur son site vitrine, la vraie question n'est pas la faisabilité technique (elle est réglée), mais le niveau de dégradation acceptable pour les navigateurs qui ne supportent pas encore Temporal. Une implémentation sérieuse prévoit toujours un repli propre, sans quoi une partie des visiteurs verra un thème figé, ou pire, une erreur JavaScript silencieuse. C'est le genre de détail que nous vérifions systématiquement avant de livrer une fonctionnalité basée sur un standard encore expérimental.

Sources primaires

• localghost, « Time-based background colour transitions with Temporal and CSS color-mix », 5 juillet 2026.
• MDN Web Docs, documentation de référence sur Temporal.
• MDN Web Docs, documentation de référence sur color-mix().