📌 Description
ThemeProvider/lib/theme.ts correctly toggle the dark class and data-theme attribute on <html> and update the --background/--foreground CSS variables in src/app/globals.css. However, every page's top-level wrapper (src/app/page.tsx, dashboard/page.tsx, anchors/page.tsx, settlements/page.tsx, anchors/[id]/page.tsx, settlements/[id]/page.tsx, not-found.tsx, and the various loading.tsx/error.tsx files) hardcodes className="min-h-screen bg-zinc-950 text-zinc-100 font-sans", and most components (Card, SiteHeader, buttons, tables, etc.) hardcode Tailwind zinc-* dark-palette utility classes rather than using the theme CSS variables or Tailwind's dark: variant. As a result, clicking ThemeToggle in SiteHeader flips internal theme/isOverridden state and the data-theme attribute, but the actual rendered background and text colors of every page and most components never change — light mode is effectively non-functional from a visual standpoint.
🧩 Requirements and context
- At minimum, fix the page-level wrapper
divs (the bg-zinc-950 text-zinc-100 occurrences listed above) so they respond to the active theme, either by switching to the CSS variables already defined in globals.css (bg-[var(--background)] text-[var(--foreground)]) or by adding a corresponding Tailwind dark: variant pairing.
- Scope this issue to making the light theme visibly distinct and legible (page background/text color actually change); a full component-by-component light-mode audit of every
zinc-* class in Card, tables, buttons, etc. can be a separate, larger follow-up — call that out explicitly in the PR if not fully addressed.
- Verify contrast is reasonable in both themes for at least the page background/text and
SiteHeader.
🛠️ Suggested execution
- Update the hardcoded
bg-zinc-950 text-zinc-100 wrapper className across the page/loading/error files listed above to use the theme CSS variables or dark: variants instead of a single hardcoded dark palette.
- Spot-check
Card and SiteHeader for the same issue and address them if feasible within scope; otherwise document remaining components still needing light-mode treatment.
- Add or extend a test (e.g. in a representative page's test file, or a new lightweight visual-regression-style assertion) confirming the wrapper's class/style differs between
theme="light" and theme="dark".
✅ Acceptance criteria
🔒 Security notes
No new attack surface; a visual-correctness fix for an already-shipped theming feature.
📋 Guidelines
- Minimum 95% test coverage
- Clear documentation
- Timeframe: 96 hours
📌 Description
ThemeProvider/lib/theme.tscorrectly toggle thedarkclass anddata-themeattribute on<html>and update the--background/--foregroundCSS variables insrc/app/globals.css. However, every page's top-level wrapper (src/app/page.tsx,dashboard/page.tsx,anchors/page.tsx,settlements/page.tsx,anchors/[id]/page.tsx,settlements/[id]/page.tsx,not-found.tsx, and the variousloading.tsx/error.tsxfiles) hardcodesclassName="min-h-screen bg-zinc-950 text-zinc-100 font-sans", and most components (Card,SiteHeader, buttons, tables, etc.) hardcode Tailwindzinc-*dark-palette utility classes rather than using the theme CSS variables or Tailwind'sdark:variant. As a result, clickingThemeToggleinSiteHeaderflips internaltheme/isOverriddenstate and thedata-themeattribute, but the actual rendered background and text colors of every page and most components never change — light mode is effectively non-functional from a visual standpoint.🧩 Requirements and context
divs (thebg-zinc-950 text-zinc-100occurrences listed above) so they respond to the active theme, either by switching to the CSS variables already defined inglobals.css(bg-[var(--background)] text-[var(--foreground)]) or by adding a corresponding Tailwinddark:variant pairing.zinc-*class inCard, tables, buttons, etc. can be a separate, larger follow-up — call that out explicitly in the PR if not fully addressed.SiteHeader.🛠️ Suggested execution
bg-zinc-950 text-zinc-100wrapper className across the page/loading/error files listed above to use the theme CSS variables ordark:variants instead of a single hardcoded dark palette.CardandSiteHeaderfor the same issue and address them if feasible within scope; otherwise document remaining components still needing light-mode treatment.theme="light"andtheme="dark".✅ Acceptance criteria
🔒 Security notes
No new attack surface; a visual-correctness fix for an already-shipped theming feature.
📋 Guidelines