From 57a4f358d15409e22b585cd3fa3b387d29a0b067 Mon Sep 17 00:00:00 2001
From: Mark Henderson <mark@getacquired.com>
Date: Fri, 6 Mar 2026 10:47:45 -0800
Subject: [PATCH] QA: fix dark/light mode rendering across all scaffolds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aceternity (critical — light mode was completely broken):
- text/muted/card/border now respond to isDark instead of only forcedLight
- gradient-text h1 was white→transparent gradient (invisible on light bg);
  now switches to indigo gradient in light mode
- Minimal nav background was hardcoded dark; now adapts per isDark
- Floating nav background adapts per isDark
- "Browse components" button bg adapts per isDark
- 9x hardcoded color:"#fff" on content text replaced with color:text
  (lamp h1, typewriter word spans, feature titles, moving card names,
   bento MRR/Users/Uptime values, pricing prices, CTA heading, nav logo)

DaisyUI:
- noise background option now renders a visible SVG fractalNoise pattern

Made-with: Cursor
---
 components/design-scaffolds/marketing.tsx | 44 +++++++++++++----------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/components/design-scaffolds/marketing.tsx b/components/design-scaffolds/marketing.tsx
index e334ba5..d1e96ff 100644
--- a/components/design-scaffolds/marketing.tsx
+++ b/components/design-scaffolds/marketing.tsx
@@ -214,6 +214,9 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
       {bgStyle === "pattern" && (
         <div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${p}22 1px, transparent 1px)`, backgroundSize: "20px 20px", pointerEvents: "none", zIndex: 0 }} />
       )}
+      {bgStyle === "noise" && (
+        <div style={{ position: "absolute", inset: 0, backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")`, backgroundSize: "200px", opacity: isDark ? 0.06 : 0.04, pointerEvents: "none", zIndex: 0 }} />
+      )}
 
       {/* Nav */}
       {navStyle === "pill" ? (
@@ -505,10 +508,11 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
   const forceShader = bgStyle === "shader";
 
   const bg    = forcedBlack ? "#000" : forcedLight ? "#f8f9ff" : forceShader ? "#06010e" : isDark ? ACE_BG_BASE : ACE_BG_LIGHT;
-  const text  = (forcedLight) ? "#1e1b4b" : "#fff";
-  const muted = forcedLight ? "#6b7280" : "rgba(255,255,255,0.42)";
-  const card  = forcedLight ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.04)";
-  const border= forcedLight ? "rgba(0,0,0,0.09)" : "rgba(255,255,255,0.08)";
+  // text/muted/card/border must respond to isDark (not just forcedLight=aurora)
+  const text  = isDark ? "#fff" : "#1e1b4b";
+  const muted = isDark ? "rgba(255,255,255,0.42)" : "#6b7280";
+  const card  = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.04)";
+  const border= isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.1)";
 
   const BgLayer = () => {
     if (bgStyle === "gradient") return (
@@ -623,7 +627,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
       {/* Nav */}
       {navStyle === "floating" ? (
         <div style={{ display: "flex", justifyContent: "center", padding: "20px 48px", position: "relative", zIndex: 10 }}>
-          <nav style={{ display: "flex", alignItems: "center", gap: 32, padding: "14px 32px", borderRadius: 50, background: "rgba(255,255,255,0.06)", border: `1px solid ${p}40`, backdropFilter: "blur(14px)" }}>
+          <nav style={{ display: "flex", alignItems: "center", gap: 32, padding: "14px 32px", borderRadius: 50, background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)", border: `1px solid ${p}40`, backdropFilter: "blur(14px)" }}>
             <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
               <div style={{ width: 26, height: 26, borderRadius: 6, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
               <span style={{ fontWeight: 800, fontSize: 17, color: text }}>Acme</span>
@@ -633,10 +637,10 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
           </nav>
         </div>
       ) : (
-        <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 48px", backdropFilter: "blur(8px)", background: "rgba(5,0,16,0.5)", position: "relative", zIndex: 10 }}>
+        <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 48px", backdropFilter: "blur(8px)", background: isDark ? "rgba(5,0,16,0.55)" : "rgba(255,255,255,0.8)", position: "relative", zIndex: 10 }}>
           <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
             <div style={{ width: 28, height: 28, borderRadius: 7, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
-            <span style={{ fontWeight: 800, fontSize: 17, color: "#fff" }}>Acme</span>
+            <span style={{ fontWeight: 800, fontSize: 17, color: text }}>Acme</span>
           </div>
           <div style={{ display: "flex", gap: 32, fontSize: 15, color: muted }}>
             {["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)}
@@ -653,7 +657,9 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
           </div>
           <h1 style={{
             fontSize: 80, fontWeight: 900, marginBottom: 20, lineHeight: 0.98, letterSpacing: "-0.05em",
-            background: "linear-gradient(180deg, #fff 35%, rgba(255,255,255,0.3) 100%)",
+            background: isDark
+              ? "linear-gradient(180deg, #fff 35%, rgba(255,255,255,0.3) 100%)"
+              : "linear-gradient(180deg, #1e1b4b 30%, #6d28d9 100%)",
             WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
           }}>
             Build the future<br />of the web.
@@ -663,7 +669,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
           </p>
           <div style={{ display: "flex", gap: 14, justifyContent: "center" }}>
             <button style={{ height: 52, padding: "0 36px", borderRadius: 10, fontSize: 16, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 8px 28px ${p}45` }}>Get started →</button>
-            <button style={{ height: 52, padding: "0 28px", borderRadius: 10, fontSize: 16, color: muted, border: `1px solid ${border}`, background: "rgba(255,255,255,0.04)", cursor: "pointer", backdropFilter: "blur(4px)" }}>Browse components</button>
+            <button style={{ height: 52, padding: "0 28px", borderRadius: 10, fontSize: 16, color: muted, border: `1px solid ${border}`, background: isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)", cursor: "pointer", backdropFilter: "blur(4px)" }}>Browse components</button>
           </div>
         </div>
       )}
@@ -673,7 +679,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
         <div style={{ padding: "64px 48px 48px", textAlign: "center", position: "relative", zIndex: 1 }}>
           <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: "65%", height: 160, background: `conic-gradient(from 263deg at 50% 0%, transparent 0deg, ${p}35 22deg, ${p}20 44deg, transparent 66deg)`, pointerEvents: "none" }} />
           <div style={{ width: 160, height: 2, background: `linear-gradient(90deg, transparent, ${p}, transparent)`, margin: "0 auto 32px", animation: "ace-lamp 3.5s ease-in-out infinite" }} />
-          <h1 style={{ fontSize: 72, fontWeight: 900, marginBottom: 18, color: "#fff", lineHeight: 1.02, letterSpacing: "-0.045em" }}>
+          <h1 style={{ fontSize: 72, fontWeight: 900, marginBottom: 18, color: text, lineHeight: 1.02, letterSpacing: "-0.045em" }}>
             Build the future<br />of the web.
           </h1>
           <p style={{ fontSize: 18, color: muted, maxWidth: 480, margin: "0 auto 28px", lineHeight: 1.75 }}>
@@ -689,8 +695,8 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
           <div style={{ fontSize: 14, letterSpacing: "0.2em", color: `${p}90`, marginBottom: 24, textTransform: "uppercase", fontWeight: 600 }}>The future of the web</div>
           <h1 style={{ fontSize: 76, fontWeight: 900, marginBottom: 20, lineHeight: 0.98, letterSpacing: "-0.05em" }}>
             <span style={{ background: `linear-gradient(135deg,${p},#3b82f6)`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>Build</span>
-            {" "}<span style={{ color: "#fff" }}>the future</span><br />
-            <span style={{ color: "#fff" }}>of the web</span>
+            {" "}<span style={{ color: text }}>the future</span><br />
+            <span style={{ color: text }}>of the web</span>
             <span style={{ display: "inline-block", width: 4, height: "0.9em", background: p, verticalAlign: "text-bottom", marginLeft: 4, animation: "ace-cursor 0.85s step-end infinite", borderRadius: 1 }} />
           </h1>
           <p style={{ fontSize: 18, color: muted, maxWidth: 480, margin: "0 auto 28px", lineHeight: 1.75 }}>
@@ -720,7 +726,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
               <div style={{ width: 48, height: 48, borderRadius: 12, background: `${p}18`, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                 <Ico d={ICO[f.icon as keyof typeof ICO]} color={p} size={22} />
               </div>
-              <p style={{ fontSize: 17, fontWeight: 700, color: "#fff", marginBottom: 8 }}>{f.title}</p>
+              <p style={{ fontSize: 17, fontWeight: 700, color: text, marginBottom: 8 }}>{f.title}</p>
               <p style={{ fontSize: 14, color: muted, lineHeight: 1.7 }}>{f.desc}</p>
             </div>
           ))}
@@ -742,7 +748,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
                 ].map(t => (
                   <div key={t.name + pass} style={{ minWidth: 280, flexShrink: 0, padding: "22px 24px", borderRadius: 16, background: card, border: `1px solid ${p}22`, backdropFilter: "blur(4px)" }}>
                     <p style={{ fontSize: 14, color: muted, marginBottom: 14, lineHeight: 1.7 }}>{t.text}</p>
-                    <p style={{ fontSize: 13, fontWeight: 700, color: "#fff" }}>— {t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></p>
+                    <p style={{ fontSize: 13, fontWeight: 700, color: text }}>— {t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></p>
                   </div>
                 ))}
               </div>
@@ -756,7 +762,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
           <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gridTemplateRows: "auto auto", gap: 16 }}>
             <div style={{ padding: "28px", borderRadius: 18, background: card, border: `1px solid ${p}18`, gridRow: "1 / 3", backdropFilter: "blur(4px)" }}>
               <p style={{ fontSize: 13, color: muted, marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.1em" }}>Revenue</p>
-              <p style={{ fontSize: 36, fontWeight: 900, color: "#fff", marginBottom: 20, letterSpacing: "-0.02em" }}>$128k MRR</p>
+              <p style={{ fontSize: 36, fontWeight: 900, color: text, marginBottom: 20, letterSpacing: "-0.02em" }}>$128k MRR</p>
               <svg viewBox="0 0 160 70" style={{ width: "100%", overflow: "visible" }}>
                 <defs>
                   <linearGradient id="bg-chart" x1="0" y1="0" x2="0" y2="1">
@@ -774,11 +780,11 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
             </div>
             <div style={{ padding: "24px", borderRadius: 18, background: `${p}18`, border: `1px solid ${p}30`, backdropFilter: "blur(4px)" }}>
               <p style={{ fontSize: 13, color: muted, marginBottom: 6 }}>Users</p>
-              <p style={{ fontSize: 36, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>120k+</p>
+              <p style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.02em" }}>120k+</p>
             </div>
             <div style={{ padding: "24px", borderRadius: 18, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)", gridColumn: "2 / 4" }}>
               <p style={{ fontSize: 13, color: muted, marginBottom: 6 }}>Uptime</p>
-              <p style={{ fontSize: 36, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>99.99%</p>
+              <p style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.02em" }}>99.99%</p>
             </div>
           </div>
         </div>
@@ -790,7 +796,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
             {[{ plan: "Starter", price: "Free",   hi: false }, { plan: "All-Access", price: "$299",  hi: true }, { plan: "Team",    price: "Custom", hi: false }].map(pl => (
               <div key={pl.plan} style={{ flex: 1, padding: "28px 24px", borderRadius: 18, background: pl.hi ? `linear-gradient(160deg, ${p}30, #3b82f620)` : card, border: `1px solid ${pl.hi ? `${p}55` : border}`, textAlign: "center", backdropFilter: "blur(4px)" }}>
                 <p style={{ fontSize: 14, color: pl.hi ? `${p}dd` : muted, marginBottom: 8 }}>{pl.plan}</p>
-                <p style={{ fontSize: 42, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>{pl.price}</p>
+                <p style={{ fontSize: 42, fontWeight: 900, color: text, letterSpacing: "-0.02em" }}>{pl.price}</p>
                 {pl.hi && <div style={{ marginTop: 8, fontSize: 13, color: `${p}aa` }}>lifetime access</div>}
               </div>
             ))}
@@ -800,7 +806,7 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
 
       {comps.includes("cta") && (
         <div style={{ margin: "0 48px 80px", padding: "60px 48px", borderRadius: 20, background: `linear-gradient(135deg, ${p}18, #3b82f614)`, border: `1px solid ${p}28`, textAlign: "center", position: "relative", zIndex: 1, backdropFilter: "blur(6px)" }}>
-          <p style={{ fontSize: 42, fontWeight: 900, color: "#fff", marginBottom: 12, letterSpacing: "-0.02em" }}>Start building today</p>
+          <p style={{ fontSize: 42, fontWeight: 900, color: text, marginBottom: 12, letterSpacing: "-0.02em" }}>Start building today</p>
           <p style={{ fontSize: 17, color: muted, marginBottom: 28 }}>Join 120,000+ developers worldwide.</p>
           <button style={{ height: 52, padding: "0 34px", borderRadius: 10, fontSize: 16, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 6px 24px ${p}40` }}>Get All-Access →</button>
         </div>