From af0fdb1667718fe2ee0119eaa260b0b60fa69872 Mon Sep 17 00:00:00 2001
From: Umeokonkwo Samuel <umeokonkwosamuel@gmail.com>
Date: Mon, 28 Sep 2026 00:57:28 +0100
Subject: [PATCH] fix: apply theme tokens to page surfaces

Closes #962
---
 app/(dashboard)/layout.tsx                   |  2 +-
 app/globals.css                              |  5 +++--
 app/layout.tsx                               |  2 +-
 app/settings/language/page.tsx               |  2 +-
 app/styles/themes/high-contrast.test.tsx     | 20 ++++++++++++++++++++
 components/navbar/MobileBottomTabs.tsx       |  2 +-
 components/navbar/mobile-drawer.tsx          |  2 +-
 components/patterns/DisputeActionPattern.tsx |  2 +-
 8 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index c665c551..54f37c6f 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -43,7 +43,7 @@ export default function DashboardLayout({
   };
 
   return (
-    <div className="flex min-h-screen flex-col bg-[#060e20]">
+    <div className="flex min-h-screen flex-col bg-background">
       <ConnectWalletModal
         isOpen={isWalletModalOpen}
         onOpenChange={setIsWalletModalOpen}
diff --git a/app/globals.css b/app/globals.css
index 0a897442..537a8e6c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -189,8 +189,9 @@ body {
     --outcome-no-foreground: 0 0% 100%;
   }
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
+    /* Preserve the existing application navy surface and pale text. */
+    --background: 222 68% 7.45%;
+    --foreground: 227 100% 93.53%;
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 3.9%;
diff --git a/app/layout.tsx b/app/layout.tsx
index 44e22b0e..678bcfa4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -38,7 +38,7 @@ export default function RootLayout({
       <head>
         <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
       </head>
-      <body className={`${inter.variable} ${spaceGrotesk.variable} ${inter.className} bg-[#060e20] text-[#dee5ff] min-h-screen selection:bg-cyan-400/30`}>
+      <body className={`${inter.variable} ${spaceGrotesk.variable} ${inter.className} bg-background text-foreground min-h-screen selection:bg-cyan-400/30`}>
         {/* Skip-to-content: first focusable element in every page — WCAG 2.4.1 */}
         <SkipToContent />
         <Providers>{children}</Providers>
diff --git a/app/settings/language/page.tsx b/app/settings/language/page.tsx
index ca05578f..807caae4 100644
--- a/app/settings/language/page.tsx
+++ b/app/settings/language/page.tsx
@@ -23,7 +23,7 @@ export default function LanguageSettingsPage() {
   const { t } = useTranslation();
 
   return (
-    <main className="min-h-screen bg-[#060e20] text-[#dee5ff] px-4 py-10 sm:px-8">
+    <main className="min-h-screen bg-background text-foreground px-4 py-10 sm:px-8">
       <div className="mx-auto max-w-xl">
         {/* Page heading */}
         <h1 className="text-2xl font-semibold mb-1">
diff --git a/app/styles/themes/high-contrast.test.tsx b/app/styles/themes/high-contrast.test.tsx
index 4cb6d8db..089447b0 100644
--- a/app/styles/themes/high-contrast.test.tsx
+++ b/app/styles/themes/high-contrast.test.tsx
@@ -1,6 +1,8 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
 import { ThemeProvider } from "@/components/theme-provider"
+import { readFileSync } from "node:fs"
+import { join } from "node:path"
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -31,6 +33,24 @@ describe("High-Contrast Theme", () => {
     document.documentElement.className = ""
   })
 
+  it.each([
+    ["light", "0 0% 100%", "0 0% 3.9%"],
+    ["dark", "222 68% 7.45%", "227 100% 93.53%"],
+    ["high-contrast", "0 0% 0%", "0 0% 100%"],
+  ])("body uses theme background and foreground tokens in %s mode", (theme, background, foreground) => {
+    renderWithTheme(theme, <div data-testid="themed-body" className="bg-background text-foreground" />)
+
+    const body = screen.getByTestId("themed-body")
+    expect(body).toHaveClass("bg-background", "text-foreground")
+    expect(document.documentElement).toHaveClass(theme)
+
+    const globals = readFileSync(join(process.cwd(), "app/globals.css"), "utf8")
+    const highContrast = readFileSync(join(process.cwd(), "app/styles/themes/high-contrast.css"), "utf8")
+    const palette = theme === "high-contrast" ? highContrast : globals
+    expect(palette).toContain(`--background: ${background}`)
+    expect(palette).toContain(`--foreground: ${foreground}`)
+  })
+
   // ---- Provider support --------------------------------------------------
 
   it("ThemeProvider accepts 'high-contrast' as a forced theme", () => {
diff --git a/components/navbar/MobileBottomTabs.tsx b/components/navbar/MobileBottomTabs.tsx
index 3a653672..ec800412 100644
--- a/components/navbar/MobileBottomTabs.tsx
+++ b/components/navbar/MobileBottomTabs.tsx
@@ -63,7 +63,7 @@ export const MobileBottomTabs: React.FC = () => {
 
   return (
     <nav
-      className="fixed bottom-0 inset-x-0 flex justify-around items-center bg-[#060e20]/90 backdrop-blur-md border-t border-gray-700 md:hidden min-h-[44px] pb-[env(safe-area-inset-bottom)]"
+      className="fixed bottom-0 inset-x-0 flex justify-around items-center bg-background/90 backdrop-blur-md border-t border-gray-700 md:hidden min-h-[44px] pb-[env(safe-area-inset-bottom)]"
       aria-label="Mobile bottom navigation"
     >
       {tabs.map((tab) => {
diff --git a/components/navbar/mobile-drawer.tsx b/components/navbar/mobile-drawer.tsx
index 7ee0c719..1c157fad 100644
--- a/components/navbar/mobile-drawer.tsx
+++ b/components/navbar/mobile-drawer.tsx
@@ -34,7 +34,7 @@ export default function MobileDrawer({
       />
 
       {/* Drawer Panel */}
-      <div className="absolute right-0 top-0 h-full w-72 bg-[#060e20] border-l border-purple-900/40 flex flex-col shadow-2xl">
+      <div className="absolute right-0 top-0 h-full w-72 bg-background border-l border-purple-900/40 flex flex-col shadow-2xl">
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-purple-900/40">
           <span className="text-white font-semibold text-lg">Menu</span>
diff --git a/components/patterns/DisputeActionPattern.tsx b/components/patterns/DisputeActionPattern.tsx
index 53d3096d..de60e5c9 100644
--- a/components/patterns/DisputeActionPattern.tsx
+++ b/components/patterns/DisputeActionPattern.tsx
@@ -87,7 +87,7 @@ export function DisputeActionPattern() {
           <DisputeForm />
         </div>
         
-        <DrawerFooter className="pt-4 border-t border-[#40485d]/50 bg-[#060e20] flex-col gap-3">
+        <DrawerFooter className="pt-4 border-t border-[#40485d]/50 bg-background flex-col gap-3">
           {/* Cancel is rendered BEFORE the destructive primary action so
               DOM, visual, and Tab order match (WCAG 2.4.3). The destructive
               `Submit Evidence` button keeps its red variant for visual