Design

9 views

4 min

How to Change the Accent Color Based on Time in Webflow

Learn how to automatically change your Webflow site’s accent color based on the time of day.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to automatically change your Webflow site’s accent color based on the time of day.

Active palette by time of day — simulate a time slot

Active time slot

Time slot	Name	Primary color
0h - 6h	Night	Indigo #6366f1
6h - 9h	Morning	Amber #f59e0b
9h - 12h	Late morning	Emerald #10b981
14h - 18h	Afternoon	Blue #3b82f6
18h - 20h	Evening	Pink #ec4899
20h - 24h	Dusk	Purple #8b5cf6

1. Use CSS variables in Webflow

In your Webflow styles, use the var(--accent-primary), var(--accent-secondary), and var(--accent-bg) variables on your accent elements (buttons, links, colored headings, and more). The script updates them automatically on load.

2. Or use the data-accent attribute

Add data-accent="bg", data-accent="color", or data-accent="border" to any element so it picks up the current color.

3. Add the script in Footer code

(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;
  });
})();

good to know

The CSS variables --accent-primary, etc. only work with CSS properties that use them natively. Webflow lets you use custom CSS variables in style value fields: type var(--accent-primary) into an element’s background-color field. This approach works in all modern browsers since 2017.

Conclusion

A site whose palette changes with the time of day creates a unique, memorable experience. Use cases:

Creative portfolios with a strong visual identity
Lifestyle or wellness brand websites
Landing pages with time-based storytelling

How to Change the Accent Color Based on Time in Webflow

1. Use CSS variables in Webflow

2. Or use the data-accent attribute

3. Add the script in Footer code

The CSS variables --accent-primary, etc. only work with CSS properties that use them natively. Webflow lets you use custom CSS variables in style value fields: type var(--accent-primary) into an element’s background-color field. This approach works in all modern browsers since 2017.

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials