archilyzer

commit e78cc1e128e62b9e68ff4760f9cee86641e66fab
parent a7d8432ee5331dd706a714612dfe28dcfebd16b4
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date:   Fri, 25 Sep 2026 18:41:17 -0400

export: the hub wears the family's instrument face — archilyzer, dark by default, as the homepage does; site builds keep base/system

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Diffstat:
M
export/app/layout.tsx
 | 
31
+++++++++++++++++++++++++++----

1 file changed, 27 insertions(+), 4 deletions(-)
diff --git a/export/app/layout.tsx b/export/app/layout.tsx
@@ -5,7 +5,7 @@ import { ThemeProvider } from "yt-dlp-transcript-common/components/ThemeProvider
 import { QueryProvider } from "yt-dlp-transcript-common/components/QueryProvider";
 import { parseAccent, siteAccentVars } from "yt-dlp-transcript-common/lib/accent";
 import { currentSite } from "./lib/site";
-import { shipsPwa } from "./lib/mode";
+import { instanceMode, shipsPwa } from "./lib/mode";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import { ServiceWorkerRegister } from "./components/ServiceWorkerRegister";
@@ -16,6 +16,20 @@ import "./globals.css";
 // defaults to base.
 const FALLBACK_THEME_COLOR = "#2563eb";
 
+// The hub is the TOOL, not an archive: it wears the project's own instrument
+// face — the "archilyzer" family, dark by default — exactly as the homepage
+// does (homepage/app/layout.tsx), so the two read as one product. Every site
+// build keeps the base family and the visitor's system mode. The browser chrome
+// colour is the homepage's too (the family's dark ground, tokens.css).
+// instanceMode() is server-only; this whole file is a server component.
+const HUB_THEME = { defaultTheme: "archilyzer", defaultMode: "dark" } as const;
+const SITE_THEME = { defaultTheme: "base", defaultMode: "system" } as const;
+const HUB_THEME_COLOR = "#151b20";
+
+function themeDefaults() {
+  return instanceMode() === "hub" ? HUB_THEME : SITE_THEME;
+}
+
 export function generateMetadata(): Metadata {
   const s = currentSite();
   return {
@@ -46,7 +60,9 @@ export function generateMetadata(): Metadata {
 export function generateViewport(): Viewport {
   return {
     // Browser chrome color tracks the site's brand accent (falls back to base brand).
-    themeColor: parseAccent(currentSite().accent) ?? FALLBACK_THEME_COLOR,
+    themeColor:
+      parseAccent(currentSite().accent) ??
+      (instanceMode() === "hub" ? HUB_THEME_COLOR : FALLBACK_THEME_COLOR),
     width: "device-width",
     initialScale: 1,
     // Let the layout run under the notch/home indicator; the safe-area insets
@@ -68,6 +84,7 @@ export default async function RootLayout({
   // Per-site accent: bake the brand-color override onto <html> at prerender so
   // it's present on first paint (before any CSS/JS). Unset → family brass.
   const accentVars = siteAccentVars(currentSite().accent);
+  const theme = themeDefaults();
   return (
     <html
       lang="en"
@@ -76,9 +93,15 @@ export default async function RootLayout({
       style={accentVars ?? undefined}
     >
       <body className="min-h-full flex flex-col bg-background text-foreground font-sans">
-        <ThemeScript defaultTheme="base" defaultMode="system" />
+        <ThemeScript
+          defaultTheme={theme.defaultTheme}
+          defaultMode={theme.defaultMode}
+        />
         {shipsPwa() && <ServiceWorkerRegister />}
-        <ThemeProvider defaultTheme="base" defaultMode="system">
+        <ThemeProvider
+          defaultTheme={theme.defaultTheme}
+          defaultMode={theme.defaultMode}
+        >
           <QueryProvider>
             <Header />
             <main className="flex-1 w-full max-w-6xl mx-auto px-4 sm:px-6 py-6">