diff --git a/src/App.svelte b/src/App.svelte
index d1c3ad7..1e1fad0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,10 +4,33 @@
 
   const ACTIVITY_URL = import.meta.env.VITE_ACTIVITY_URL ?? 'https://activity.bincio.org';
 
+  const PALETTES = {
+    default: { accent: '#60a5fa', dim: 'rgba(96,165,250,0.15)'  },
+    giro:    { accent: '#f472b6', dim: 'rgba(244,114,182,0.15)' },
+    tour:    { accent: '#facc15', dim: 'rgba(250,204,21,0.15)'  },
+    vuelta:  { accent: '#ef4444', dim: 'rgba(239,68,68,0.15)'   },
+  };
+  const RACES = [
+    { key: 'giro',   start: [4, 8],  end: [5, 1]  },
+    { key: 'tour',   start: [5, 27], end: [6, 19] },
+    { key: 'vuelta', start: [7, 15], end: [8, 6]  },
+  ];
+  function applyPalette() {
+    const now = new Date(), y = now.getFullYear();
+    const key = RACES.find(r =>
+      now >= new Date(y, r.start[0], r.start[1]) &&
+      now <  new Date(y, r.end[0],   r.end[1] + 1)
+    )?.key ?? 'default';
+    const p = PALETTES[key];
+    document.documentElement.style.setProperty('--accent',     p.accent);
+    document.documentElement.style.setProperty('--accent-dim', p.dim);
+  }
+
   let authed = $state(false);
   let checking = $state(true);
 
   onMount(async () => {
+    applyPalette();
     try {
       const r = await fetch(`${ACTIVITY_URL}/api/me`, { credentials: 'include' });
       if (r.ok) {