cmd/foodster/static/app.css

@@ -20,6 +20,11 @@
   --kala:   light-dark(#25688F, #63AAD8);
   --kasvis: light-dark(#457A3C, #82BE7A);
 
+  /* Its own name rather than reusing --card, so the header can be recoloured
+     later without dragging every card with it. Keep the theme-color meta tags
+     in views.templ in step: those need literal hex. */
+  --header: light-dark(#FFFFFF, #1C1E22);
+
   --tap: 48px; /* minimum touch target */
 }
 
@@ -43,11 +48,15 @@ button, input, select { font: inherit; }
 :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
 @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
 
+/* The header is the brand and the theme toggle, and nothing else. The page
+   title below it is content, so it stays on the page background. */
 .brandbar {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 16px;
+  background: var(--header);
+  border-bottom: 1px solid var(--line);
 }
 .brand {
   display: flex;
@@ -84,9 +93,7 @@ html[data-theme="dark"]  .themetoggle .i-sun  { display: none; }
 html[data-theme="light"] .themetoggle .i-moon { display: none; }
 
 .appbar {
-  background: var(--paper);
+  padding: 16px 16px 4px;
-  border-bottom: 1px solid var(--line);
-  padding: 2px 16px 12px;
 }
 .appbar h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
 .appbar .meta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

cmd/foodster/views.templ

@@ -78,8 +78,10 @@ templ page(title, current string) {
 			<meta charset="utf-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
 			<meta name="color-scheme" content="light dark"/>
-			<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ECEDE8"/>
+			// Matches --header in app.css so the browser chrome continues the
-			<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#121316"/>
+			// header rather than butting against it.
+			<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF"/>
+			<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1C1E22"/>
 			<title>{ title }</title>
 			<link rel="icon" href="/static/favicon.svg" type="image/svg+xml"/>
 			<link rel="apple-touch-icon" href="/static/apple-touch-icon.png"/>