UI/light mode support

frontend/src/app/globals.css

@@ -4,12 +4,20 @@
 
 :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;
   --font-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --font-mono: "Cascadia Code", Consolas, "SFMono-Regular", monospace;
 }
 
 :root.dark {
   color-scheme: dark;
+  --color-night: #0b0c10;
+  --color-tide: #0f1a2b;
+  --color-mint: #5ef2c0;
+  --color-glow: #b8ffe2;
 }
 
 body {
@@ -20,6 +28,7 @@ body {
     #eef3ff 100%
   );
   color: #0f172a;
+  background-attachment: fixed;
 }
 
 .dark body {
@@ -30,6 +39,7 @@ body {
     #050608 100%
   );
   color: #f3f5f7;
+  background-attachment: fixed;
 }
 
 /* Light-mode overrides for components that currently use dark-only utility classes. */

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>
         ))}

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) => (

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>
   );

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"],