test

src/components/Header.astro

@@ -250,6 +250,14 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
   /* Tone: watch a one-pixel line through the middle of the bar and switch to night while a
      .night section crosses it. An IntersectionObserver, so nothing runs on scroll. */
   const sections = document.querySelectorAll<HTMLElement>('.night');
+  /* The browser chrome follows the bar: theme-color tints the strip around the iPhone's notch and
+     clock (and the toolbar in Chrome on Android), so it changes with the tone underneath. */
+  const themeColor = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]');
+  const tokens = getComputedStyle(document.documentElement);
+  const chrome = (tone: string) => {
+    const value = tokens.getPropertyValue(tone === 'night' ? '--night' : '--paper').trim();
+    if (themeColor && value && themeColor.content !== value) themeColor.content = value;
+  };
   // Transitions come back once the first tone is drawn (two frames, so it has been painted).
   const settle = () => requestAnimationFrame(() => requestAnimationFrame(() => header?.removeAttribute('data-tone-init')));
   if (header && sections.length && 'IntersectionObserver' in window) {
@@ -264,6 +272,7 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
           if (entry.isIntersecting) under.add(entry.target); else under.delete(entry.target);
         }
         header.dataset.tone = under.size ? 'night' : 'paper';
+        chrome(header.dataset.tone);
         if (header.hasAttribute('data-tone-init')) settle();
       }, { rootMargin: `-${mid}px 0px -${window.innerHeight - mid - 1}px 0px` });
       sections.forEach((section) => observer!.observe(section));

src/layouts/Base.astro

@@ -34,7 +34,7 @@ const altDe = new URL(switchLang(Astro.url, 'de'), Astro.site);
     {noindex && <meta name="robots" content="noindex" />}
     <meta name="color-scheme" content="light" />
     <!-- Tints the browser chrome (the iOS status bar) to match the surface the page opens on:
-         --night for a dark hero, --paper otherwise. -->
+         --night for a dark hero, --paper otherwise. The header script updates it on scroll. -->
     <meta name="theme-color" content={tone === 'night' ? '#0E100F' : '#E9E5DF'} />
     <link rel="canonical" href={canonical} />
     <link rel="alternate" hreflang="en" href={altEn} />