fix(newhome): follow the theme toggle; drop the chest's green halo

/newhome was pinned dark. It painted its own near-black ground over the
whole viewport and hardcoded every grey, so the theme toggle did nothing
on the route.

The chrome is expressed as the app's semantic tokens now — background,
foreground, card, muted, border — which already flip with `.dark`. Brand
accents stay literal: gold, the status greens and reds, and the rarity
colours carry meaning and read on either ground.

Two things needed more than a class swap:

- The hero headline is `bg-clip-text` over a gradient. Hardcoded to
  near-white it was invisible on a light ground, so the gradient is built
  from `var(--foreground)` and tracks the theme.
- The auction's inactive badge and the proposals' neutral vote tone were
  literal `rgba(255,255,255,…)`; both are `color-mix` against the
  foreground token now.

Set pieces stay dark on purpose — the CRT, the foil bounty table and the
globe panel are objects on a stage, like a photo or a video player, and
they read against a light page rather than inverting with it.

Also removes the green halo behind the rewards chest: the float and the
badge already say something is there, and it painted a green disc behind
a gold object.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: sktbrd

src/app/[locale]/newhome/page.tsx

@@ -68,11 +68,13 @@ export default async function NewHome({ params }: { params: Promise<{ locale: st
   ];
 
   return (
-    <div className="relative -mx-4 flex flex-1 flex-col text-neutral-50">
+    <div className="relative -mx-4 flex flex-1 flex-col text-foreground">
       {/* Full-viewport ground. A fixed backdrop rather than a 100vw block: the
           page lives inside the layout's centred `main`, and widening past it
-          would add a horizontal scrollbar on every platform that reserves one. */}
-      <div aria-hidden className="fixed inset-0 -z-10 bg-[#0a0a0a]" />
+          would add a horizontal scrollbar on every platform that reserves one.
+          `bg-background` rather than a hardcoded near-black: this route used to
+          be pinned dark and ignored the theme toggle entirely. */}
+      <div aria-hidden className="fixed inset-0 -z-10 bg-background" />
 
       <HeroSection stats={heroStats} />
       <TVHeroSection />

src/components/newhome/AuctionPanel.tsx

@@ -130,7 +130,10 @@ export function AuctionPanel() {
           style={
             isLive
               ? { backgroundImage: GOLD, color: "#1a1205" }
-              : { background: "rgba(255,255,255,.08)", color: "#a3a3a3" }
+              : {
+                  background: "color-mix(in oklab,var(--foreground) 8%,transparent)",
+                  color: "var(--muted-foreground)",
+                }
           }
         >
           <span
@@ -144,24 +147,26 @@ export function AuctionPanel() {
           />
           {isLive ? t("liveAuction") : t("awaitingSettlement")}
         </span>
-        <div className="flex gap-[3px] font-mono text-[15px] font-bold text-neutral-50">
+        <div className="flex gap-[3px] font-mono text-[15px] font-bold text-foreground">
           {countdown ? (
             [countdown.hours, countdown.minutes, countdown.seconds].map((part, i) => (
               <span key={i} className="flex items-center gap-[3px]">
-                {i > 0 && <span className="text-neutral-500">:</span>}
+                {i > 0 && <span className="text-muted-foreground/70">:</span>}
                 <span className="rounded-[5px] bg-black px-[7px] py-[3px] tabular-nums">
                   {part}
                 </span>
               </span>
             ))
           ) : (
-            <span className="rounded-[5px] bg-black px-[7px] py-[3px] text-neutral-600">--</span>
+            <span className="rounded-[5px] bg-foreground/10 px-[7px] py-[3px] text-muted-foreground">
+              --
+            </span>
           )}
         </div>
       </div>
 
       {/* The Gnar */}
-      <div className="relative aspect-square overflow-hidden rounded-[14px] border-2 border-[#f7c948]/55 bg-neutral-800 shadow-[0_0_0_5px_rgba(247,201,72,.08),inset_0_0_34px_rgba(245,133,31,.18)]">
+      <div className="relative aspect-square overflow-hidden rounded-[14px] border-2 border-[#f7c948]/55 bg-muted shadow-[0_0_0_5px_rgba(247,201,72,.08),inset_0_0_34px_rgba(245,133,31,.18)]">
         <GnarImageTile tokenId={Number(tokenId || 0)} imageUrl={imageUrl} />
         {tokenId != null && (
           <span className="absolute left-2.5 top-2.5 rounded-lg bg-[#0a0908]/70 px-2.5 py-1 font-mono text-xs font-bold text-[#f7c948] backdrop-blur-sm">
@@ -171,7 +176,7 @@ export function AuctionPanel() {
         {/* An auction that closed without a bid reports the zero address as its
             "winner" — crowning that reads as a real leader, so it is dropped. */}
         {displayBidder && !ZERO_BIDDER.test(displayBidder) && (
-          <span className="absolute right-2.5 top-2.5 flex items-center gap-1.5 rounded-lg bg-[#0a0908]/70 px-2.5 py-1 text-[11px] font-bold text-neutral-50 backdrop-blur-sm">
+          <span className="absolute right-2.5 top-2.5 flex items-center gap-1.5 rounded-lg bg-[#0a0908]/70 px-2.5 py-1 text-[11px] font-bold text-foreground backdrop-blur-sm">
             👑 {truncateAddress(displayBidder)}
           </span>
         )}
@@ -180,7 +185,7 @@ export function AuctionPanel() {
       {/* Current bid + time elapsed */}
       <div>
         <div className="mb-[7px] flex items-baseline justify-between gap-3">
-          <span className="shrink-0 text-[11px] font-semibold uppercase tracking-[0.14em] text-neutral-400">
+          <span className="shrink-0 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
             {t("currentBid")}
           </span>
           <span
@@ -190,14 +195,14 @@ export function AuctionPanel() {
             {displayBid ? Number(displayBid).toFixed(3) : "0.000"} ETH
           </span>
         </div>
-        <div className="flex h-2.5 overflow-hidden rounded-full border border-white/[0.06] bg-neutral-800">
+        <div className="flex h-2.5 overflow-hidden rounded-full border border-border bg-muted">
           <span
             className="block h-full rounded-full bg-[linear-gradient(90deg,#f59e0b,#FF2D2D)] transition-[width] duration-1000"
             style={{ width: `${elapsedPct}%` }}
           />
         </div>
         {leadingComment && displayBidder && !ZERO_BIDDER.test(displayBidder) && (
-          <p className="mt-1.5 text-[11.5px] italic text-neutral-400">
+          <p className="mt-1.5 text-[11.5px] italic text-muted-foreground">
             “{leadingComment}” — {truncateAddress(displayBidder ?? "")}
           </p>
         )}
@@ -206,7 +211,7 @@ export function AuctionPanel() {
       {/* Leaderboard */}
       {bids.length > 0 && (
         <div className="flex flex-col gap-1.5 rounded-xl border border-white/[0.07] bg-black/25 p-3">
-          <span className="text-[10.5px] font-bold uppercase tracking-[0.14em] text-neutral-400">
+          <span className="text-[10.5px] font-bold uppercase tracking-[0.14em] text-muted-foreground">
             {t("leaderboard", { count: bids.length })}
           </span>
           {bids.slice(0, 4).map((bid, i) => (
@@ -222,10 +227,10 @@ export function AuctionPanel() {
                 className="size-[18px] shrink-0 rounded-full"
                 style={{ backgroundImage: avatarGradient(bid.bidder) }}
               />
-              <span className="flex-1 truncate text-[12.5px] font-medium text-neutral-200">
+              <span className="flex-1 truncate text-[12.5px] font-medium text-foreground/85">
                 {truncateAddress(bid.bidder)}
               </span>
-              <span className="font-mono text-[12.5px] font-bold tabular-nums text-neutral-50">
+              <span className="font-mono text-[12.5px] font-bold tabular-nums text-foreground">
                 {Number(formatEther(BigInt(bid.amount))).toFixed(3)} Ξ
               </span>
             </div>
@@ -245,7 +250,7 @@ export function AuctionPanel() {
         <AuctionSettleButton isWinner={!!isWinner} />
       )}
 
-      <p className="text-xs leading-[1.5] text-neutral-500">{t("auctionFootnote")}</p>
+      <p className="text-xs leading-[1.5] text-muted-foreground/70">{t("auctionFootnote")}</p>
     </div>
   );
 }

src/components/newhome/BountiesSection.tsx

@@ -149,29 +149,29 @@ export function BountiesSection({
         />
 
         {isLoading && hand.length === 0 ? (
-          <div className="flex h-[420px] items-center justify-center rounded-[22px] border border-white/[0.07] bg-[#060606] font-mono text-sm text-neutral-500">
+          <div className="flex h-[420px] items-center justify-center rounded-[22px] border border-border bg-muted/30 font-mono text-sm text-muted-foreground/70">
             …
           </div>
         ) : (
           <BountyCardFan cards={hand} />
         )}
 
-        <div className="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-white/10 bg-neutral-900 px-6 py-5">
-          <p className="text-pretty text-[14.5px] text-neutral-400">
-            {t("flowPrefix")} <span className="font-semibold text-neutral-50">{t("flow")}</span>
+        <div className="flex flex-wrap items-center justify-between gap-4 rounded-xl border border-border bg-card px-6 py-5">
+          <p className="text-pretty text-[14.5px] text-muted-foreground">
+            {t("flowPrefix")} <span className="font-semibold text-foreground">{t("flow")}</span>
           </p>
           <div className="flex gap-2">
             <Link
               href="/community/bounties"
-              className="rounded-lg bg-neutral-50 px-4.5 py-2.5 text-sm font-semibold text-neutral-900 hover:opacity-90"
+              className="rounded-lg bg-foreground px-4.5 py-2.5 text-sm font-semibold text-background hover:opacity-90"
             >
               {t("create")}
             </Link>
             <a
               href="https://poidh.xyz"
               target="_blank"
               rel="noopener noreferrer"
-              className="rounded-lg border border-white/10 bg-white/[0.04] px-4.5 py-2.5 text-sm font-medium text-neutral-50 hover:bg-neutral-800"
+              className="rounded-lg border border-border bg-muted/40 px-4.5 py-2.5 text-sm font-medium text-foreground hover:bg-accent"
             >
               {t("viewPoidh")}
             </a>

src/components/newhome/FeedPanel.tsx

@@ -68,7 +68,7 @@ export async function FeedPanel({ events, limit = 5 }: { events: FeedEvent[]; li
   return (
     <div className="flex flex-col gap-2.5">
       <div className="flex items-center justify-between">
-        <span className="flex items-center gap-1.5 text-base font-bold text-neutral-50">
+        <span className="flex items-center gap-1.5 text-base font-bold text-foreground">
           {t("liveFeed")}
           <span
             aria-hidden
@@ -78,14 +78,14 @@ export async function FeedPanel({ events, limit = 5 }: { events: FeedEvent[]; li
         </span>
         <Link
           href="/feed"
-          className="text-[12.5px] font-medium text-neutral-400 hover:text-neutral-50"
+          className="text-[12.5px] font-medium text-muted-foreground hover:text-foreground"
         >
           {t("viewAll")}
         </Link>
       </div>
 
       {rows.length === 0 ? (
-        <p className="py-4 text-sm text-neutral-500">{t("feedEmpty")}</p>
+        <p className="py-4 text-sm text-muted-foreground/70">{t("feedEmpty")}</p>
       ) : (
         rows.map((row) => (
           <div key={row.id} className="flex flex-col gap-2 border-t border-white/[0.07] py-3">
@@ -95,14 +95,14 @@ export async function FeedPanel({ events, limit = 5 }: { events: FeedEvent[]; li
                 className="size-6 shrink-0 rounded-full"
                 style={{ backgroundImage: avatarGradient(row.actor) }}
               />
-              <span className="font-mono text-[13px] font-semibold text-neutral-50">
+              <span className="font-mono text-[13px] font-semibold text-foreground">
                 {truncateAddress(row.actor)}
               </span>
-              <span className="ml-auto shrink-0 text-[11.5px] text-neutral-500">
+              <span className="ml-auto shrink-0 text-[11.5px] text-muted-foreground/70">
                 {shortAge(row.timestamp * 1000, now)}
               </span>
             </div>
-            <p className="pl-[34px] text-[13.5px] leading-[1.5] text-neutral-400">
+            <p className="pl-[34px] text-[13.5px] leading-[1.5] text-muted-foreground">
               {row.verb === "created" ? (
                 t("feedCreated")
               ) : (
@@ -116,7 +116,7 @@ export async function FeedPanel({ events, limit = 5 }: { events: FeedEvent[]; li
               )}{" "}
               <Link
                 href={`/proposals/base/${row.proposalNumber}`}
-                className="font-bold text-neutral-50 hover:underline"
+                className="font-bold text-foreground hover:underline"
               >
                 #{row.proposalNumber} {row.proposalTitle}
               </Link>

src/components/newhome/GovSection.tsx

@@ -50,19 +50,19 @@ export async function GovSection() {
       <div className={`${SHELL} flex flex-col gap-6 px-0`}>
         <div className="flex flex-col gap-2.5">
           <Eyebrow>{t("eyebrow")}</Eyebrow>
-          <h2 className="text-[clamp(1.875rem,3.4vw,2.75rem)] font-extrabold leading-[1.05] tracking-[-0.025em] text-neutral-50">
+          <h2 className="text-[clamp(1.875rem,3.4vw,2.75rem)] font-extrabold leading-[1.05] tracking-[-0.025em] text-foreground">
             {t("title")}
           </h2>
         </div>
 
         <div className="grid grid-cols-1 items-stretch gap-5 lg:grid-cols-2">
           <AuctionPanel />
 
-          <div className="flex h-full min-w-0 flex-col gap-4 rounded-2xl border border-white/10 bg-neutral-900 p-5">
+          <div className="flex h-full min-w-0 flex-col gap-4 rounded-2xl border border-border bg-card p-5">
             <Suspense fallback={<RecentProposalsSkeleton />}>
               <Proposals />
             </Suspense>
-            <div className="h-px bg-white/[0.08]" />
+            <div className="h-px bg-border" />
             <Suspense fallback={<ActivityFeedSkeleton responsive />}>
               <Feed />
             </Suspense>

src/components/newhome/HeroSection.tsx

@@ -30,25 +30,34 @@ export async function HeroSection({ stats }: { stats: HeroStat[] }) {
         {/* Sized down from the display setting the shorter headline used: this
             sentence is twice the length, and at the old clamp it ran to five
             lines before the fold. `text-balance` keeps the wrap even. */}
-        <h1 className="text-balance bg-[linear-gradient(90deg,#fafafa,rgba(250,250,250,.8))] bg-clip-text text-[clamp(2.25rem,5.5vw,4.75rem)] font-extrabold leading-[1] tracking-[-0.03em] text-transparent">
+        <h1
+          className="text-balance bg-clip-text text-[clamp(2.25rem,5.5vw,4.75rem)] font-extrabold leading-[1] tracking-[-0.03em] text-transparent"
+          // Driven off the foreground token, not a literal near-white: clipped
+          // to the text, a hardcoded white gradient is invisible on a light
+          // ground.
+          style={{
+            backgroundImage:
+              "linear-gradient(90deg,var(--foreground),color-mix(in oklab,var(--foreground) 78%,transparent))",
+          }}
+        >
           {t("title")}
         </h1>
 
         {/* HeroTagline reserves its own height against layout shift. */}
-        <p className="max-w-[32em] text-pretty text-[clamp(1.0625rem,2.2vw,1.5rem)] leading-[1.45] text-neutral-400">
+        <p className="max-w-[32em] text-pretty text-[clamp(1.0625rem,2.2vw,1.5rem)] leading-[1.45] text-muted-foreground">
           <HeroTagline />
         </p>
 
         <div className="mt-1.5 flex flex-wrap justify-center gap-2.5">
           <Link
             href="/stake"
-            className="whitespace-nowrap rounded-lg bg-neutral-50 px-5 py-3 text-[14.5px] font-semibold text-neutral-900 hover:opacity-90"
+            className="whitespace-nowrap rounded-lg bg-foreground px-5 py-3 text-[14.5px] font-semibold text-background hover:opacity-90"
           >
             {t("ctaStake")}
           </Link>
           <Link
             href="/community/bounties"
-            className="whitespace-nowrap rounded-lg border border-white/10 bg-white/[0.04] px-5 py-3 text-[14.5px] font-medium text-neutral-50 hover:bg-neutral-800"
+            className="whitespace-nowrap rounded-lg border border-border bg-muted/40 px-5 py-3 text-[14.5px] font-medium text-foreground hover:bg-accent"
           >
             {t("ctaBounties")}
           </Link>
@@ -65,8 +74,8 @@ export async function HeroSection({ stats }: { stats: HeroStat[] }) {
                   <Icon className="size-4" />
                 </span>
                 <span className="flex flex-col whitespace-nowrap text-left">
-                  <span className="text-[15px] font-semibold text-neutral-50">{s.value}</span>
-                  <span className="text-xs text-neutral-400">{s.label}</span>
+                  <span className="text-[15px] font-semibold text-foreground">{s.value}</span>
+                  <span className="text-xs text-muted-foreground">{s.label}</span>
                 </span>
               </div>
             );

src/components/newhome/HeroTagline.tsx

@@ -26,7 +26,7 @@ export function HeroTagline() {
       <TextType
         text={[...descriptions]}
         as="span"
-        className="col-start-1 row-start-1 font-medium text-neutral-50"
+        className="col-start-1 row-start-1 font-medium text-foreground"
         typingSpeed={75}
         deletingSpeed={50}
         pauseDuration={1800}

src/components/newhome/ProposalsPanel.tsx

@@ -15,7 +15,7 @@ const STATUS_TONE: Partial<Record<ProposalStatus, [string, string, string]>> = {
 const NEUTRAL_TONE: [string, string, string] = [
   "rgba(38,38,38,.8)",
   "#a3a3a3",
-  "rgba(255,255,255,.1)",
+  "color-mix(in oklab,var(--foreground) 10%,transparent)",
 ];
 
 /**
@@ -60,10 +60,10 @@ export async function ProposalsPanel({ proposals }: { proposals: Proposal[] }) {
   return (
     <div className="flex flex-col gap-2.5">
       <div className="flex items-center justify-between">
-        <span className="text-base font-bold text-neutral-50">{t("recentProposals")}</span>
+        <span className="text-base font-bold text-foreground">{t("recentProposals")}</span>
         <Link
           href="/proposals"
-          className="text-[12.5px] font-medium text-neutral-400 hover:text-neutral-50"
+          className="text-[12.5px] font-medium text-muted-foreground hover:text-foreground"
         >
           {t("viewAll")}
         </Link>
@@ -82,22 +82,24 @@ export async function ProposalsPanel({ proposals }: { proposals: Proposal[] }) {
           <Link
             key={p.proposalId}
             href={`/proposals/base/${p.proposalNumber}`}
-            className="flex flex-col gap-2 rounded-[10px] border border-white/[0.08] bg-neutral-800/35 px-3.5 py-3 hover:border-white/20"
+            className="flex flex-col gap-2 rounded-[10px] border border-border bg-muted/40 px-3.5 py-3 hover:border-foreground/25"
           >
             <div className="flex items-center gap-2.5">
-              <span className="font-mono text-[11.5px] text-neutral-500">#{p.proposalNumber}</span>
+              <span className="font-mono text-[11.5px] text-muted-foreground/70">
+                #{p.proposalNumber}
+              </span>
               <span
                 className="rounded-md border px-2 py-px text-[11.5px] font-medium"
                 style={{ background: bg, color: fg, borderColor: border }}
               >
                 {p.status}
               </span>
-              <span className="ml-auto shrink-0 text-[11.5px] text-neutral-500">
+              <span className="ml-auto shrink-0 text-[11.5px] text-muted-foreground/70">
                 {time ? t(time.key, time.values) : null}
               </span>
             </div>
 
-            <span className="line-clamp-2 text-sm font-semibold leading-[1.35] text-neutral-50">
+            <span className="line-clamp-2 text-sm font-semibold leading-[1.35] text-foreground">
               {p.title}
             </span>
 
@@ -118,7 +120,7 @@ export async function ProposalsPanel({ proposals }: { proposals: Proposal[] }) {
               )}
             </div>
 
-            <div className="flex gap-3.5 text-[11.5px] text-neutral-400">
+            <div className="flex gap-3.5 text-[11.5px] text-muted-foreground">
               <span style={{ color: VOTE_COLOR.for }}>{t("for", { count: p.forVotes })}</span>
               <span style={{ color: VOTE_COLOR.against }}>
                 {t("against", { count: p.againstVotes })}