How to Change the Accent Color Based on Time in Webflow

(function() {
  var palettes = [
    { start: 0,  end: 6,  name: 'Night',           primary: '#6366f1', secondary: '#a5b4fc', bg: '#0f0f23' },
    { start: 6,  end: 9,  name: 'Morning',           primary: '#f59e0b', secondary: '#fcd34d', bg: '#fffbeb' },
    { start: 9,  end: 12, name: 'Late morning',  primary: '#10b981', secondary: '#6ee7b7', bg: '#ecfdf5' },
    { start: 12, end: 14, name: 'Noon',             primary: '#f97316', secondary: '#fed7aa', bg: '#fff7ed' },
    { start: 14, end: 18, name: 'Afternoon', primary: '#3b82f6', secondary: '#bfdbfe', bg: '#eff6ff' },
    { start: 18, end: 20, name: 'Evening',   primary: '#ec4899', secondary: '#fbcfe8', bg: '#fdf2f8' },
    { start: 20, end: 24, name: 'Dusk',    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;
  });
})();