From 1a67683291c37774b4d5e07f2fe04553ae1a8a94 Mon Sep 17 00:00:00 2001
From: Marvell69 <adewunmimarvel@gmail.com>
Date: Sat, 28 Mar 2026 16:00:54 +0100
Subject: [PATCH 1/2] feat: implement experimental light theme support

---
 frontend/src/app/globals.css               | 10 ++++++++++
 frontend/src/components/LocaleSwitcher.tsx |  2 +-
 frontend/tailwind.config.js                |  8 ++++----
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 3ab1551..8e31347 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -4,20 +4,30 @@
 
 :root {
   color-scheme: light;
+  --color-night: #f1f5f9;
+  --color-tide: #e2e8f0;
+  --color-mint: #0f766e; /* Darker mint alias (Teal 700) for readability on light bg */
+  --color-glow: #0d9488;
 }
 
 :root.dark {
   color-scheme: dark;
+  --color-night: #0b0c10;
+  --color-tide: #0f1a2b;
+  --color-mint: #5ef2c0;
+  --color-glow: #b8ffe2;
 }
 
 body {
   background: radial-gradient(1200px circle at 10% -10%, #d9e8ff 0%, #f5f8ff 45%, #eef3ff 100%);
   color: #0f172a;
+  background-attachment: fixed;
 }
 
 .dark body {
   background: radial-gradient(1200px circle at 10% -10%, #15233b 0%, #0b0c10 45%, #050608 100%);
   color: #f3f5f7;
+  background-attachment: fixed;
 }
 
 /* Light-mode overrides for components that currently use dark-only utility classes. */
diff --git a/frontend/src/components/LocaleSwitcher.tsx b/frontend/src/components/LocaleSwitcher.tsx
index 94bf374..e1adc13 100644
--- a/frontend/src/components/LocaleSwitcher.tsx
+++ b/frontend/src/components/LocaleSwitcher.tsx
@@ -49,7 +49,7 @@ export default function LocaleSwitcher({
         className="bg-transparent text-sm text-white outline-none"
       >
         {locales.map((option) => (
-          <option key={option} value={option} className="bg-slate-950 text-white">
+          <option key={option} value={option} className="bg-night text-white">
             {t(`options.${option}`)}
           </option>
         ))}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index a154299..2961085 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -5,10 +5,10 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        night: "#0b0c10",
-        tide: "#0f1a2b",
-        mint: "#5ef2c0",
-        glow: "#b8ffe2"
+        night: "var(--color-night)",
+        tide: "var(--color-tide)",
+        mint: "var(--color-mint)",
+        glow: "var(--color-glow)"
       },
       fontFamily: {
         sans: ["var(--font-sans)", "system-ui", "sans-serif"],

From d0bec22312f48825878c68adea955072488795ec Mon Sep 17 00:00:00 2001
From: Marvell69 <adewunmimarvel@gmail.com>
Date: Sat, 28 Mar 2026 16:12:46 +0100
Subject: [PATCH 2/2] feat: add theme toggle to navbar and configure theme
 provider

---
 frontend/src/components/Navbar.tsx        | 7 ++++++-
 frontend/src/components/ThemeProvider.tsx | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 29d493f..6f2f5ad 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -8,6 +8,7 @@ import { useHydrateMerchantStore } from "@/lib/merchant-store";
 import MerchantProfileCard from "@/components/MerchantProfileCard";
 import ApiHealthBadge from "@/components/ApiHealthBadge";
 import LocaleSwitcher from "@/components/LocaleSwitcher";
+import ThemeToggle from "@/components/ThemeToggle";
 
 type AppNavLink = {
   href: string;
@@ -110,6 +111,7 @@ export default function Navbar() {
             <LocaleSwitcher className="hidden sm:inline-flex md:hidden" />
             <div className="hidden md:flex items-center gap-3">
               <LocaleSwitcher />
+              <ThemeToggle />
               <ApiHealthBadge />
               <MerchantProfileCard />
             </div>
@@ -125,7 +127,10 @@ export default function Navbar() {
           <div className="mb-4 flex flex-col items-center justify-center gap-4">
             <MerchantProfileCard />
             <ApiHealthBadge />
-            <LocaleSwitcher />
+            <div className="flex gap-4">
+              <ThemeToggle />
+              <LocaleSwitcher />
+            </div>
           </div>
           <div className="flex flex-col gap-4">
             {appNavLinks.map((link) => (
diff --git a/frontend/src/components/ThemeProvider.tsx b/frontend/src/components/ThemeProvider.tsx
index 581b230..8d898c8 100644
--- a/frontend/src/components/ThemeProvider.tsx
+++ b/frontend/src/components/ThemeProvider.tsx
@@ -5,7 +5,12 @@ import { ReactNode } from "react";
 
 export default function ThemeProvider({ children }: { children: ReactNode }) {
   return (
-    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="dark"
+      enableSystem={false}
+      storageKey="merchant-theme-preference"
+    >
       {children}
     </NextThemesProvider>
   );