Neo: header band colour as a setting (layout.header.band) (#5862)

Below lg the band behind the header at rest is part of the content (it
scrolls away while the shy header's glass buttons stay). Its classes were a
constant, so a fork could not give it a brand colour. layout.header.band now
holds them, defaulting to the former PAGE_HEADER_BAND_CLASS; web and native
(PageHeaderBand) both read it. No change without the setting.

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

neo/packages/app/settings/layout.js

@@ -116,6 +116,12 @@ export const settingsLayout = {
             content_right: ' items-end flex-none 2xl:w-full 2xl:max-w-1/4 px-4 gap-3',
             active_item_indicator: 'absolute -bottom-2 left-0 h-0.5 rounded-full flex-none bg-ring',
             active_item_indicator_bg: 'absolute bottom-0 left-0 h-12 w-full overflow-hidden rounded-lg flex-none',
+            /**
+             * Band behind the header at rest on phones and tablets (below lg): part of the
+             * content, so it scrolls away with it while the header's glass buttons stay.
+             * A fork can give it a brand colour, e.g. 'bg-accent-500 lg:bg-transparent'.
+             */
+            band: 'bg-card sm:bg-card/80 lg:bg-transparent',
         },
         /**
          * iOS: native progressive blur behind bottom composers (post comments,

neo/packages/app/ui/molecules/header/page-header-parts.js

@@ -84,6 +84,11 @@ function settingString(value) {
  */
 export const PAGE_HEADER_BAND_CLASS = 'bg-card sm:bg-card/80 lg:bg-transparent';
 
+/** The band's classes: `layout.header.band`, else PAGE_HEADER_BAND_CLASS (a fork's brand colour). */
+export function getPageHeaderBandClass() {
+    return appSetting('layout', 'header', 'band') || PAGE_HEADER_BAND_CLASS;
+}
+
 /** How far the band reaches above the content top: covers an iOS pull-down bounce. */
 const PAGE_HEADER_BAND_OVERSCROLL = 2000;
 
@@ -96,7 +101,7 @@ export function PageHeaderBand({ height }) {
     return (
         <View
             pointerEvents="none"
-            className={`absolute left-0 right-0 ${PAGE_HEADER_BAND_CLASS}`}
+            className={`absolute left-0 right-0 ${getPageHeaderBandClass()}`}
             style={{ top: -PAGE_HEADER_BAND_OVERSCROLL, height: height + PAGE_HEADER_BAND_OVERSCROLL }}
         />
     );

neo/packages/app/ui/molecules/header/page-header.web.js

@@ -5,7 +5,7 @@ import {
     useSetScrollValue,
 } from 'app/context/jotai/layout';
 import {
-    PAGE_HEADER_BAND_CLASS,
+    getPageHeaderBandClass,
     PageHeaderBody,
     PageHeaderSmall,
     TextHeader,
@@ -181,7 +181,7 @@ export const PageHeader = ({ pageData }) => {
             {usesFixedOverlayHeader && headerHeight > 0 ? (
                 <div
                     aria-hidden
-                    className={`pointer-events-none absolute left-0 right-0 top-0 ${PAGE_HEADER_BAND_CLASS}`}
+                    className={`pointer-events-none absolute left-0 right-0 top-0 ${getPageHeaderBandClass()}`}
                     style={{ height: headerHeight }}
                 />
             ) : null}