Comment changer la couleur d'accent selon l'heure dans Webflow ?
Apprenez à changer automatiquement la couleur d'accent de votre site Webflow selon l'heure du jour.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment changer automatiquement la couleur d'accent de votre site Webflow selon l'heure du jour.
Palette active selon l'heure — simulez une plage horaire
Plage horaire active
Chargement...
| Plage | Nom | Couleur primaire |
|---|---|---|
| 0h - 6h | Nuit | Indigo #6366f1 |
| 6h - 9h | Matin | Ambre #f59e0b |
| 9h - 12h | Matinée | Émeraude #10b981 |
| 14h - 18h | Après-midi | Bleu #3b82f6 |
| 18h - 20h | Soirée | Rose #ec4899 |
| 20h - 24h | Nuit tombante | Violet #8b5cf6 |
1. Utilisez les variables CSS dans Webflow
Dans vos styles Webflow, utilisez les variables var(--accent-primary), var(--accent-secondary) et var(--accent-bg) sur vos éléments d'accent (boutons, liens, titres colorés...). Le script les met à jour automatiquement au chargement.
2. Ou utilisez l'attribut data-accent
Ajoutez data-accent="bg", data-accent="color" ou data-accent="border" sur n'importe quel élément pour qu'il prenne la couleur du moment.
3. Ajoutez le script dans Footer code
(function() {
var palettes = [
{ start: 0, end: 6, name: 'Nuit', primary: '#6366f1', secondary: '#a5b4fc', bg: '#0f0f23' },
{ start: 6, end: 9, name: 'Matin', primary: '#f59e0b', secondary: '#fcd34d', bg: '#fffbeb' },
{ start: 9, end: 12, name: 'Matinée', primary: '#10b981', secondary: '#6ee7b7', bg: '#ecfdf5' },
{ start: 12, end: 14, name: 'Midi', primary: '#f97316', secondary: '#fed7aa', bg: '#fff7ed' },
{ start: 14, end: 18, name: 'Après-midi', primary: '#3b82f6', secondary: '#bfdbfe', bg: '#eff6ff' },
{ start: 18, end: 20, name: 'Soirée', primary: '#ec4899', secondary: '#fbcfe8', bg: '#fdf2f8' },
{ start: 20, end: 24, name: 'Nuit tombante', primary: '#8b5cf6', secondary: '#ddd6fe', bg: '#f5f3ff' },
];
var hour = new Date().getHours();
var palette = palettes.find(function(p) { return hour >= p.start && hour < p.end; }) || palettes[0];
var root = document.documentElement;
root.style.setProperty('--accent-primary', palette.primary);
root.style.setProperty('--accent-secondary', palette.secondary);
root.style.setProperty('--accent-bg', palette.bg);
var label = document.getElementById('palette-name');
if (label) label.textContent = palette.name + ' · ' + hour + 'h';
document.querySelectorAll('[data-accent]').forEach(function(el) {
var type = el.dataset.accent;
if (type === 'bg') el.style.background = palette.primary;
if (type === 'color') el.style.color = palette.primary;
if (type === 'border') el.style.borderColor = palette.primary;
});
})();Conclusion
Un site dont la palette évolue avec l'heure crée une expérience unique et mémorable. Cas d'usage :
- Portfolios créatifs avec forte identité visuelle
- Sites de marques lifestyle ou bien-être
- Pages de landing avec storytelling temporel
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
