From c5fc43a17563a63456673b13d11a684e7e827b52 Mon Sep 17 00:00:00 2001
From: Mahakisore7 <kisore2004@gmail.com>
Date: Sat, 19 Sep 2026 19:58:35 +0530
Subject: [PATCH] =?UTF-8?q?feat:=20visual=20polish=20=E2=80=94=20dark=20mo?=
 =?UTF-8?q?de,=20toast=20notifications,=20loading=20skeletons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the three items closing out the "complete product" roadmap's final
phase:

- Dark mode: Tailwind's class-based dark mode (tailwind.config.js),
  ThemeContext (persists to localStorage, falls back to the OS
  preference, degrades gracefully — same try/catch pattern as
  tokenStore.ts — if storage is blocked), and a ThemeToggle in the top
  bar. Every page and component gets dark: variants; nothing was left
  light-only.

- Toast notifications: a dependency-free ToastContext/ToastContainer
  (no library pulled in for a handful of confirmation messages, same
  call this codebase already made for icons.tsx) wired into checkout
  completion, staff invites, product create/delete, and conflict
  resolution — success and failure both surface a toast, stacked,
  auto-dismissing after 4s or on click.

- Loading skeletons: Skeleton.tsx's layout-shaped placeholders replace
  spinner/text loading states on CounterPage's item grid, DashboardPage's
  summary tiles, and AuditLogView's history list, so the page doesn't
  visually jump once real content arrives.

Tests: 9 new (ThemeContext, ToastContext/ToastContainer), 1 new
App.test.tsx case for the theme toggle; HeroPage.test.tsx and
StaffPage.test.tsx updated to wrap the providers their pages now depend
on. Full suite verified green (66/66 web), typecheck and lint clean,
production build succeeds.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/web/src/App.tsx                          | 28 ++++--
 apps/web/src/components/AttributionBadge.tsx  | 10 +-
 apps/web/src/components/AuditLogView.tsx      | 33 ++++---
 apps/web/src/components/AuthPanel.tsx         | 42 +++++----
 apps/web/src/components/BarcodeScanButton.tsx | 10 +-
 apps/web/src/components/CartDrawer.tsx        | 17 +++-
 .../src/components/ConflictReviewPanel.tsx    | 22 ++---
 apps/web/src/components/CounterPicker.tsx     | 16 ++--
 apps/web/src/components/EditableField.tsx     |  4 +-
 apps/web/src/components/ItemCard.tsx          | 32 ++++---
 apps/web/src/components/ProductForm.tsx       | 17 ++--
 apps/web/src/components/QueueDrawer.tsx       | 12 +--
 apps/web/src/components/Skeleton.tsx          | 43 +++++++++
 apps/web/src/components/ThemeToggle.tsx       | 20 ++++
 apps/web/src/components/ToastContainer.tsx    | 49 ++++++++++
 .../src/components/VectorClockExplainer.tsx   |  9 +-
 apps/web/src/components/icons.tsx             | 34 +++++++
 apps/web/src/index.css                        | 13 ++-
 apps/web/src/pages/CheckoutPage.tsx           | 23 +++--
 apps/web/src/pages/CounterPage.tsx            | 68 +++++++-------
 apps/web/src/pages/DashboardPage.tsx          | 50 +++++-----
 apps/web/src/pages/HeroPage.tsx               | 54 ++++++-----
 apps/web/src/pages/ProductsPage.tsx           | 54 +++++++----
 apps/web/src/pages/StaffPage.tsx              | 29 +++---
 apps/web/src/state/ThemeContext.tsx           | 57 ++++++++++++
 apps/web/src/state/ToastContext.tsx           | 66 ++++++++++++++
 apps/web/tailwind.config.js                   |  1 +
 apps/web/test/App.test.tsx                    | 14 +++
 apps/web/test/pages/HeroPage.test.tsx         | 22 +++--
 apps/web/test/pages/StaffPage.test.tsx        | 15 ++-
 apps/web/test/state/ThemeContext.test.tsx     | 78 ++++++++++++++++
 apps/web/test/state/ToastContext.test.tsx     | 91 +++++++++++++++++++
 32 files changed, 805 insertions(+), 228 deletions(-)
 create mode 100644 apps/web/src/components/Skeleton.tsx
 create mode 100644 apps/web/src/components/ThemeToggle.tsx
 create mode 100644 apps/web/src/components/ToastContainer.tsx
 create mode 100644 apps/web/src/state/ThemeContext.tsx
 create mode 100644 apps/web/src/state/ToastContext.tsx
 create mode 100644 apps/web/test/state/ThemeContext.test.tsx
 create mode 100644 apps/web/test/state/ToastContext.test.tsx

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index f260320..9edae7b 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { AuthProvider, useAuth, type AuthUser } from "./state/AuthContext";
 import { ShopProvider } from "./state/ShopContext";
+import { ThemeProvider } from "./state/ThemeContext";
+import { ToastProvider } from "./state/ToastContext";
 import { CounterPage } from "./pages/CounterPage";
 import { HeroPage } from "./pages/HeroPage";
 import { ProductsPage } from "./pages/ProductsPage";
@@ -8,6 +10,8 @@ import { CheckoutPage } from "./pages/CheckoutPage";
 import { StaffPage } from "./pages/StaffPage";
 import { DashboardPage } from "./pages/DashboardPage";
 import { CounterPicker } from "./components/CounterPicker";
+import { ThemeToggle } from "./components/ThemeToggle";
+import { ToastContainer } from "./components/ToastContainer";
 
 function useQueryParam(name: string, fallback: string): string {
   return new URLSearchParams(window.location.search).get(name) ?? fallback;
@@ -65,7 +69,11 @@ function AuthedApp({ shopId, role }: AuthedAppProps) {
           <a
             key={link.page}
             href={`?page=${link.page}&counter_id=${counterId}`}
-            className={page === link.page ? "font-semibold text-slate-900" : "text-slate-500 hover:text-slate-700"}
+            className={
+              page === link.page
+                ? "font-semibold text-slate-900 dark:text-slate-100"
+                : "text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+            }
           >
             {link.label}
           </a>
@@ -84,9 +92,10 @@ function TopBar({ user, onSignOut }: { user: AuthUser; onSignOut: () => void })
   return (
     <div className="mx-auto flex max-w-3xl items-center justify-end gap-3 px-4 pt-3 text-xs text-slate-400 sm:px-6">
       <span>{user.email}</span>
-      <button type="button" onClick={onSignOut} className="underline decoration-dotted hover:text-slate-600">
+      <button type="button" onClick={onSignOut} className="underline decoration-dotted hover:text-slate-600 dark:hover:text-slate-200">
         Sign out
       </button>
+      <ThemeToggle />
     </div>
   );
 }
@@ -95,7 +104,9 @@ function AppShell() {
   const { status, user, signOut } = useAuth();
 
   if (status === "loading") {
-    return <div className="flex min-h-screen items-center justify-center text-sm text-slate-500">Loading…</div>;
+    return (
+      <div className="flex min-h-screen items-center justify-center text-sm text-slate-500 dark:text-slate-400">Loading…</div>
+    );
   }
 
   if (status === "signed_out" || !user?.shopId) {
@@ -112,8 +123,13 @@ function AppShell() {
 
 export function App() {
   return (
-    <AuthProvider>
-      <AppShell />
-    </AuthProvider>
+    <ThemeProvider>
+      <ToastProvider>
+        <AuthProvider>
+          <AppShell />
+        </AuthProvider>
+        <ToastContainer />
+      </ToastProvider>
+    </ThemeProvider>
   );
 }
diff --git a/apps/web/src/components/AttributionBadge.tsx b/apps/web/src/components/AttributionBadge.tsx
index 6046304..9b00d78 100644
--- a/apps/web/src/components/AttributionBadge.tsx
+++ b/apps/web/src/components/AttributionBadge.tsx
@@ -1,9 +1,9 @@
 const COLORS = [
-  "bg-sky-100 text-sky-800",
-  "bg-emerald-100 text-emerald-800",
-  "bg-amber-100 text-amber-800",
-  "bg-violet-100 text-violet-800",
-  "bg-rose-100 text-rose-800",
+  "bg-sky-100 text-sky-800 dark:bg-sky-950 dark:text-sky-300",
+  "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300",
+  "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300",
+  "bg-violet-100 text-violet-800 dark:bg-violet-950 dark:text-violet-300",
+  "bg-rose-100 text-rose-800 dark:bg-rose-950 dark:text-rose-300",
 ];
 
 /** Deterministic so the same counter always renders the same color, without a shared color registry. */
diff --git a/apps/web/src/components/AuditLogView.tsx b/apps/web/src/components/AuditLogView.tsx
index ab9e0a8..33ffff3 100644
--- a/apps/web/src/components/AuditLogView.tsx
+++ b/apps/web/src/components/AuditLogView.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import type { AuditHistoryEntry } from "@stocksync/core";
 import { getAudit } from "../api/client";
 import { VectorClockExplainer } from "./VectorClockExplainer";
+import { Skeleton } from "./Skeleton";
 import { AlertTriangleIcon } from "./icons";
 
 export interface AuditLogViewProps {
@@ -38,32 +39,40 @@ export function AuditLogView({ itemId, shopId }: AuditLogViewProps) {
 
   if (error)
     return (
-      <p className="flex items-center gap-1.5 text-sm text-rose-600">
+      <p className="flex items-center gap-1.5 text-sm text-rose-600 dark:text-rose-400">
         <AlertTriangleIcon className="h-3.5 w-3.5 shrink-0" />
         Couldn't load history for {itemId}.
       </p>
     );
   if (!history)
     return (
-      <p className="flex items-center gap-2 text-sm text-slate-400">
-        <span className="h-3 w-3 animate-spin rounded-full border-2 border-slate-300 border-t-indigo-500" />
-        Loading history…
-      </p>
+      <div className="space-y-2 border-l-2 border-slate-200 pl-4 dark:border-slate-800">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="space-y-1.5">
+            <Skeleton className="h-3.5 w-1/3" />
+            <Skeleton className="h-3 w-2/3" />
+          </div>
+        ))}
+      </div>
     );
-  if (history.length === 0) return <p className="text-sm text-slate-400">No history yet for {itemId}.</p>;
+  if (history.length === 0) return <p className="text-sm text-slate-400 dark:text-slate-500">No history yet for {itemId}.</p>;
 
   return (
-    <ol className="space-y-2 border-l-2 border-slate-200 pl-4">
+    <ol className="space-y-2 border-l-2 border-slate-200 pl-4 dark:border-slate-800">
       {history.map((entry, index) => (
         <li key={`${entry.timestamp}-${index}`} className="text-sm">
           <div className="flex items-baseline gap-2">
-            <span className="font-medium text-slate-900">{entry.action}</span>
-            <span className="rounded-full bg-slate-100 px-1.5 py-0.5 text-xs text-slate-500">{entry.counter_id}</span>
-            <span className="text-xs text-slate-400">{new Date(entry.timestamp).toLocaleTimeString()}</span>
+            <span className="font-medium text-slate-900 dark:text-slate-100">{entry.action}</span>
+            <span className="rounded-full bg-slate-100 px-1.5 py-0.5 text-xs text-slate-500 dark:bg-slate-800 dark:text-slate-400">
+              {entry.counter_id}
+            </span>
+            <span className="text-xs text-slate-400 dark:text-slate-500">{new Date(entry.timestamp).toLocaleTimeString()}</span>
           </div>
-          <p className="text-slate-600">{formatDetails(entry.details)}</p>
+          <p className="text-slate-600 dark:text-slate-400">{formatDetails(entry.details)}</p>
           <details>
-            <summary className="cursor-pointer text-xs text-slate-400 hover:text-slate-600">Why?</summary>
+            <summary className="cursor-pointer text-xs text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300">
+              Why?
+            </summary>
             <VectorClockExplainer entry={entry} />
           </details>
         </li>
diff --git a/apps/web/src/components/AuthPanel.tsx b/apps/web/src/components/AuthPanel.tsx
index 80848d0..d72f186 100644
--- a/apps/web/src/components/AuthPanel.tsx
+++ b/apps/web/src/components/AuthPanel.tsx
@@ -4,9 +4,11 @@ import { ArrowRightIcon } from "./icons";
 
 type Mode = "login" | "signup" | "confirm" | "new_password";
 
-const INPUT_CLASS = "w-full rounded-md border border-slate-300 px-3 py-2 text-sm";
+const INPUT_CLASS =
+  "w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500";
 const SUBMIT_CLASS =
   "flex w-full items-center justify-center gap-1.5 rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-indigo-700 disabled:opacity-50";
+const LINK_CLASS = "mt-4 text-sm text-slate-500 underline decoration-dotted hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200";
 
 /**
  * The app's real front door for identity — replaces the old shop_id/
@@ -89,12 +91,16 @@ export function AuthPanel() {
   }
 
   return (
-    <div id="try-it" className="mx-auto max-w-md rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
+    <div id="try-it" className="mx-auto max-w-md rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-8">
       {mode === "login" && (
         <>
-          <h2 className="text-xl font-bold text-slate-900">Sign in</h2>
-          <p className="mt-1 text-sm text-slate-600">Enter your shop's account to get to your counter.</p>
-          {info && <p className="mt-3 rounded-md bg-emerald-50 px-3 py-2 text-xs text-emerald-700">{info}</p>}
+          <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">Sign in</h2>
+          <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">Enter your shop's account to get to your counter.</p>
+          {info && (
+            <p className="mt-3 rounded-md bg-emerald-50 px-3 py-2 text-xs text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300">
+              {info}
+            </p>
+          )}
           <form className="mt-4 flex flex-col gap-3" onSubmit={handleLogin}>
             <input
               type="email"
@@ -114,7 +120,7 @@ export function AuthPanel() {
               aria-label="Password"
               className={INPUT_CLASS}
             />
-            {error && <p className="text-xs text-red-600">{error}</p>}
+            {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
             <button type="submit" disabled={busy} className={SUBMIT_CLASS}>
               Sign in <ArrowRightIcon className="h-4 w-4" />
             </button>
@@ -125,7 +131,7 @@ export function AuthPanel() {
               setMode("signup");
               setError("");
             }}
-            className="mt-4 text-sm text-slate-500 underline decoration-dotted hover:text-slate-700"
+            className={LINK_CLASS}
           >
             New shop? Create an account instead
           </button>
@@ -134,8 +140,8 @@ export function AuthPanel() {
 
       {mode === "signup" && (
         <>
-          <h2 className="text-xl font-bold text-slate-900">Set up your shop</h2>
-          <p className="mt-1 text-sm text-slate-600">You'll be the owner — invite your staff once you're in.</p>
+          <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">Set up your shop</h2>
+          <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">You'll be the owner — invite your staff once you're in.</p>
           <form className="mt-4 flex flex-col gap-3" onSubmit={handleSignup}>
             <input
               value={shopName}
@@ -163,7 +169,7 @@ export function AuthPanel() {
               aria-label="Password"
               className={INPUT_CLASS}
             />
-            {error && <p className="text-xs text-red-600">{error}</p>}
+            {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
             <button type="submit" disabled={busy} className={SUBMIT_CLASS}>
               Create account <ArrowRightIcon className="h-4 w-4" />
             </button>
@@ -174,7 +180,7 @@ export function AuthPanel() {
               setMode("login");
               setError("");
             }}
-            className="mt-4 text-sm text-slate-500 underline decoration-dotted hover:text-slate-700"
+            className={LINK_CLASS}
           >
             Already have an account? Sign in
           </button>
@@ -183,8 +189,8 @@ export function AuthPanel() {
 
       {mode === "confirm" && (
         <>
-          <h2 className="text-xl font-bold text-slate-900">Check your email</h2>
-          <p className="mt-1 text-sm text-slate-600">Enter the confirmation code we sent to {email}.</p>
+          <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">Check your email</h2>
+          <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">Enter the confirmation code we sent to {email}.</p>
           <form className="mt-4 flex flex-col gap-3" onSubmit={handleConfirm}>
             <input
               value={code}
@@ -194,7 +200,7 @@ export function AuthPanel() {
               aria-label="Confirmation code"
               className={INPUT_CLASS}
             />
-            {error && <p className="text-xs text-red-600">{error}</p>}
+            {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
             <button type="submit" disabled={busy} className={SUBMIT_CLASS}>
               Confirm <ArrowRightIcon className="h-4 w-4" />
             </button>
@@ -202,7 +208,7 @@ export function AuthPanel() {
           <button
             type="button"
             onClick={() => void resendConfirmationCode(email)}
-            className="mt-4 text-sm text-slate-500 underline decoration-dotted hover:text-slate-700"
+            className={LINK_CLASS}
           >
             Resend code
           </button>
@@ -211,8 +217,8 @@ export function AuthPanel() {
 
       {mode === "new_password" && (
         <>
-          <h2 className="text-xl font-bold text-slate-900">Choose a password</h2>
-          <p className="mt-1 text-sm text-slate-600">First sign-in on an invited account — set your own password to continue.</p>
+          <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">Choose a password</h2>
+          <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">First sign-in on an invited account — set your own password to continue.</p>
           <form className="mt-4 flex flex-col gap-3" onSubmit={handleNewPassword}>
             <input
               type="password"
@@ -223,7 +229,7 @@ export function AuthPanel() {
               aria-label="New password"
               className={INPUT_CLASS}
             />
-            {error && <p className="text-xs text-red-600">{error}</p>}
+            {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
             <button type="submit" disabled={busy} className={SUBMIT_CLASS}>
               Set password and continue <ArrowRightIcon className="h-4 w-4" />
             </button>
diff --git a/apps/web/src/components/BarcodeScanButton.tsx b/apps/web/src/components/BarcodeScanButton.tsx
index c6822f7..987c1d3 100644
--- a/apps/web/src/components/BarcodeScanButton.tsx
+++ b/apps/web/src/components/BarcodeScanButton.tsx
@@ -66,12 +66,12 @@ export function BarcodeScanButton({ items, onResolved }: BarcodeScanButtonProps)
 
   if (state === "scanning") {
     return (
-      <div className="rounded-lg border border-indigo-200 bg-indigo-50/50 p-2">
+      <div className="rounded-lg border border-indigo-200 bg-indigo-50/50 p-2 dark:border-indigo-900 dark:bg-indigo-950/30">
         <video ref={videoRef} data-testid="scan-video" className="w-full rounded-md" muted playsInline />
         <button
           type="button"
           onClick={() => setState("idle")}
-          className="mt-2 text-xs font-medium text-slate-500 hover:text-slate-700"
+          className="mt-2 text-xs font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
         >
           Cancel
         </button>
@@ -84,19 +84,19 @@ export function BarcodeScanButton({ items, onResolved }: BarcodeScanButtonProps)
       <button
         type="button"
         onClick={() => setState("scanning")}
-        className="flex items-center gap-1.5 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700"
+        className="flex items-center gap-1.5 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/50 dark:hover:text-indigo-300"
       >
         <ScanIcon className="h-4 w-4" />
         Scan barcode/QR
       </button>
       {state === "not_recognized" && (
-        <p data-testid="scan-not-recognized" className="mt-1.5 flex items-center gap-1 text-xs text-amber-700">
+        <p data-testid="scan-not-recognized" className="mt-1.5 flex items-center gap-1 text-xs text-amber-700 dark:text-amber-400">
           <AlertTriangleIcon className="h-3 w-3 shrink-0" />
           Item not recognized — pick it from the list below instead.
         </p>
       )}
       {state === "permission_denied" && (
-        <p data-testid="scan-permission-denied" className="mt-1.5 flex items-center gap-1 text-xs text-rose-700">
+        <p data-testid="scan-permission-denied" className="mt-1.5 flex items-center gap-1 text-xs text-rose-700 dark:text-rose-400">
           <AlertTriangleIcon className="h-3 w-3 shrink-0" />
           Camera access denied — pick the item from the list below instead.
         </p>
diff --git a/apps/web/src/components/CartDrawer.tsx b/apps/web/src/components/CartDrawer.tsx
index 2e3cd88..24244e9 100644
--- a/apps/web/src/components/CartDrawer.tsx
+++ b/apps/web/src/components/CartDrawer.tsx
@@ -11,12 +11,12 @@ export function CartDrawer({ lineItems, productName, onRemove }: CartDrawerProps
   const total = lineItems.reduce((sum, item) => sum + item.quantity * item.unit_price, 0);
 
   if (lineItems.length === 0) {
-    return <p className="text-sm text-slate-400">Cart is empty — add items from the list.</p>;
+    return <p className="text-sm text-slate-400 dark:text-slate-500">Cart is empty — add items from the list.</p>;
   }
 
   return (
-    <div className="rounded-lg border border-slate-200 bg-white p-4">
-      <ul className="space-y-1 text-sm">
+    <div className="rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+      <ul className="space-y-1 text-sm text-slate-700 dark:text-slate-300">
         {lineItems.map((item) => (
           <li key={item.product_id} className="flex items-center justify-between" data-testid={`cart-line-${item.product_id}`}>
             <span>
@@ -24,14 +24,21 @@ export function CartDrawer({ lineItems, productName, onRemove }: CartDrawerProps
             </span>
             <span className="flex items-center gap-2">
               ₹{item.quantity * item.unit_price}
-              <button type="button" onClick={() => onRemove(item.product_id)} className="text-xs text-rose-600 hover:underline">
+              <button
+                type="button"
+                onClick={() => onRemove(item.product_id)}
+                className="text-xs text-rose-600 hover:underline dark:text-rose-400"
+              >
                 Remove
               </button>
             </span>
           </li>
         ))}
       </ul>
-      <div className="mt-2 flex justify-between border-t border-slate-200 pt-2 text-sm font-semibold text-slate-900" data-testid="cart-total">
+      <div
+        className="mt-2 flex justify-between border-t border-slate-200 pt-2 text-sm font-semibold text-slate-900 dark:border-slate-800 dark:text-slate-100"
+        data-testid="cart-total"
+      >
         <span>Total</span>
         <span>₹{total}</span>
       </div>
diff --git a/apps/web/src/components/ConflictReviewPanel.tsx b/apps/web/src/components/ConflictReviewPanel.tsx
index ef33ef4..fb24597 100644
--- a/apps/web/src/components/ConflictReviewPanel.tsx
+++ b/apps/web/src/components/ConflictReviewPanel.tsx
@@ -40,12 +40,12 @@ export function ConflictReviewPanel({ itemId, shopId, counterId, candidates, onR
   }
 
   return (
-    <div className="rounded-lg border border-amber-300 bg-amber-50 p-4 shadow-sm">
+    <div className="rounded-lg border border-amber-300 bg-amber-50 p-4 shadow-sm dark:border-amber-900 dark:bg-amber-950/40">
       <div className="flex items-start gap-2">
-        <AlertTriangleIcon className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
+        <AlertTriangleIcon className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
         <div>
-          <h4 className="font-semibold text-amber-900">Conflicting "{candidates.field}" value</h4>
-          <p className="mt-0.5 text-sm text-amber-800">
+          <h4 className="font-semibold text-amber-900 dark:text-amber-200">Conflicting "{candidates.field}" value</h4>
+          <p className="mt-0.5 text-sm text-amber-800 dark:text-amber-300">
             Both counters set this while offline, {candidates.overlap_seconds}s apart. Pick which one should win.
           </p>
         </div>
@@ -53,12 +53,12 @@ export function ConflictReviewPanel({ itemId, shopId, counterId, candidates, onR
 
       {candidates.field === "price" &&
         (candidates.bedrock_explanation ? (
-          <p className="mt-3 rounded-md border border-amber-200 bg-white/70 p-2.5 text-sm text-amber-900">
+          <p className="mt-3 rounded-md border border-amber-200 bg-white/70 p-2.5 text-sm text-amber-900 dark:border-amber-800 dark:bg-slate-900/40 dark:text-amber-200">
             {candidates.bedrock_explanation}
           </p>
         ) : (
-          <p className="mt-3 flex items-center gap-2 rounded-md border border-amber-200 bg-white/50 p-2.5 text-sm italic text-amber-700">
-            <span className="h-3 w-3 animate-spin rounded-full border-2 border-amber-300 border-t-amber-700" />
+          <p className="mt-3 flex items-center gap-2 rounded-md border border-amber-200 bg-white/50 p-2.5 text-sm italic text-amber-700 dark:border-amber-800 dark:bg-slate-900/40 dark:text-amber-400">
+            <span className="h-3 w-3 animate-spin rounded-full border-2 border-amber-300 border-t-amber-700 dark:border-amber-700 dark:border-t-amber-300" />
             Generating explanation…
           </p>
         ))}
@@ -70,17 +70,17 @@ export function ConflictReviewPanel({ itemId, shopId, counterId, candidates, onR
             type="button"
             disabled={resolving !== null}
             onClick={() => void pick(candidate.value)}
-            className="flex flex-col items-start gap-0.5 rounded-md border border-amber-300 bg-white px-3 py-2 text-left transition-colors hover:border-amber-500 hover:bg-amber-100 disabled:opacity-50"
+            className="flex flex-col items-start gap-0.5 rounded-md border border-amber-300 bg-white px-3 py-2 text-left transition-colors hover:border-amber-500 hover:bg-amber-100 disabled:opacity-50 dark:border-amber-800 dark:bg-slate-900 dark:hover:border-amber-600 dark:hover:bg-amber-950"
           >
-            <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700">
+            <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700 dark:bg-amber-900 dark:text-amber-300">
               {candidate.counter_id}
             </span>
-            <span className="text-sm font-medium text-amber-900">: {String(candidate.value)}</span>
+            <span className="text-sm font-medium text-amber-900 dark:text-amber-200">: {String(candidate.value)}</span>
           </button>
         ))}
       </div>
 
-      {error && <p className="mt-2 text-xs text-amber-700">{error}</p>}
+      {error && <p className="mt-2 text-xs text-amber-700 dark:text-amber-400">{error}</p>}
     </div>
   );
 }
diff --git a/apps/web/src/components/CounterPicker.tsx b/apps/web/src/components/CounterPicker.tsx
index b411be5..18052cf 100644
--- a/apps/web/src/components/CounterPicker.tsx
+++ b/apps/web/src/components/CounterPicker.tsx
@@ -23,9 +23,9 @@ export function CounterPicker({ onEnter }: CounterPickerProps) {
   const [counterId, setCounterId] = useState("");
 
   return (
-    <div className="mx-auto max-w-xl rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
-      <h2 className="text-xl font-bold text-slate-900">Which counter is this?</h2>
-      <p className="mt-1 text-sm text-slate-600">
+    <div className="mx-auto max-w-xl rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-8">
+      <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">Which counter is this?</h2>
+      <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">
         Open this in a second window as the other counter to try the offline-conflict demo — take one offline, sell
         the same item from both, then reconnect and watch it converge.
       </p>
@@ -36,9 +36,9 @@ export function CounterPicker({ onEnter }: CounterPickerProps) {
             key={counter.id}
             type="button"
             onClick={() => onEnter(counter.id)}
-            className="flex flex-col items-center gap-1 rounded-lg border-2 border-indigo-200 bg-indigo-50 px-4 py-4 text-center transition-colors hover:border-indigo-400 hover:bg-indigo-100 active:scale-95"
+            className="flex flex-col items-center gap-1 rounded-lg border-2 border-indigo-200 bg-indigo-50 px-4 py-4 text-center transition-colors hover:border-indigo-400 hover:bg-indigo-100 active:scale-95 dark:border-indigo-900 dark:bg-indigo-950/50 dark:hover:border-indigo-700 dark:hover:bg-indigo-900/50"
           >
-            <span className="text-lg font-bold text-indigo-900">{counter.label}</span>
+            <span className="text-lg font-bold text-indigo-900 dark:text-indigo-300">{counter.label}</span>
           </button>
         ))}
       </div>
@@ -47,13 +47,13 @@ export function CounterPicker({ onEnter }: CounterPickerProps) {
         <button
           type="button"
           onClick={() => setShowCustom(true)}
-          className="mt-4 text-sm text-slate-500 underline decoration-dotted hover:text-slate-700"
+          className="mt-4 text-sm text-slate-500 underline decoration-dotted hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
         >
           Use a custom counter ID instead
         </button>
       ) : (
         <form
-          className="mt-4 flex flex-col gap-2 border-t border-slate-100 pt-4 sm:flex-row"
+          className="mt-4 flex flex-col gap-2 border-t border-slate-100 pt-4 dark:border-slate-800 sm:flex-row"
           onSubmit={(event) => {
             event.preventDefault();
             if (counterId.trim()) onEnter(counterId.trim());
@@ -64,7 +64,7 @@ export function CounterPicker({ onEnter }: CounterPickerProps) {
             onChange={(event) => setCounterId(event.target.value)}
             placeholder="counter id"
             aria-label="Counter ID"
-            className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm"
+            className="flex-1 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
           />
           <button
             type="submit"
diff --git a/apps/web/src/components/EditableField.tsx b/apps/web/src/components/EditableField.tsx
index 89022be..f9ad29e 100644
--- a/apps/web/src/components/EditableField.tsx
+++ b/apps/web/src/components/EditableField.tsx
@@ -28,7 +28,7 @@ export function EditableField({ value, onCommit, testId }: EditableFieldProps) {
           setDraft(String(value));
           setEditing(true);
         }}
-        className="underline decoration-dotted decoration-slate-400 underline-offset-2 hover:decoration-slate-700"
+        className="underline decoration-dotted decoration-slate-400 underline-offset-2 hover:decoration-slate-700 dark:decoration-slate-600 dark:hover:decoration-slate-300"
         title="Click to edit"
       >
         {value}
@@ -47,7 +47,7 @@ export function EditableField({ value, onCommit, testId }: EditableFieldProps) {
         if (event.key === "Enter") commit();
         if (event.key === "Escape") setEditing(false);
       }}
-      className="w-20 rounded border border-slate-300 px-1 text-right text-sm"
+      className="w-20 rounded border border-slate-300 bg-white px-1 text-right text-sm text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
     />
   );
 }
diff --git a/apps/web/src/components/ItemCard.tsx b/apps/web/src/components/ItemCard.tsx
index a2ad5e0..5e866c3 100644
--- a/apps/web/src/components/ItemCard.tsx
+++ b/apps/web/src/components/ItemCard.tsx
@@ -14,18 +14,18 @@ export interface ItemCardProps {
 export function ItemCard({ item, highlighted, onSell, onRestock, onFieldUpdate }: ItemCardProps) {
   return (
     <div
-      className={`rounded-lg border bg-white p-4 shadow-sm transition-shadow hover:shadow-md ${
-        highlighted ? "border-indigo-400 ring-2 ring-indigo-400" : "border-slate-200"
+      className={`rounded-lg border bg-white p-4 shadow-sm transition-shadow hover:shadow-md dark:bg-slate-900 dark:hover:shadow-none ${
+        highlighted ? "border-indigo-400 ring-2 ring-indigo-400 dark:border-indigo-500 dark:ring-indigo-500" : "border-slate-200 dark:border-slate-800"
       }`}
       data-testid={`item-card-${item.item_id}`}
     >
       <div className="flex items-start justify-between gap-2">
-        <h3 className="font-semibold text-slate-900">{item.name ?? item.item_id}</h3>
+        <h3 className="font-semibold text-slate-900 dark:text-slate-100">{item.name ?? item.item_id}</h3>
         <div className="flex flex-wrap justify-end gap-1">
           {item.stock_anomaly && (
             <span
               data-testid="stock-anomaly-badge"
-              className="flex items-center gap-1 rounded-full bg-rose-100 px-2 py-0.5 text-xs font-medium text-rose-800"
+              className="flex items-center gap-1 rounded-full bg-rose-100 px-2 py-0.5 text-xs font-medium text-rose-800 dark:bg-rose-950 dark:text-rose-300"
               title="Stock went negative — this likely indicates a real discrepancy worth investigating, not a display bug"
             >
               <AlertTriangleIcon className="h-3 w-3" />
@@ -33,7 +33,7 @@ export function ItemCard({ item, highlighted, onSell, onRestock, onFieldUpdate }
             </span>
           )}
           {item.conflict_status === "needs_review" && (
-            <span className="flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">
+            <span className="flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-950 dark:text-amber-300">
               <AlertTriangleIcon className="h-3 w-3" />
               Needs review
             </span>
@@ -42,14 +42,18 @@ export function ItemCard({ item, highlighted, onSell, onRestock, onFieldUpdate }
       </div>
 
       <dl className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-sm">
-        <dt className="flex items-center gap-1.5 text-slate-500">
+        <dt className="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
           <BoxIcon className="h-3.5 w-3.5" />
           Stock
         </dt>
         <dd
           data-testid="stock-value"
           className={`text-right font-medium transition-colors ${
-            item.stock_anomaly ? "text-rose-700" : item.optimistic ? "text-slate-400 italic" : "text-slate-900"
+            item.stock_anomaly
+              ? "text-rose-700 dark:text-rose-400"
+              : item.optimistic
+                ? "text-slate-400 italic dark:text-slate-500"
+                : "text-slate-900 dark:text-slate-100"
           }`}
         >
           {item.stock}
@@ -58,11 +62,11 @@ export function ItemCard({ item, highlighted, onSell, onRestock, onFieldUpdate }
 
         {item.price !== undefined && (
           <>
-            <dt className="flex items-center gap-1.5 text-slate-500">
+            <dt className="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
               <TagIcon className="h-3.5 w-3.5" />
               Price
             </dt>
-            <dd className="flex items-center justify-end gap-1 text-right font-medium text-slate-900">
+            <dd className="flex items-center justify-end gap-1 text-right font-medium text-slate-900 dark:text-slate-100">
               ₹
               <EditableField
                 value={item.price}
@@ -76,11 +80,11 @@ export function ItemCard({ item, highlighted, onSell, onRestock, onFieldUpdate }
 
         {item.shelf_location !== undefined && (
           <>
-            <dt className="flex items-center gap-1.5 text-slate-500">
+            <dt className="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
               <MapPinIcon className="h-3.5 w-3.5" />
               Shelf
             </dt>
-            <dd className="flex items-center justify-end gap-1 text-right font-medium text-slate-900">
+            <dd className="flex items-center justify-end gap-1 text-right font-medium text-slate-900 dark:text-slate-100">
               <EditableField
                 value={item.shelf_location}
                 testId="shelf-location-value"
@@ -93,11 +97,11 @@ export function ItemCard({ item, highlighted, onSell, onRestock, onFieldUpdate }
 
         {item.expiry_date !== undefined && (
           <>
-            <dt className="flex items-center gap-1.5 text-slate-500">
+            <dt className="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
               <CalendarIcon className="h-3.5 w-3.5" />
               Expires
             </dt>
-            <dd className="flex items-center justify-end gap-1 text-right font-medium text-slate-900">
+            <dd className="flex items-center justify-end gap-1 text-right font-medium text-slate-900 dark:text-slate-100">
               <EditableField
                 value={item.expiry_date}
                 testId="expiry-date-value"
@@ -121,7 +125,7 @@ export function ItemCard({ item, highlighted, onSell, onRestock, onFieldUpdate }
         <button
           type="button"
           onClick={() => onRestock(item.item_id)}
-          className="flex flex-1 items-center justify-center gap-1 rounded-md border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 active:scale-95"
+          className="flex flex-1 items-center justify-center gap-1 rounded-md border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 active:scale-95 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
         >
           <PlusIcon className="h-3.5 w-3.5" />
           Restock 1
diff --git a/apps/web/src/components/ProductForm.tsx b/apps/web/src/components/ProductForm.tsx
index 6283d3b..7593eed 100644
--- a/apps/web/src/components/ProductForm.tsx
+++ b/apps/web/src/components/ProductForm.tsx
@@ -41,26 +41,29 @@ export function ProductForm({ categories, suppliers, onSubmit }: ProductFormProp
   }
 
   return (
-    <form onSubmit={handleSubmit} className="grid grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-white p-4 sm:grid-cols-5">
+    <form
+      onSubmit={handleSubmit}
+      className="grid grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900 sm:grid-cols-5"
+    >
       <input
         data-testid="product-name-input"
         placeholder="Name"
         value={name}
         onChange={(event) => setName(event.target.value)}
-        className="col-span-2 rounded border border-slate-300 px-2 py-1 text-sm sm:col-span-1"
+        className="col-span-2 rounded border border-slate-300 bg-white px-2 py-1 text-sm text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 sm:col-span-1"
       />
       <input
         data-testid="product-sku-input"
         placeholder="SKU"
         value={sku}
         onChange={(event) => setSku(event.target.value)}
-        className="rounded border border-slate-300 px-2 py-1 text-sm"
+        className="rounded border border-slate-300 bg-white px-2 py-1 text-sm text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
       />
       <select
         data-testid="product-category-select"
         value={categoryId}
         onChange={(event) => setCategoryId(event.target.value)}
-        className="rounded border border-slate-300 px-2 py-1 text-sm"
+        className="rounded border border-slate-300 bg-white px-2 py-1 text-sm text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
       >
         <option value="">Category</option>
         {categories.map((category) => (
@@ -73,7 +76,7 @@ export function ProductForm({ categories, suppliers, onSubmit }: ProductFormProp
         data-testid="product-supplier-select"
         value={supplierId}
         onChange={(event) => setSupplierId(event.target.value)}
-        className="rounded border border-slate-300 px-2 py-1 text-sm"
+        className="rounded border border-slate-300 bg-white px-2 py-1 text-sm text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
       >
         <option value="">Supplier</option>
         {suppliers.map((supplier) => (
@@ -89,9 +92,9 @@ export function ProductForm({ categories, suppliers, onSubmit }: ProductFormProp
           placeholder="₹"
           value={basePrice}
           onChange={(event) => setBasePrice(event.target.value)}
-          className="w-16 rounded border border-slate-300 px-2 py-1 text-sm"
+          className="w-16 rounded border border-slate-300 bg-white px-2 py-1 text-sm text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
         />
-        <button type="submit" className="rounded-md bg-slate-900 px-3 py-1 text-sm font-medium text-white hover:bg-slate-700">
+        <button type="submit" className="rounded-md bg-slate-900 px-3 py-1 text-sm font-medium text-white hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-300">
           Add
         </button>
       </div>
diff --git a/apps/web/src/components/QueueDrawer.tsx b/apps/web/src/components/QueueDrawer.tsx
index ae29e4e..e83bfd9 100644
--- a/apps/web/src/components/QueueDrawer.tsx
+++ b/apps/web/src/components/QueueDrawer.tsx
@@ -13,9 +13,9 @@ const STATUS_LABEL: Record<QueueDisplayEntry["status"], string> = {
 };
 
 const STATUS_STYLE: Record<QueueDisplayEntry["status"], string> = {
-  queued: "bg-slate-100 text-slate-700",
-  replaying: "bg-sky-100 text-sky-800",
-  reconciled: "bg-emerald-100 text-emerald-800",
+  queued: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
+  replaying: "bg-sky-100 text-sky-800 dark:bg-sky-950 dark:text-sky-300",
+  reconciled: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300",
 };
 
 export interface QueueDrawerProps {
@@ -47,7 +47,7 @@ export function QueueDrawer({ entries }: QueueDrawerProps) {
   }, [entries, dispatch]);
 
   if (entries.length === 0) {
-    return <p className="text-sm text-slate-400">Nothing queued — everything is synced.</p>;
+    return <p className="text-sm text-slate-400 dark:text-slate-500">Nothing queued — everything is synced.</p>;
   }
 
   return (
@@ -55,11 +55,11 @@ export function QueueDrawer({ entries }: QueueDrawerProps) {
       {entries.map((entry) => (
         <li
           key={entry.idempotencyKey}
-          className={`flex items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ${
+          className={`flex items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm dark:border-slate-800 dark:bg-slate-900 ${
             leavingKeys.has(entry.idempotencyKey) ? "animate-[fadeOutDown_300ms_ease-in_forwards]" : ""
           }`}
         >
-          <span className="text-slate-700">
+          <span className="text-slate-700 dark:text-slate-300">
             {entry.type} · {entry.itemId}
           </span>
           <span className={`flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_STYLE[entry.status]}`}>
diff --git a/apps/web/src/components/Skeleton.tsx b/apps/web/src/components/Skeleton.tsx
new file mode 100644
index 0000000..218da85
--- /dev/null
+++ b/apps/web/src/components/Skeleton.tsx
@@ -0,0 +1,43 @@
+export interface SkeletonProps {
+  className?: string;
+}
+
+/** One pulsing placeholder block — compose into layout-shaped skeletons rather than a generic spinner, so the page doesn't visually jump once real content arrives. */
+export function Skeleton({ className = "" }: SkeletonProps) {
+  return <div className={`animate-pulse rounded-md bg-slate-200 dark:bg-slate-800 ${className}`} />;
+}
+
+/** Mimics CounterPage's item grid while GET /sync is in flight. */
+export function ItemCardSkeleton() {
+  return (
+    <div className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+      <div className="flex items-start justify-between gap-2">
+        <Skeleton className="h-5 w-2/3" />
+      </div>
+      <div className="mt-4 space-y-2.5">
+        <Skeleton className="h-3.5 w-full" />
+        <Skeleton className="h-3.5 w-full" />
+        <Skeleton className="h-3.5 w-2/3" />
+      </div>
+      <div className="mt-4 flex gap-2">
+        <Skeleton className="h-8 flex-1" />
+        <Skeleton className="h-8 flex-1" />
+      </div>
+    </div>
+  );
+}
+
+/** Mimics DashboardPage's three summary tiles while GET /dashboard is in flight. */
+export function DashboardSkeleton() {
+  return (
+    <div className="grid gap-4 sm:grid-cols-3">
+      {[0, 1, 2].map((i) => (
+        <div key={i} className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+          <Skeleton className="h-3 w-20" />
+          <Skeleton className="mt-2 h-7 w-24" />
+          <Skeleton className="mt-2 h-3 w-28" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ThemeToggle.tsx b/apps/web/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..dd86824
--- /dev/null
+++ b/apps/web/src/components/ThemeToggle.tsx
@@ -0,0 +1,20 @@
+import { useTheme } from "../state/ThemeContext";
+import { MoonIcon, SunIcon } from "./icons";
+
+/** Light/dark switch — placed in the top bar, works everywhere the app renders since ThemeProvider wraps the whole tree. */
+export function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+  const isDark = theme === "dark";
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      className="flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
+    >
+      {isDark ? <SunIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />}
+    </button>
+  );
+}
diff --git a/apps/web/src/components/ToastContainer.tsx b/apps/web/src/components/ToastContainer.tsx
new file mode 100644
index 0000000..1483697
--- /dev/null
+++ b/apps/web/src/components/ToastContainer.tsx
@@ -0,0 +1,49 @@
+import { useToastQueue, type Toast, type ToastVariant } from "../state/ToastContext";
+import { AlertTriangleIcon, CheckCircleIcon, XCircleIcon, XIcon } from "./icons";
+
+const VARIANT_STYLE: Record<ToastVariant, string> = {
+  success: "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300",
+  error: "border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-300",
+  info: "border-slate-200 bg-white text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200",
+};
+
+const VARIANT_ICON: Record<ToastVariant, typeof CheckCircleIcon> = {
+  success: CheckCircleIcon,
+  error: XCircleIcon,
+  info: AlertTriangleIcon,
+};
+
+function ToastRow({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
+  const Icon = VARIANT_ICON[toast.variant];
+  return (
+    <div
+      role="status"
+      className={`flex animate-[toastIn_150ms_ease-out] items-start gap-2 rounded-lg border px-3 py-2.5 text-sm shadow-lg ${VARIANT_STYLE[toast.variant]}`}
+    >
+      <Icon className="mt-0.5 h-4 w-4 shrink-0" />
+      <p className="flex-1">{toast.message}</p>
+      <button
+        type="button"
+        onClick={() => onDismiss(toast.id)}
+        aria-label="Dismiss"
+        className="shrink-0 opacity-60 transition-opacity hover:opacity-100"
+      >
+        <XIcon className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+}
+
+/** Renders the shared toast queue fixed to the bottom-right — mount once, at the app root. */
+export function ToastContainer() {
+  const { toasts, dismissToast } = useToastQueue();
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex w-[calc(100vw-2rem)] max-w-sm flex-col gap-2">
+      {toasts.map((toast) => (
+        <ToastRow key={toast.id} toast={toast} onDismiss={dismissToast} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/VectorClockExplainer.tsx b/apps/web/src/components/VectorClockExplainer.tsx
index 0db8125..7d62480 100644
--- a/apps/web/src/components/VectorClockExplainer.tsx
+++ b/apps/web/src/components/VectorClockExplainer.tsx
@@ -40,14 +40,17 @@ export function VectorClockExplainer({ entry }: VectorClockExplainerProps) {
   if (current === undefined && incoming === undefined) return null;
 
   return (
-    <div className="mt-1 rounded-md bg-slate-50 p-2 text-xs text-slate-600" data-testid="vector-clock-explainer">
+    <div
+      className="mt-1 rounded-md bg-slate-50 p-2 text-xs text-slate-600 dark:bg-slate-800/60 dark:text-slate-400"
+      data-testid="vector-clock-explainer"
+    >
       <div className="grid grid-cols-2 gap-2">
         <div>
-          <div className="font-medium text-slate-500">Stored clock</div>
+          <div className="font-medium text-slate-500 dark:text-slate-400">Stored clock</div>
           <div data-testid="current-clock">{formatClock(current)}</div>
         </div>
         <div>
-          <div className="font-medium text-slate-500">Incoming clock</div>
+          <div className="font-medium text-slate-500 dark:text-slate-400">Incoming clock</div>
           <div data-testid="incoming-clock">{formatClock(incoming)}</div>
         </div>
       </div>
diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
index 9274009..75e9068 100644
--- a/apps/web/src/components/icons.tsx
+++ b/apps/web/src/components/icons.tsx
@@ -165,3 +165,37 @@ export function ArrowRightIcon({ className }: IconProps) {
     </svg>
   );
 }
+
+export function SunIcon({ className }: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <circle cx="12" cy="12" r="4.5" />
+      <path d="M12 2.5v2.5M12 19v2.5M4.6 4.6l1.8 1.8M17.6 17.6l1.8 1.8M2.5 12h2.5M19 12h2.5M4.6 19.4l1.8-1.8M17.6 6.4l1.8-1.8" />
+    </svg>
+  );
+}
+
+export function MoonIcon({ className }: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z" />
+    </svg>
+  );
+}
+
+export function XIcon({ className }: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" className={className}>
+      <path d="M6 6l12 12M18 6L6 18" />
+    </svg>
+  );
+}
+
+export function XCircleIcon({ className }: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M9 9l6 6M15 9l-6 6" />
+    </svg>
+  );
+}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 3ae3532..7cd42da 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-  background-color: #f8fafc;
+  @apply bg-slate-50 text-slate-900 transition-colors dark:bg-slate-950 dark:text-slate-100;
 }
 
 @keyframes fadeIn {
@@ -23,3 +23,14 @@ body {
     transform: translateY(4px);
   }
 }
+
+@keyframes toastIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
diff --git a/apps/web/src/pages/CheckoutPage.tsx b/apps/web/src/pages/CheckoutPage.tsx
index d949fc4..0cbb18c 100644
--- a/apps/web/src/pages/CheckoutPage.tsx
+++ b/apps/web/src/pages/CheckoutPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import type { Product } from "@stocksync/core";
 import { postCheckout, productsApi, type CheckoutLineItem, type CheckoutResponse } from "../api/client";
 import { CartDrawer } from "../components/CartDrawer";
+import { useToast } from "../state/ToastContext";
 
 export interface CheckoutPageProps {
   shopId: string;
@@ -20,6 +21,7 @@ export function CheckoutPage({ shopId, counterId }: CheckoutPageProps) {
   const [lineItems, setLineItems] = useState<CheckoutLineItem[]>([]);
   const [receipt, setReceipt] = useState<CheckoutResponse | undefined>(undefined);
   const [error, setError] = useState(false);
+  const { showToast } = useToast();
 
   useEffect(() => {
     productsApi
@@ -51,8 +53,10 @@ export function CheckoutPage({ shopId, counterId }: CheckoutPageProps) {
       setReceipt(result);
       setLineItems([]);
       setError(false);
+      showToast(`Order ${result.order_id} completed — total ₹${result.total_amount}.`, "success");
     } catch {
       setError(true);
+      showToast("Checkout failed — check the connection and try again.", "error");
     }
   }
 
@@ -62,12 +66,15 @@ export function CheckoutPage({ shopId, counterId }: CheckoutPageProps) {
 
   return (
     <div className="mx-auto max-w-3xl p-4 sm:p-6">
-      <h1 className="mb-4 text-xl font-bold text-slate-900">Checkout</h1>
+      <h1 className="mb-4 text-xl font-bold text-slate-900 dark:text-slate-100">Checkout</h1>
 
-      {error && <p className="mb-4 text-sm text-rose-600">Something went wrong. Check the connection and try again.</p>}
+      {error && <p className="mb-4 text-sm text-rose-600 dark:text-rose-400">Something went wrong. Check the connection and try again.</p>}
 
       {receipt && (
-        <p className="mb-4 rounded-md bg-emerald-50 p-3 text-sm text-emerald-800" data-testid="checkout-receipt">
+        <p
+          className="mb-4 rounded-md bg-emerald-50 p-3 text-sm text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300"
+          data-testid="checkout-receipt"
+        >
           Order {receipt.order_id} completed — total ₹{receipt.total_amount}.
         </p>
       )}
@@ -79,13 +86,13 @@ export function CheckoutPage({ shopId, counterId }: CheckoutPageProps) {
             type="button"
             onClick={() => addToCart(product)}
             data-testid={`cart-add-${product.product_id}`}
-            className="rounded-lg border border-slate-200 bg-white p-3 text-left text-sm hover:bg-slate-50"
+            className="rounded-lg border border-slate-200 bg-white p-3 text-left text-sm hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800"
           >
-            <div className="font-medium text-slate-900">{product.name}</div>
-            <div className="text-slate-500">₹{product.base_price ?? 0}</div>
+            <div className="font-medium text-slate-900 dark:text-slate-100">{product.name}</div>
+            <div className="text-slate-500 dark:text-slate-400">₹{product.base_price ?? 0}</div>
           </button>
         ))}
-        {products.length === 0 && <p className="text-sm text-slate-400">No products in the catalog yet.</p>}
+        {products.length === 0 && <p className="text-sm text-slate-400 dark:text-slate-500">No products in the catalog yet.</p>}
       </div>
 
       <CartDrawer lineItems={lineItems} productName={productName} onRemove={removeFromCart} />
@@ -94,7 +101,7 @@ export function CheckoutPage({ shopId, counterId }: CheckoutPageProps) {
         type="button"
         onClick={() => void handleCheckout()}
         disabled={lineItems.length === 0}
-        className="mt-4 w-full rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-40"
+        className="mt-4 w-full rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-300"
       >
         Complete checkout
       </button>
diff --git a/apps/web/src/pages/CounterPage.tsx b/apps/web/src/pages/CounterPage.tsx
index fba3f34..3314587 100644
--- a/apps/web/src/pages/CounterPage.tsx
+++ b/apps/web/src/pages/CounterPage.tsx
@@ -12,6 +12,8 @@ import { QueueDrawer } from "../components/QueueDrawer";
 import { ConflictReviewPanel } from "../components/ConflictReviewPanel";
 import { AuditLogView } from "../components/AuditLogView";
 import { BarcodeScanButton } from "../components/BarcodeScanButton";
+import { ItemCardSkeleton } from "../components/Skeleton";
+import { useToast } from "../state/ToastContext";
 import { AlertTriangleIcon, BoxIcon, ClockHistoryIcon, ScanIcon } from "../components/icons";
 
 function useQueryParam(name: string, fallback: string): string {
@@ -36,6 +38,7 @@ export function CounterPage() {
 
   const { state, dispatch } = useShopContext();
   const { isOnline, toggleOffline } = useConnectivity();
+  const { showToast } = useToast();
   const { submitTransaction, replayQueue } = useOfflineQueue(shopId, counterId, isOnline);
   useReplayOnReconnect(isOnline, replayQueue);
   useWebSocketSync(shopId, counterId, isOnline);
@@ -60,25 +63,21 @@ export function CounterPage() {
             <BoxIcon className="h-5 w-5" />
           </div>
           <div>
-            <h1 className="text-lg font-bold leading-tight text-slate-900 sm:text-xl">StockSync Counter</h1>
-            <p className="flex items-center gap-1.5 text-sm text-slate-500">
+            <h1 className="text-lg font-bold leading-tight text-slate-900 dark:text-slate-100 sm:text-xl">StockSync Counter</h1>
+            <p className="flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400">
               <span>{shopId}</span>
-              <span className="text-slate-300">·</span>
-              <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600">{counterId}</span>
+              <span className="text-slate-300 dark:text-slate-600">·</span>
+              <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
+                {counterId}
+              </span>
             </p>
           </div>
         </div>
         <ConnectivityToggle isOnline={isOnline} onToggle={toggleOffline} />
       </header>
 
-      {state.syncStatus === "loading" && (
-        <p className="mb-4 flex items-center gap-2 text-sm text-slate-400">
-          <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-slate-300 border-t-indigo-500" />
-          Loading inventory…
-        </p>
-      )}
       {state.syncStatus === "error" && (
-        <p className="mb-4 flex items-center gap-2 rounded-md border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
+        <p className="mb-4 flex items-center gap-2 rounded-md border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-300">
           <AlertTriangleIcon className="h-4 w-4 shrink-0" />
           Couldn't load inventory. Check the connection and try again.
         </p>
@@ -86,7 +85,7 @@ export function CounterPage() {
 
       {conflictedItems.length > 0 && (
         <section className="mb-6 space-y-3">
-          <h2 className="flex items-center gap-1.5 text-sm font-semibold text-amber-800">
+          <h2 className="flex items-center gap-1.5 text-sm font-semibold text-amber-800 dark:text-amber-400">
             <AlertTriangleIcon className="h-4 w-4" />
             Needs your review
           </h2>
@@ -102,6 +101,7 @@ export function CounterPage() {
                 // or WebSocket push — this panel doesn't optimistically
                 // clear itself, since a human decision on a real conflict
                 // deserves server confirmation before the UI moves on.
+                showToast(`Resolved the "${item.conflict_candidates.field}" conflict on ${item.name ?? item.item_id}.`, "success");
               }}
             />
           ))}
@@ -115,9 +115,9 @@ export function CounterPage() {
             explicit clicks as picking the item from the list below. */}
         <BarcodeScanButton items={items} onResolved={(itemId) => setScannedItemId(itemId)} />
         {scannedItemId && (
-          <div className="mt-2 flex animate-[fadeIn_150ms_ease-out] items-center gap-2 rounded-md border border-indigo-200 bg-indigo-50 p-2 text-sm">
+          <div className="mt-2 flex animate-[fadeIn_150ms_ease-out] items-center gap-2 rounded-md border border-indigo-200 bg-indigo-50 p-2 text-sm dark:border-indigo-900 dark:bg-indigo-950/50">
             <ScanIcon className="h-4 w-4 shrink-0 text-indigo-500" />
-            <span className="flex-1 text-indigo-900">
+            <span className="flex-1 text-indigo-900 dark:text-indigo-200">
               Scanned: <span className="font-medium">{items.find((item) => item.item_id === scannedItemId)?.name ?? scannedItemId}</span>
             </span>
             <button
@@ -136,14 +136,14 @@ export function CounterPage() {
                 void submitTransaction({ itemId: scannedItemId, type: "restock", quantity: 1 });
                 setScannedItemId(undefined);
               }}
-              className="rounded-md border border-slate-300 bg-white px-2 py-1 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50 active:scale-95"
+              className="rounded-md border border-slate-300 bg-white px-2 py-1 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50 active:scale-95 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
             >
               Restock 1
             </button>
             <button
               type="button"
               onClick={() => setScannedItemId(undefined)}
-              className="text-xs text-indigo-400 hover:text-indigo-600"
+              className="text-xs text-indigo-400 hover:text-indigo-600 dark:text-indigo-300 dark:hover:text-indigo-100"
             >
               Cancel
             </button>
@@ -152,29 +152,31 @@ export function CounterPage() {
       </section>
 
       <section className="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
-        {items.map((item) => (
-          <ItemCard
-            key={item.item_id}
-            item={item}
-            highlighted={item.item_id === scannedItemId}
-            onSell={(itemId) => void submitTransaction({ itemId, type: "sale", quantity: 1 })}
-            onRestock={(itemId) => void submitTransaction({ itemId, type: "restock", quantity: 1 })}
-            onFieldUpdate={(itemId, field, value) => void submitTransaction({ itemId, type: "field_update", field, value })}
-          />
-        ))}
+        {state.syncStatus === "loading"
+          ? Array.from({ length: 4 }, (_, i) => <ItemCardSkeleton key={i} />)
+          : items.map((item) => (
+              <ItemCard
+                key={item.item_id}
+                item={item}
+                highlighted={item.item_id === scannedItemId}
+                onSell={(itemId) => void submitTransaction({ itemId, type: "sale", quantity: 1 })}
+                onRestock={(itemId) => void submitTransaction({ itemId, type: "restock", quantity: 1 })}
+                onFieldUpdate={(itemId, field, value) => void submitTransaction({ itemId, type: "field_update", field, value })}
+              />
+            ))}
       </section>
 
       <section className="mb-6">
-        <h2 className="mb-2 flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-          <BoxIcon className="h-4 w-4 text-slate-400" />
+        <h2 className="mb-2 flex items-center gap-1.5 text-sm font-semibold text-slate-700 dark:text-slate-300">
+          <BoxIcon className="h-4 w-4 text-slate-400 dark:text-slate-500" />
           Pending queue
         </h2>
         <QueueDrawer entries={state.queue} />
       </section>
 
       <section>
-        <h2 className="mb-2 flex items-center gap-1.5 text-sm font-semibold text-slate-700">
-          <ClockHistoryIcon className="h-4 w-4 text-slate-400" />
+        <h2 className="mb-2 flex items-center gap-1.5 text-sm font-semibold text-slate-700 dark:text-slate-300">
+          <ClockHistoryIcon className="h-4 w-4 text-slate-400 dark:text-slate-500" />
           Audit trail
         </h2>
         <div className="mb-2 flex flex-wrap gap-2">
@@ -185,8 +187,8 @@ export function CounterPage() {
               onClick={() => setAuditItemId(item.item_id)}
               className={`rounded-md border px-2 py-1 text-xs ${
                 auditItemId === item.item_id
-                  ? "border-slate-900 bg-slate-900 text-white"
-                  : "border-slate-300 text-slate-600 hover:bg-slate-50"
+                  ? "border-slate-900 bg-slate-900 text-white dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900"
+                  : "border-slate-300 text-slate-600 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-800"
               }`}
             >
               {item.item_id}
@@ -196,7 +198,7 @@ export function CounterPage() {
         {auditItemId ? (
           <AuditLogView itemId={auditItemId} shopId={shopId} />
         ) : (
-          <p className="text-sm text-slate-400">Pick an item to view its history.</p>
+          <p className="text-sm text-slate-400 dark:text-slate-500">Pick an item to view its history.</p>
         )}
       </section>
     </div>
diff --git a/apps/web/src/pages/DashboardPage.tsx b/apps/web/src/pages/DashboardPage.tsx
index 6a2ec86..f7d3a32 100644
--- a/apps/web/src/pages/DashboardPage.tsx
+++ b/apps/web/src/pages/DashboardPage.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { getDashboard, type DashboardResponse } from "../api/client";
+import { DashboardSkeleton } from "../components/Skeleton";
 import { AlertTriangleIcon, CheckCircleIcon, TagIcon } from "../components/icons";
 
 export interface DashboardPageProps {
@@ -7,9 +8,11 @@ export interface DashboardPageProps {
 }
 
 function trustScoreTone(percent: number): { text: string; ring: string } {
-  if (percent >= 90) return { text: "text-emerald-700", ring: "border-emerald-200 bg-emerald-50" };
-  if (percent >= 70) return { text: "text-amber-700", ring: "border-amber-200 bg-amber-50" };
-  return { text: "text-rose-700", ring: "border-rose-200 bg-rose-50" };
+  if (percent >= 90)
+    return { text: "text-emerald-700 dark:text-emerald-400", ring: "border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/40" };
+  if (percent >= 70)
+    return { text: "text-amber-700 dark:text-amber-400", ring: "border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/40" };
+  return { text: "text-rose-700 dark:text-rose-400", ring: "border-rose-200 bg-rose-50 dark:border-rose-900 dark:bg-rose-950/40" };
 }
 
 /**
@@ -40,7 +43,7 @@ export function DashboardPage({ shopId }: DashboardPageProps) {
   if (error) {
     return (
       <div className="mx-auto max-w-3xl p-4 sm:p-6">
-        <p className="text-sm text-rose-600">Couldn't load the dashboard. Check the connection and try again.</p>
+        <p className="text-sm text-rose-600 dark:text-rose-400">Couldn't load the dashboard. Check the connection and try again.</p>
       </div>
     );
   }
@@ -48,7 +51,8 @@ export function DashboardPage({ shopId }: DashboardPageProps) {
   if (!data) {
     return (
       <div className="mx-auto max-w-3xl p-4 sm:p-6">
-        <p className="text-sm text-slate-500">Loading…</p>
+        <h1 className="mb-4 text-xl font-bold text-slate-900 dark:text-slate-100">Dashboard</h1>
+        <DashboardSkeleton />
       </div>
     );
   }
@@ -57,48 +61,50 @@ export function DashboardPage({ shopId }: DashboardPageProps) {
 
   return (
     <div className="mx-auto max-w-3xl p-4 sm:p-6">
-      <h1 className="mb-4 text-xl font-bold text-slate-900">Dashboard</h1>
+      <h1 className="mb-4 text-xl font-bold text-slate-900 dark:text-slate-100">Dashboard</h1>
 
       <div className="grid gap-4 sm:grid-cols-3">
-        <div className="rounded-xl border border-slate-200 bg-white p-4">
-          <p className="text-xs font-medium text-slate-500">Total revenue</p>
-          <p className="mt-1 text-2xl font-bold text-slate-900">₹{data.revenue.total.toLocaleString()}</p>
-          <p className="mt-1 text-xs text-slate-500">{data.revenue.order_count} orders · ₹{data.revenue.average_order_value} avg</p>
+        <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+          <p className="text-xs font-medium text-slate-500 dark:text-slate-400">Total revenue</p>
+          <p className="mt-1 text-2xl font-bold text-slate-900 dark:text-slate-100">₹{data.revenue.total.toLocaleString()}</p>
+          <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
+            {data.revenue.order_count} orders · ₹{data.revenue.average_order_value} avg
+          </p>
         </div>
 
-        <div className="rounded-xl border border-slate-200 bg-white p-4">
-          <p className="text-xs font-medium text-slate-500">Last 7 days</p>
-          <p className="mt-1 text-2xl font-bold text-slate-900">₹{data.revenue.last_7_days.toLocaleString()}</p>
+        <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+          <p className="text-xs font-medium text-slate-500 dark:text-slate-400">Last 7 days</p>
+          <p className="mt-1 text-2xl font-bold text-slate-900 dark:text-slate-100">₹{data.revenue.last_7_days.toLocaleString()}</p>
         </div>
 
         <div className={`rounded-xl border p-4 ${tone.ring}`}>
-          <p className="text-xs font-medium text-slate-500">Trust score</p>
+          <p className="text-xs font-medium text-slate-500 dark:text-slate-400">Trust score</p>
           <p className={`mt-1 flex items-center gap-1.5 text-2xl font-bold ${tone.text}`}>
             <CheckCircleIcon className="h-5 w-5" />
             {data.trust_score.percent}%
           </p>
-          <p className="mt-1 text-xs text-slate-500">
+          <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
             {data.trust_score.items_with_open_conflict} of {data.trust_score.total_items} items have an open conflict
           </p>
         </div>
       </div>
 
-      <div className="mt-6 rounded-xl border border-slate-200 bg-white p-4">
-        <h2 className="flex items-center gap-1.5 text-sm font-semibold text-slate-900">
+      <div className="mt-6 rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+        <h2 className="flex items-center gap-1.5 text-sm font-semibold text-slate-900 dark:text-slate-100">
           <AlertTriangleIcon className="h-4 w-4 text-amber-500" />
           Low stock
         </h2>
         {data.low_stock.length === 0 ? (
-          <p className="mt-2 text-sm text-slate-500">Nothing running low right now.</p>
+          <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">Nothing running low right now.</p>
         ) : (
-          <ul className="mt-3 divide-y divide-slate-100">
+          <ul className="mt-3 divide-y divide-slate-100 dark:divide-slate-800">
             {data.low_stock.map((item) => (
               <li key={item.item_id} className="flex items-center justify-between py-2 text-sm">
-                <span className="flex items-center gap-1.5 text-slate-800">
-                  <TagIcon className="h-3.5 w-3.5 text-slate-400" />
+                <span className="flex items-center gap-1.5 text-slate-800 dark:text-slate-300">
+                  <TagIcon className="h-3.5 w-3.5 text-slate-400 dark:text-slate-500" />
                   {item.name ?? item.item_id}
                 </span>
-                <span className={item.stock === 0 ? "font-semibold text-rose-600" : "text-amber-600"}>
+                <span className={item.stock === 0 ? "font-semibold text-rose-600 dark:text-rose-400" : "text-amber-600 dark:text-amber-400"}>
                   {item.stock} left
                 </span>
               </li>
diff --git a/apps/web/src/pages/HeroPage.tsx b/apps/web/src/pages/HeroPage.tsx
index 3423398..f92dd8a 100644
--- a/apps/web/src/pages/HeroPage.tsx
+++ b/apps/web/src/pages/HeroPage.tsx
@@ -1,5 +1,6 @@
 import { BoxIcon, WifiOffIcon, MergeIcon, SparklesIcon, BoltIcon, ArrowRightIcon } from "../components/icons";
 import { AuthPanel } from "../components/AuthPanel";
+import { ThemeToggle } from "../components/ThemeToggle";
 
 const STEPS = [
   {
@@ -49,33 +50,36 @@ const FEATURES = [
  */
 export function HeroPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-indigo-50 via-white to-white">
+    <div className="min-h-screen bg-gradient-to-b from-indigo-50 via-white to-white dark:from-indigo-950/40 dark:via-slate-950 dark:to-slate-950">
       <nav className="mx-auto flex max-w-5xl items-center justify-between p-4 sm:p-6">
         <div className="flex items-center gap-2">
           <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-600 text-white">
             <BoxIcon className="h-5 w-5" />
           </div>
-          <span className="font-bold text-slate-900">StockSync</span>
+          <span className="font-bold text-slate-900 dark:text-slate-100">StockSync</span>
+        </div>
+        <div className="flex items-center gap-3">
+          <a
+            href="https://github.com/Monolithic-Dev/stocksync"
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200"
+          >
+            View source ↗
+          </a>
+          <ThemeToggle />
         </div>
-        <a
-          href="https://github.com/Monolithic-Dev/stocksync"
-          target="_blank"
-          rel="noreferrer"
-          className="text-sm font-medium text-slate-500 hover:text-slate-800"
-        >
-          View source ↗
-        </a>
       </nav>
 
       <header className="mx-auto max-w-3xl px-4 pb-12 pt-8 text-center sm:pb-20 sm:pt-16">
-        <p className="inline-flex items-center gap-1.5 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700">
+        <p className="inline-flex items-center gap-1.5 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300">
           <SparklesIcon className="h-3.5 w-3.5" />
           Offline-first inventory sync, proven with math, not hope
         </p>
-        <h1 className="mt-4 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-5xl">
+        <h1 className="mt-4 text-3xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
           Inventory that never loses a sale — even offline.
         </h1>
-        <p className="mt-4 text-base text-slate-600 sm:text-lg">
+        <p className="mt-4 text-base text-slate-600 dark:text-slate-400 sm:text-lg">
           Two billing counters, one shaky connection. StockSync guarantees that when both go offline and sell the
           same item, reconnecting always converges to one correct stock count — never a silent overwrite.
         </p>
@@ -88,7 +92,7 @@ export function HeroPage() {
           </a>
           <a
             href="#how-it-works"
-            className="rounded-md border border-slate-300 px-5 py-3 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50"
+            className="rounded-md border border-slate-300 px-5 py-3 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
           >
             How it works
           </a>
@@ -96,16 +100,16 @@ export function HeroPage() {
       </header>
 
       <section id="how-it-works" className="mx-auto max-w-4xl px-4 py-12">
-        <h2 className="text-center text-sm font-semibold uppercase tracking-wide text-indigo-600">How it works</h2>
+        <h2 className="text-center text-sm font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">How it works</h2>
         <div className="mt-6 grid gap-6 sm:grid-cols-3">
           {STEPS.map((step, i) => (
-            <div key={step.title} className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">
+            <div key={step.title} className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400">
                 <step.icon className="h-5 w-5" />
               </div>
-              <p className="mt-3 text-xs font-semibold text-slate-400">Step {i + 1}</p>
-              <h3 className="mt-1 font-semibold text-slate-900">{step.title}</h3>
-              <p className="mt-1.5 text-sm text-slate-600">{step.body}</p>
+              <p className="mt-3 text-xs font-semibold text-slate-400 dark:text-slate-500">Step {i + 1}</p>
+              <h3 className="mt-1 font-semibold text-slate-900 dark:text-slate-100">{step.title}</h3>
+              <p className="mt-1.5 text-sm text-slate-600 dark:text-slate-400">{step.body}</p>
             </div>
           ))}
         </div>
@@ -114,10 +118,10 @@ export function HeroPage() {
       <section className="mx-auto max-w-5xl px-4 py-12">
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
           {FEATURES.map((feature) => (
-            <div key={feature.title} className="rounded-xl border border-slate-200 bg-white p-4">
-              <feature.icon className="h-5 w-5 text-indigo-600" />
-              <h3 className="mt-2 text-sm font-semibold text-slate-900">{feature.title}</h3>
-              <p className="mt-1 text-xs text-slate-600">{feature.body}</p>
+            <div key={feature.title} className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
+              <feature.icon className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
+              <h3 className="mt-2 text-sm font-semibold text-slate-900 dark:text-slate-100">{feature.title}</h3>
+              <p className="mt-1 text-xs text-slate-600 dark:text-slate-400">{feature.body}</p>
             </div>
           ))}
         </div>
@@ -127,7 +131,7 @@ export function HeroPage() {
         <AuthPanel />
       </section>
 
-      <footer className="border-t border-slate-100 py-8 text-center text-xs text-slate-400">
+      <footer className="border-t border-slate-100 py-8 text-center text-xs text-slate-400 dark:border-slate-800 dark:text-slate-500">
         Built for a hackathon demo — see the README for what's in scope and what's deliberately not.
       </footer>
     </div>
diff --git a/apps/web/src/pages/ProductsPage.tsx b/apps/web/src/pages/ProductsPage.tsx
index 3ffc55a..1e2af6a 100644
--- a/apps/web/src/pages/ProductsPage.tsx
+++ b/apps/web/src/pages/ProductsPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import type { Category, Product, Supplier } from "@stocksync/core";
 import { categoriesApi, productsApi, suppliersApi } from "../api/client";
 import { ProductForm, type ProductFormValues } from "../components/ProductForm";
+import { useToast } from "../state/ToastContext";
 
 export interface ProductsPageProps {
   shopId: string;
@@ -19,6 +20,7 @@ export function ProductsPage({ shopId }: ProductsPageProps) {
   const [categories, setCategories] = useState<Category[]>([]);
   const [suppliers, setSuppliers] = useState<Supplier[]>([]);
   const [error, setError] = useState(false);
+  const { showToast } = useToast();
 
   async function reload(): Promise<void> {
     try {
@@ -42,13 +44,23 @@ export function ProductsPage({ shopId }: ProductsPageProps) {
   }, [shopId]);
 
   async function handleCreate(values: ProductFormValues): Promise<void> {
-    await productsApi.create(shopId, values);
-    await reload();
+    try {
+      await productsApi.create(shopId, values);
+      await reload();
+      showToast(`Added ${values.name} to the catalog.`, "success");
+    } catch {
+      showToast("Couldn't add that product — check the connection and try again.", "error");
+    }
   }
 
-  async function handleDelete(productId: string): Promise<void> {
-    await productsApi.remove(shopId, productId);
-    await reload();
+  async function handleDelete(productId: string, productName: string): Promise<void> {
+    try {
+      await productsApi.remove(shopId, productId);
+      await reload();
+      showToast(`Removed ${productName} from the catalog.`, "success");
+    } catch {
+      showToast("Couldn't remove that product — check the connection and try again.", "error");
+    }
   }
 
   function categoryName(categoryId: string | undefined): string {
@@ -61,9 +73,11 @@ export function ProductsPage({ shopId }: ProductsPageProps) {
 
   return (
     <div className="mx-auto max-w-3xl p-4 sm:p-6">
-      <h1 className="mb-4 text-xl font-bold text-slate-900">Products</h1>
+      <h1 className="mb-4 text-xl font-bold text-slate-900 dark:text-slate-100">Products</h1>
 
-      {error && <p className="mb-4 text-sm text-rose-600">Couldn't load the catalog. Check the connection and try again.</p>}
+      {error && (
+        <p className="mb-4 text-sm text-rose-600 dark:text-rose-400">Couldn't load the catalog. Check the connection and try again.</p>
+      )}
 
       <div className="mb-4">
         <ProductForm categories={categories} suppliers={suppliers} onSubmit={(values) => void handleCreate(values)} />
@@ -71,7 +85,7 @@ export function ProductsPage({ shopId }: ProductsPageProps) {
 
       <table className="w-full text-left text-sm">
         <thead>
-          <tr className="border-b border-slate-200 text-slate-500">
+          <tr className="border-b border-slate-200 text-slate-500 dark:border-slate-800 dark:text-slate-400">
             <th className="py-2">Name</th>
             <th className="py-2">SKU</th>
             <th className="py-2">Category</th>
@@ -82,17 +96,23 @@ export function ProductsPage({ shopId }: ProductsPageProps) {
         </thead>
         <tbody>
           {products.map((product) => (
-            <tr key={product.product_id} data-testid={`product-row-${product.product_id}`} className="border-b border-slate-100">
-              <td className="py-2 font-medium text-slate-900">{product.name}</td>
-              <td className="py-2 text-slate-600">{product.sku ?? "—"}</td>
-              <td className="py-2 text-slate-600">{categoryName(product.category_id)}</td>
-              <td className="py-2 text-slate-600">{supplierName(product.supplier_id)}</td>
-              <td className="py-2 text-right text-slate-900">{product.base_price !== undefined ? `₹${product.base_price}` : "—"}</td>
+            <tr
+              key={product.product_id}
+              data-testid={`product-row-${product.product_id}`}
+              className="border-b border-slate-100 dark:border-slate-800"
+            >
+              <td className="py-2 font-medium text-slate-900 dark:text-slate-100">{product.name}</td>
+              <td className="py-2 text-slate-600 dark:text-slate-400">{product.sku ?? "—"}</td>
+              <td className="py-2 text-slate-600 dark:text-slate-400">{categoryName(product.category_id)}</td>
+              <td className="py-2 text-slate-600 dark:text-slate-400">{supplierName(product.supplier_id)}</td>
+              <td className="py-2 text-right text-slate-900 dark:text-slate-100">
+                {product.base_price !== undefined ? `₹${product.base_price}` : "—"}
+              </td>
               <td className="py-2 text-right">
                 <button
                   type="button"
-                  onClick={() => void handleDelete(product.product_id)}
-                  className="text-xs text-rose-600 hover:underline"
+                  onClick={() => void handleDelete(product.product_id, product.name)}
+                  className="text-xs text-rose-600 hover:underline dark:text-rose-400"
                 >
                   Delete
                 </button>
@@ -101,7 +121,7 @@ export function ProductsPage({ shopId }: ProductsPageProps) {
           ))}
           {products.length === 0 && (
             <tr>
-              <td colSpan={6} className="py-4 text-center text-slate-400">
+              <td colSpan={6} className="py-4 text-center text-slate-400 dark:text-slate-500">
                 No products yet — add one above.
               </td>
             </tr>
diff --git a/apps/web/src/pages/StaffPage.tsx b/apps/web/src/pages/StaffPage.tsx
index ddcc4c2..77b34fa 100644
--- a/apps/web/src/pages/StaffPage.tsx
+++ b/apps/web/src/pages/StaffPage.tsx
@@ -1,5 +1,6 @@
 import { useState, type FormEvent } from "react";
 import { postStaffInvite } from "../api/client";
+import { useToast } from "../state/ToastContext";
 
 /**
  * Owner-only (App.tsx only renders this for role === "owner"; the server
@@ -15,6 +16,7 @@ export function StaffPage() {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
   const [invited, setInvited] = useState<{ email: string; role: string }[]>([]);
+  const { showToast } = useToast();
 
   async function handleSubmit(event: FormEvent): Promise<void> {
     event.preventDefault();
@@ -24,8 +26,10 @@ export function StaffPage() {
       const result = await postStaffInvite(email, role);
       setInvited((prev) => [...prev, { email: result.email, role: result.role }]);
       setEmail("");
+      showToast(`Invited ${result.email} as ${result.role === "manager" ? "a manager" : "counter staff"}.`, "success");
     } catch {
       setError("Couldn't invite that person — check the email address and try again.");
+      showToast("Couldn't send that invite — check the email address and try again.", "error");
     } finally {
       setBusy(false);
     }
@@ -33,15 +37,18 @@ export function StaffPage() {
 
   return (
     <div className="mx-auto max-w-xl px-4 py-8 sm:px-6">
-      <h1 className="text-xl font-bold text-slate-900">Invite staff</h1>
-      <p className="mt-1 text-sm text-slate-600">
+      <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Invite staff</h1>
+      <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">
         Managers can edit the catalog and run checkout. Counter staff can browse the catalog and run checkout, but
         can't add, edit, or delete products, categories, or suppliers.
       </p>
 
-      <form className="mt-5 flex flex-col gap-3 rounded-xl border border-slate-200 bg-white p-5 sm:flex-row sm:items-end" onSubmit={handleSubmit}>
+      <form
+        className="mt-5 flex flex-col gap-3 rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900 sm:flex-row sm:items-end"
+        onSubmit={handleSubmit}
+      >
         <div className="flex-1">
-          <label htmlFor="staff-email" className="mb-1 block text-xs font-medium text-slate-500">
+          <label htmlFor="staff-email" className="mb-1 block text-xs font-medium text-slate-500 dark:text-slate-400">
             Email
           </label>
           <input
@@ -51,18 +58,18 @@ export function StaffPage() {
             value={email}
             onChange={(event) => setEmail(event.target.value)}
             placeholder="staff@shop.com"
-            className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
           />
         </div>
         <div>
-          <label htmlFor="staff-role" className="mb-1 block text-xs font-medium text-slate-500">
+          <label htmlFor="staff-role" className="mb-1 block text-xs font-medium text-slate-500 dark:text-slate-400">
             Role
           </label>
           <select
             id="staff-role"
             value={role}
             onChange={(event) => setRole(event.target.value as "manager" | "counter_staff")}
-            className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
+            className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
           >
             <option value="counter_staff">Counter staff</option>
             <option value="manager">Manager</option>
@@ -76,14 +83,14 @@ export function StaffPage() {
           Send invite
         </button>
       </form>
-      {error && <p className="mt-2 text-xs text-red-600">{error}</p>}
+      {error && <p className="mt-2 text-xs text-red-600 dark:text-red-400">{error}</p>}
 
       {invited.length > 0 && (
-        <ul className="mt-5 divide-y divide-slate-100 rounded-xl border border-slate-200 bg-white">
+        <ul className="mt-5 divide-y divide-slate-100 rounded-xl border border-slate-200 bg-white dark:divide-slate-800 dark:border-slate-800 dark:bg-slate-900">
           {invited.map((entry) => (
             <li key={entry.email} className="flex items-center justify-between px-4 py-2.5 text-sm">
-              <span className="text-slate-800">{entry.email}</span>
-              <span className="text-xs text-slate-500">{entry.role}</span>
+              <span className="text-slate-800 dark:text-slate-300">{entry.email}</span>
+              <span className="text-xs text-slate-500 dark:text-slate-400">{entry.role}</span>
             </li>
           ))}
         </ul>
diff --git a/apps/web/src/state/ThemeContext.tsx b/apps/web/src/state/ThemeContext.tsx
new file mode 100644
index 0000000..39fca37
--- /dev/null
+++ b/apps/web/src/state/ThemeContext.tsx
@@ -0,0 +1,57 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+
+export type Theme = "light" | "dark";
+
+interface ThemeContextValue {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+const STORAGE_KEY = "stocksync-theme";
+
+function readInitialTheme(): Theme {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+    // localStorage unavailable (private browsing, blocked storage) — fall
+    // through to the system preference, same as a first-ever visit.
+  }
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+/**
+ * Owns the app-wide light/dark preference: reads it once (localStorage,
+ * falling back to the OS preference), applies it as a `dark` class on
+ * <html> (the hook Tailwind's `darkMode: "class"` looks for), and persists
+ * every change. A per-viewer convenience, so localStorage is the right
+ * store here — never anything server-synced.
+ */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(readInitialTheme);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    try {
+      localStorage.setItem(STORAGE_KEY, theme);
+    } catch {
+      // Best-effort persistence only — the toggle still works for this
+      // session even if storage is blocked.
+    }
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((current) => (current === "dark" ? "light" : "dark"));
+  }, []);
+
+  const value = useMemo<ThemeContextValue>(() => ({ theme, toggleTheme }), [theme, toggleTheme]);
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within a ThemeProvider");
+  return ctx;
+}
diff --git a/apps/web/src/state/ToastContext.tsx b/apps/web/src/state/ToastContext.tsx
new file mode 100644
index 0000000..f86d8cb
--- /dev/null
+++ b/apps/web/src/state/ToastContext.tsx
@@ -0,0 +1,66 @@
+import { createContext, useCallback, useContext, useMemo, useRef, useState, type ReactNode } from "react";
+
+export type ToastVariant = "success" | "error" | "info";
+
+export interface Toast {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+}
+
+interface ToastContextValue {
+  toasts: Toast[];
+  showToast: (message: string, variant?: ToastVariant) => void;
+  dismissToast: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+const AUTO_DISMISS_MS = 4000;
+
+/**
+ * App-wide toast queue — a lightweight, dependency-free stack (no toast
+ * library pulled in for a handful of confirmation messages, same call
+ * this codebase already made for icons.tsx). Rendered once by
+ * ToastContainer at the app root; any component calls useToast() to push
+ * onto the shared queue.
+ */
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  const dismissToast = useCallback((id: string) => {
+    setToasts((current) => current.filter((toast) => toast.id !== id));
+    const timer = timers.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.current.delete(id);
+    }
+  }, []);
+
+  const showToast = useCallback(
+    (message: string, variant: ToastVariant = "info") => {
+      const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      setToasts((current) => [...current, { id, message, variant }]);
+      const timer = setTimeout(() => dismissToast(id), AUTO_DISMISS_MS);
+      timers.current.set(id, timer);
+    },
+    [dismissToast],
+  );
+
+  const value = useMemo<ToastContextValue>(() => ({ toasts, showToast, dismissToast }), [toasts, showToast, dismissToast]);
+
+  return <ToastContext.Provider value={value}>{children}</ToastContext.Provider>;
+}
+
+export function useToast(): Pick<ToastContextValue, "showToast"> {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return { showToast: ctx.showToast };
+}
+
+/** Internal — only ToastContainer needs the full queue + dismiss handle. */
+export function useToastQueue(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToastQueue must be used within a ToastProvider");
+  return ctx;
+}
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 93aa364..55f0484 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: "class",
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
   theme: {
     extend: {},
diff --git a/apps/web/test/App.test.tsx b/apps/web/test/App.test.tsx
index 7b9701c..00cac63 100644
--- a/apps/web/test/App.test.tsx
+++ b/apps/web/test/App.test.tsx
@@ -103,6 +103,20 @@ describe("App — signed in", () => {
     expect(window.location.search).toBe("?counter_id=counter_a");
   });
 
+  it("the theme toggle in the top bar switches the app into dark mode", async () => {
+    signInAs("owner");
+    window.history.pushState({}, "", "/?counter_id=counter_a");
+    const user = userEvent.setup();
+    render(<App />);
+    await screen.findByText("Parle-G 100g");
+
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+    await user.click(screen.getByRole("button", { name: /switch to dark mode/i }));
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+
+    document.documentElement.classList.remove("dark");
+  });
+
   it("a URL that already carries counter_id skips the picker", async () => {
     signInAs("owner");
     window.history.pushState({}, "", "/?counter_id=counter_b");
diff --git a/apps/web/test/pages/HeroPage.test.tsx b/apps/web/test/pages/HeroPage.test.tsx
index d6b9824..116c610 100644
--- a/apps/web/test/pages/HeroPage.test.tsx
+++ b/apps/web/test/pages/HeroPage.test.tsx
@@ -1,20 +1,30 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it } from "vitest";
+import type { ReactNode } from "react";
 import { HeroPage } from "../../src/pages/HeroPage";
 import { AuthProvider } from "../../src/state/AuthContext";
+import { ThemeProvider } from "../../src/state/ThemeContext";
 import { setTokens } from "../../src/lib/tokenStore";
 
 afterEach(() => {
   setTokens(null);
 });
 
+function Providers({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider>
+      <AuthProvider>{children}</AuthProvider>
+    </ThemeProvider>
+  );
+}
+
 describe("HeroPage", () => {
   it("renders the value proposition and how-it-works steps", () => {
     render(
-      <AuthProvider>
+      <Providers>
         <HeroPage />
-      </AuthProvider>,
+      </Providers>,
     );
 
     expect(screen.getByRole("heading", { name: /inventory that never loses a sale/i })).toBeInTheDocument();
@@ -23,9 +33,9 @@ describe("HeroPage", () => {
 
   it("defaults to the sign-in form", () => {
     render(
-      <AuthProvider>
+      <Providers>
         <HeroPage />
-      </AuthProvider>,
+      </Providers>,
     );
 
     expect(screen.getByRole("heading", { name: /^sign in$/i })).toBeInTheDocument();
@@ -34,9 +44,9 @@ describe("HeroPage", () => {
   it("toggling to sign-up shows the shop-name field, and back again returns to sign-in", async () => {
     const user = userEvent.setup();
     render(
-      <AuthProvider>
+      <Providers>
         <HeroPage />
-      </AuthProvider>,
+      </Providers>,
     );
 
     await user.click(screen.getByText(/new shop\? create an account instead/i));
diff --git a/apps/web/test/pages/StaffPage.test.tsx b/apps/web/test/pages/StaffPage.test.tsx
index 639b1a7..a28e79b 100644
--- a/apps/web/test/pages/StaffPage.test.tsx
+++ b/apps/web/test/pages/StaffPage.test.tsx
@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { StaffPage } from "../../src/pages/StaffPage";
+import { ToastProvider } from "../../src/state/ToastContext";
 
 const postStaffInviteMock = vi.fn();
 
@@ -13,11 +14,19 @@ beforeEach(() => {
   postStaffInviteMock.mockReset();
 });
 
+function renderStaffPage(): void {
+  render(
+    <ToastProvider>
+      <StaffPage />
+    </ToastProvider>,
+  );
+}
+
 describe("StaffPage", () => {
   it("invites a staff member with the chosen role and lists them on success", async () => {
     postStaffInviteMock.mockResolvedValue({ email: "manager@shop.com", role: "manager", shop_id: "demo-shop" });
     const user = userEvent.setup();
-    render(<StaffPage />);
+    renderStaffPage();
 
     await user.type(screen.getByLabelText(/email/i), "manager@shop.com");
     await user.selectOptions(screen.getByLabelText(/role/i), "manager");
@@ -30,7 +39,7 @@ describe("StaffPage", () => {
   it("defaults to inviting counter staff", async () => {
     postStaffInviteMock.mockResolvedValue({ email: "clerk@shop.com", role: "counter_staff", shop_id: "demo-shop" });
     const user = userEvent.setup();
-    render(<StaffPage />);
+    renderStaffPage();
 
     await user.type(screen.getByLabelText(/email/i), "clerk@shop.com");
     await user.click(screen.getByRole("button", { name: /send invite/i }));
@@ -41,7 +50,7 @@ describe("StaffPage", () => {
   it("shows an error when the invite fails", async () => {
     postStaffInviteMock.mockRejectedValue(new Error("boom"));
     const user = userEvent.setup();
-    render(<StaffPage />);
+    renderStaffPage();
 
     await user.type(screen.getByLabelText(/email/i), "bad@shop.com");
     await user.click(screen.getByRole("button", { name: /send invite/i }));
diff --git a/apps/web/test/state/ThemeContext.test.tsx b/apps/web/test/state/ThemeContext.test.tsx
new file mode 100644
index 0000000..65c7205
--- /dev/null
+++ b/apps/web/test/state/ThemeContext.test.tsx
@@ -0,0 +1,78 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ThemeProvider, useTheme } from "../../src/state/ThemeContext";
+
+function ThemeProbe() {
+  const { theme, toggleTheme } = useTheme();
+  return (
+    <button type="button" onClick={toggleTheme}>
+      {theme}
+    </button>
+  );
+}
+
+beforeEach(() => {
+  document.documentElement.classList.remove("dark");
+});
+
+afterEach(() => {
+  document.documentElement.classList.remove("dark");
+  vi.unstubAllGlobals();
+});
+
+describe("ThemeContext", () => {
+  it("defaults to light and applies no dark class when the OS doesn't prefer dark", () => {
+    vi.stubGlobal("matchMedia", vi.fn().mockReturnValue({ matches: false }));
+    render(
+      <ThemeProvider>
+        <ThemeProbe />
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByRole("button")).toHaveTextContent("light");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+
+  it("defaults to dark and applies the dark class when the OS prefers dark", () => {
+    vi.stubGlobal("matchMedia", vi.fn().mockReturnValue({ matches: true }));
+    render(
+      <ThemeProvider>
+        <ThemeProbe />
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByRole("button")).toHaveTextContent("dark");
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+  });
+
+  it("toggling switches the theme and updates the <html> class accordingly", async () => {
+    vi.stubGlobal("matchMedia", vi.fn().mockReturnValue({ matches: false }));
+    const user = userEvent.setup();
+    render(
+      <ThemeProvider>
+        <ThemeProbe />
+      </ThemeProvider>,
+    );
+
+    await user.click(screen.getByRole("button"));
+    expect(screen.getByRole("button")).toHaveTextContent("dark");
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+
+    await user.click(screen.getByRole("button"));
+    expect(screen.getByRole("button")).toHaveTextContent("light");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+
+  it("never throws even when matchMedia is unavailable (older browsers)", () => {
+    vi.stubGlobal("matchMedia", undefined);
+    expect(() =>
+      render(
+        <ThemeProvider>
+          <ThemeProbe />
+        </ThemeProvider>,
+      ),
+    ).not.toThrow();
+    expect(screen.getByRole("button")).toHaveTextContent("light");
+  });
+});
diff --git a/apps/web/test/state/ToastContext.test.tsx b/apps/web/test/state/ToastContext.test.tsx
new file mode 100644
index 0000000..7a54553
--- /dev/null
+++ b/apps/web/test/state/ToastContext.test.tsx
@@ -0,0 +1,91 @@
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ToastProvider, useToast } from "../../src/state/ToastContext";
+import { ToastContainer } from "../../src/components/ToastContainer";
+
+function ToastProbe() {
+  const { showToast } = useToast();
+  return (
+    <div>
+      <button type="button" onClick={() => showToast("Saved successfully", "success")}>
+        Fire success
+      </button>
+      <button type="button" onClick={() => showToast("Something broke", "error")}>
+        Fire error
+      </button>
+    </div>
+  );
+}
+
+function renderWithToasts() {
+  return render(
+    <ToastProvider>
+      <ToastProbe />
+      <ToastContainer />
+    </ToastProvider>,
+  );
+}
+
+beforeEach(() => {
+  vi.useFakeTimers({ shouldAdvanceTime: true });
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("ToastContext / ToastContainer", () => {
+  it("renders nothing when the queue is empty", () => {
+    renderWithToasts();
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+
+  it("pushing a toast renders it with the right message and variant styling hook", async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithToasts();
+
+    await user.click(screen.getByRole("button", { name: /fire success/i }));
+
+    expect(await screen.findByText("Saved successfully")).toBeInTheDocument();
+  });
+
+  it("multiple toasts stack in the order they were fired", async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithToasts();
+
+    await user.click(screen.getByRole("button", { name: /fire success/i }));
+    await user.click(screen.getByRole("button", { name: /fire error/i }));
+
+    const toasts = await screen.findAllByRole("status");
+    expect(toasts).toHaveLength(2);
+    expect(toasts[0]).toHaveTextContent("Saved successfully");
+    expect(toasts[1]).toHaveTextContent("Something broke");
+  });
+
+  it("a toast auto-dismisses after its timeout", async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithToasts();
+
+    await user.click(screen.getByRole("button", { name: /fire success/i }));
+    expect(await screen.findByText("Saved successfully")).toBeInTheDocument();
+
+    act(() => {
+      vi.advanceTimersByTime(4100);
+    });
+
+    await waitFor(() => expect(screen.queryByText("Saved successfully")).not.toBeInTheDocument());
+  });
+
+  it("clicking the dismiss button removes the toast immediately", async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithToasts();
+
+    await user.click(screen.getByRole("button", { name: /fire success/i }));
+    await screen.findByText("Saved successfully");
+
+    await user.click(screen.getByRole("button", { name: /dismiss/i }));
+
+    expect(screen.queryByText("Saved successfully")).not.toBeInTheDocument();
+  });
+});