StellarCommons · Tinna23 · Jun 21, 2026 · Jun 21, 2026
diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -8,22 +8,22 @@
     "start": "next start",
     "lint": "eslint",
     "smoke-test": "bash ../../scripts/smoke-test.sh"
-
   },
   "dependencies": {
+    "next": "15.5.3",
     "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "next": "15.5.3"
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
-    "@eslint/eslintrc": "^3"
+    "eslint-config-prettier": "^9.1.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }
diff --git a/packages/ui/src/app/globals.css b/packages/ui/src/app/globals.css
@@ -1,20 +1,73 @@
 @import "tailwindcss";
 
+/* ── Dark theme (default) ── */
 :root {
-  --background: #080c12;
-  --foreground: #e8eaf0;
+  --bg-base: #080c12;
+  --bg-card: rgba(255,255,255,0.04);
+  --bg-card-hover: rgba(255,255,255,0.06);
+  --border-subtle: rgba(255,255,255,0.08);
+  --border-accent: rgba(56,189,248,0.3);
+  --text-primary: rgba(255,255,255,0.90);
+  --text-secondary: rgba(255,255,255,0.50);
+  --text-muted: rgba(255,255,255,0.25);
+  --text-mono: rgba(255,255,255,0.40);
+  --accent-sky: #38bdf8;
+  --accent-sky-dim: rgba(56,189,248,0.1);
+  --accent-purple: #a78bfa;
+  --accent-purple-dim: rgba(167,139,250,0.1);
+  --pill-success-bg: rgba(34,197,94,0.12);
+  --pill-success-text: #86efac;
+  --pill-fail-bg: rgba(239,68,68,0.12);
+  --pill-fail-text: #fca5a5;
+  --pill-warning-bg: rgba(245,158,11,0.12);
+  --pill-warning-text: #fcd34d;
+  --pill-default-bg: rgba(56,189,248,0.12);
+  --pill-default-text: #7dd3fc;
+  --grid-line: rgba(255,255,255,0.025);
+  --glow-sky: rgba(56,189,248,0.06);
+}
+
+/* ── Light theme ── */
+[data-theme="light"] {
+  --bg-base: #f0f4f8;
+  --bg-card: rgba(0,0,0,0.03);
+  --bg-card-hover: rgba(0,0,0,0.05);
+  --border-subtle: rgba(0,0,0,0.08);
+  --border-accent: rgba(2,132,199,0.3);
+  --text-primary: rgba(0,0,0,0.90);
+  --text-secondary: rgba(0,0,0,0.55);
+  --text-muted: rgba(0,0,0,0.30);
+  --text-mono: rgba(0,0,0,0.45);
+  --accent-sky: #0284c7;
+  --accent-sky-dim: rgba(2,132,199,0.08);
+  --accent-purple: #7c3aed;
+  --accent-purple-dim: rgba(124,58,237,0.08);
+  --pill-success-bg: rgba(22,163,74,0.10);
+  --pill-success-text: #15803d;
+  --pill-fail-bg: rgba(220,38,38,0.10);
+  --pill-fail-text: #b91c1c;
+  --pill-warning-bg: rgba(180,83,9,0.10);
+  --pill-warning-text: #92400e;
+  --pill-default-bg: rgba(2,132,199,0.10);
+  --pill-default-text: #0369a1;
+  --grid-line: rgba(0,0,0,0.04);
+  --glow-sky: rgba(2,132,199,0.04);
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
+  --color-background: var(--bg-base);
+  --color-foreground: var(--text-primary);
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
 }
 
+html {
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
 body {
-  background: var(--background);
-  color: var(--foreground);
+  background: var(--bg-base);
+  color: var(--text-primary);
 }
 
 @keyframes animate-in {
@@ -25,10 +78,12 @@ body {
 .animate-in {
   animation: animate-in 0.25s ease-out forwards;
 }
+
 @keyframes fadeSlideUp {
   from { opacity: 0; transform: translateY(8px); }
   to   { opacity: 1; transform: translateY(0); }
 }
+
 .animate-fadeSlideUp {
   animation: fadeSlideUp 0.35s ease forwards;
-}
+}
diff --git a/packages/ui/src/app/layout.tsx b/packages/ui/src/app/layout.tsx
@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 import { IBM_Plex_Mono, IBM_Plex_Sans } from "next/font/google";
 import "./globals.css";
 import NetworkStatusBanner from "@/components/NetworkStatusBanner";
-// import NetworkStatusBanner from "@/components/NetworkStatusBanner";
 
 const ibmPlexMono = IBM_Plex_Mono({
   variable: "--font-mono",
@@ -27,12 +26,19 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" data-theme="dark">
+      <head>
+        {/* Prevent flash of wrong theme on initial load */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){var t=localStorage.getItem('stellar-explain-theme');if(!t)t=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';document.documentElement.setAttribute('data-theme',t);})();`,
+          }}
+        />
+      </head>
       <body
         className={`${ibmPlexMono.variable} ${ibmPlexSans.variable} antialiased`}
         suppressHydrationWarning
       >
-        {" "}
         <NetworkStatusBanner />
         {children}
       </body>

diff --git a/packages/ui/src/app/page.tsx b/packages/ui/src/app/page.tsx
@@ -10,38 +10,35 @@ import WhatWeDecodeSection from '@/components/landing/WhatWeDecodeSection';
 export default function LandingPage() {
   return (
     <div
-      className="min-h-screen bg-[#080c12] text-white overflow-x-clip"
-      style={{ fontFamily: "'IBM Plex Sans', system-ui, sans-serif" }}
+      className="min-h-screen overflow-x-clip"
+      style={{
+        background: "var(--bg-base)",
+        color: "var(--text-primary)",
+        fontFamily: "'IBM Plex Sans', system-ui, sans-serif",
+      }}
     >
       {/* ── Background layers ── */}
       <div
         className="fixed inset-0 pointer-events-none"
         style={{
           backgroundImage:
-            'linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px)',
+            'linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px)',
           backgroundSize: '48px 48px',
         }}
       />
       <div
         className="fixed inset-0 pointer-events-none opacity-30"
         style={{
           backgroundImage:
-            'linear-gradient(135deg, rgba(56,189,248,0.03) 25%, transparent 25%), linear-gradient(225deg, rgba(56,189,248,0.03) 25%, transparent 25%)',
+            'linear-gradient(135deg, var(--glow-sky) 25%, transparent 25%), linear-gradient(225deg, var(--glow-sky) 25%, transparent 25%)',
           backgroundSize: '96px 96px',
         }}
       />
       <div
         className="fixed top-0 left-1/2 -translate-x-1/2 w-[900px] h-[500px] pointer-events-none"
         style={{
           background:
-            'radial-gradient(ellipse at 50% 0%, rgba(56,189,248,0.08) 0%, transparent 65%)',
-        }}
-      />
-      <div
-        className="fixed bottom-0 left-0 w-[500px] h-[400px] pointer-events-none"
-        style={{
-          background:
-            'radial-gradient(ellipse at 0% 100%, rgba(56,189,248,0.04) 0%, transparent 60%)',
+            'radial-gradient(ellipse at 50% 0%, var(--glow-sky) 0%, transparent 65%)',
         }}
       />
 

diff --git a/packages/ui/src/components/AccountResult.tsx b/packages/ui/src/components/AccountResult.tsx
@@ -3,9 +3,6 @@ import { Card } from "@/components/Card";
 import { Label } from "@/components/Label";
 import { Pill } from "@/components/Pill";
 import { formatBalance } from "@/lib/utils";
-// import SaveAddressButton from "@/components/addressbook/SaveAddressButton";
-// import QRShareButton from "@/components/QRShareButton";
-// import { useAppShell } from "@/components/AppShellContext";
 
 interface AccountResultProps {
   data: AccountExplanation;
@@ -15,73 +12,63 @@ interface AccountResultProps {
   onRemoveSaved: () => void;
 }
 
-export function AccountResult({ data, isSaved, savedLabel, onSave, onRemoveSaved }: AccountResultProps) {
-//   const { personalise } = useAppShell();
-  const shareUrl = typeof window !== "undefined"
-    ? `${window.location.origin}/account/${data.address}`
-    : "";
-
+export function AccountResult({ data }: AccountResultProps) {
   return (
     <div className="space-y-4 animate-in">
 
       {/* header */}
       <div className="flex items-start justify-between gap-4 flex-wrap">
         <div className="min-w-0">
           <Label>Account</Label>
-          <p className="font-mono text-xs text-white/40 break-all">
+          <p
+            className="font-mono text-xs break-all"
+            style={{ color: "var(--text-mono)" }}
+          >
             {data.address}
           </p>
         </div>
-        {/* <div style={{ display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }}>
-          {data.org_name && (
-            <Pill label={data.org_name} variant="default" />
-          )}
-          <SaveAddressButton
-            address={data.address}
-            isSaved={isSaved}
-            savedLabel={savedLabel}
-            onSave={onSave}
-            onRemove={onRemoveSaved}
-          />
-          <QRShareButton
-            url={shareUrl}
-            label={`Account ${data.address.slice(0, 8)}…`}
-          />
-        </div> */}
       </div>
 
       {/* summary */}
       <Card>
         <Label>Summary</Label>
-        <p className="text-sm text-white/80 leading-relaxed">{data.summary}</p>
+        <p className="text-sm leading-relaxed" style={{ color: "var(--text-secondary)" }}>
+          {data.summary}
+        </p>
       </Card>
 
       {/* stats grid */}
       <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
         <Card>
           <Label>XLM Balance</Label>
-          <p className="text-lg font-mono text-white/90">
+          <p className="text-lg font-mono" style={{ color: "var(--text-primary)" }}>
             {formatBalance(data.xlm_balance)}
           </p>
-          <p className="text-[10px] text-white/30 font-mono mt-0.5">XLM</p>
+          <p className="text-[10px] font-mono mt-0.5" style={{ color: "var(--text-muted)" }}>XLM</p>
         </Card>
         <Card>
           <Label>Other Assets</Label>
-          <p className="text-lg font-mono text-white/90">{data.asset_count}</p>
-          <p className="text-[10px] text-white/30 font-mono mt-0.5">trust lines</p>
+          <p className="text-lg font-mono" style={{ color: "var(--text-primary)" }}>
+            {data.asset_count}
+          </p>
+          <p className="text-[10px] font-mono mt-0.5" style={{ color: "var(--text-muted)" }}>trust lines</p>
         </Card>
         <Card>
           <Label>Signers</Label>
-          <p className="text-lg font-mono text-white/90">{data.signer_count}</p>
-          <p className="text-[10px] text-white/30 font-mono mt-0.5">keys</p>
+          <p className="text-lg font-mono" style={{ color: "var(--text-primary)" }}>
+            {data.signer_count}
+          </p>
+          <p className="text-[10px] font-mono mt-0.5" style={{ color: "var(--text-muted)" }}>keys</p>
         </Card>
       </div>
 
       {/* home domain */}
       {data.home_domain && (
         <Card>
           <Label>Home Domain</Label>
-          <p className="text-sm font-mono text-white/70">{data.home_domain}</p>
+          <p className="text-sm font-mono" style={{ color: "var(--text-secondary)" }}>
+            {data.home_domain}
+          </p>
         </Card>
       )}
 

diff --git a/packages/ui/src/components/AddressChip.tsx b/packages/ui/src/components/AddressChip.tsx
@@ -7,7 +7,12 @@ interface AddressChipProps {
 export function AddressChip({ addr }: AddressChipProps) {
   return (
     <span
-      className="font-mono text-xs bg-white/5 border border-white/10 rounded px-2 py-0.5 text-white/60"
+      className="font-mono text-xs rounded px-2 py-0.5"
+      style={{
+        background: "var(--bg-card-hover)",
+        border: "1px solid var(--border-subtle)",
+        color: "var(--text-mono)",
+      }}
       title={addr}
     >
       {shortAddr(addr)}