From 19481a5783359d383291ec49b1da054301f25315 Mon Sep 17 00:00:00 2001
From: Terencio Agozzino <terencio.agozzino@gmail.com>
Date: Sat, 31 Oct 2026 18:43:49 +0100
Subject: [PATCH] feat(theme): switch to evening at sunset, not at 19:00

Day and evening now follow the sun where the visitor is (Brussels for its
neighbours, else the middle of their time zone), and an open page darkens
at sunset. Fixed hours left the site light two hours after an autumn
sunset, and dark three hours before a June one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/layouts/Base.astro | 58 ++++++++++++++++++++++++++++++++----------
 tests/site.spec.ts     |  7 ++++-
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index e24b57f..eebaa30 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -34,15 +34,11 @@ const jsonLd = {
     <meta charset="utf-8" />
     <meta name="theme-color" content="#f4f0e2" />
     <script is:inline>
-      // The season from the month, day or evening from the hour, before the
-      // first paint so the page never flashes the wrong colours. The browser's
-      // own bar follows, through theme-color.
+      // The season from the month, and day or evening from whether the sun is
+      // up where the visitor is, before the first paint so the page never
+      // flashes the wrong colours; then every minute, so an open page darkens
+      // at sunset. The browser's own bar follows, through theme-color.
       (() => {
-        const now = new Date();
-        const month = now.getMonth() + 1;
-        const hour = now.getHours();
-        const season = month === 12 || month <= 3 ? 'winter' : 'autumn';
-        const time = hour >= 7 && hour < 19 ? 'day' : 'evening';
         const backgrounds = {
           'autumn-day': '#f4f0e2',
           'autumn-evening': '#1d1712',
@@ -50,12 +46,48 @@ const jsonLd = {
           'winter-evening': '#11172a',
         };
         const root = document.documentElement;
-        root.dataset.season = season;
-        root.dataset.time = time;
+        const meta = document.querySelector('meta[name="theme-color"]');
+
+        // Where the visitor is, roughly: Brussels for its neighbours, else the
+        // middle of their time zone, at a mid latitude.
+        const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        const near = /^Europe\/(Brussels|Paris|Amsterdam|Luxembourg)$/.test(zone);
+        const year = new Date().getFullYear();
+        const standardOffset = Math.max(
+          new Date(year, 0, 1).getTimezoneOffset(),
+          new Date(year, 6, 1).getTimezoneOffset(),
+        );
+        const lat = near ? 50.85 : 45;
+        const lng = near ? 4.35 : -standardOffset / 4;
+
+        // Whether the sun is above the horizon: its position from the date,
+        // accurate to a few minutes of the published sunrise and sunset.
+        const rad = Math.PI / 180;
+        const sunUp = (date) => {
+          const d = date / 864e5 - 10957.5;
+          const g = (357.529 + 0.98560028 * d) * rad;
+          const l = (280.459 + 0.98564736 * d + 1.915 * Math.sin(g) + 0.02 * Math.sin(2 * g)) * rad;
+          const e = (23.439 - 3.6e-7 * d) * rad;
+          const ra = Math.atan2(Math.cos(e) * Math.sin(l), Math.cos(l));
+          const dec = Math.asin(Math.sin(e) * Math.sin(l));
+          const h = (280.46061837 + 360.98564736629 * d + lng) * rad - ra;
+          const altitude =
+            Math.sin(lat * rad) * Math.sin(dec) + Math.cos(lat * rad) * Math.cos(dec) * Math.cos(h);
+          return altitude > Math.sin(-0.833 * rad);
+        };
+
+        const apply = () => {
+          const now = new Date();
+          const month = now.getMonth() + 1;
+          const season = month === 12 || month <= 3 ? 'winter' : 'autumn';
+          const time = sunUp(now) ? 'day' : 'evening';
+          root.dataset.season = season;
+          root.dataset.time = time;
+          meta?.setAttribute('content', backgrounds[`${season}-${time}`]);
+        };
+        apply();
         root.classList.add('js');
-        document
-          .querySelector('meta[name="theme-color"]')
-          ?.setAttribute('content', backgrounds[`${season}-${time}`]);
+        setInterval(apply, 60_000);
       })();
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/tests/site.spec.ts b/tests/site.spec.ts
index 8fd02a3..ae7f748 100644
--- a/tests/site.spec.ts
+++ b/tests/site.spec.ts
@@ -151,10 +151,15 @@ const themes = [
   { at: '2026-10-15T22:00:00+02:00', season: 'autumn', time: 'evening', bg: '#1d1712' },
   { at: '2027-01-15T10:00:00+01:00', season: 'winter', time: 'day', bg: '#ece8da' },
   { at: '2027-01-15T22:00:00+01:00', season: 'winter', time: 'evening', bg: '#11172a' },
+  // Day and evening follow the sun in Brussels, not fixed hours: dark soon
+  // after a 17:20 sunset in autumn, still light at 21:30 in June.
+  { at: '2026-10-31T17:45:00+01:00', season: 'autumn', time: 'evening', bg: '#1d1712' },
+  { at: '2026-06-21T21:30:00+02:00', season: 'autumn', time: 'day', bg: '#f4f0e2' },
+  { at: '2026-12-21T08:15:00+01:00', season: 'winter', time: 'evening', bg: '#11172a' },
 ];
 
 for (const { at, season, time, bg } of themes) {
-  test(`picks the ${season} ${time} theme from the clock`, async ({ page }) => {
+  test(`picks the ${season} ${time} theme at ${at}`, async ({ page }) => {
     await page.clock.setFixedTime(new Date(at));
     await page.goto('/');