theming

src/apps/officer-web/Screens/Dashboard/Dock.tsx

@@ -46,7 +46,8 @@ export const Dock = ({ items, className }: DockProps) => {
       ref={dockRef}
       onMouseMove={handleMouseMove}
       onMouseLeave={handleMouseLeave}
-      className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-[550] items-end gap-2 md:gap-6 px-2 py-1.5 md:px-3 md:py-2 rounded-2xl border border-white/10 bg-black/15 backdrop-blur-xl shadow-lg ${className ?? 'flex'}`}
+      className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-[550] items-end gap-2 md:gap-6 px-2 py-1.5 md:px-3 md:py-2 rounded-2xl border backdrop-blur-xl shadow-lg ${className ?? 'flex'}`}
+      style={{ backgroundColor: 'var(--dock-bg)', borderColor: 'var(--dock-border)' }}
     >
       {items.map((item, index) => {
         const iconCenter = DOCK_PADDING + index * (ICON_SIZE + ICON_GAP) + ICON_SIZE / 2;
@@ -64,7 +65,10 @@ export const Dock = ({ items, className }: DockProps) => {
               transition: 'transform 150ms ease-out',
             }}
           >
-            <span className="absolute -top-9 px-2 py-1 rounded-md bg-black/75 text-white text-xs whitespace-nowrap hidden md:block opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none">
+            <span
+              className="absolute -top-9 px-2 py-1 rounded-md text-white text-xs whitespace-nowrap hidden md:block opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none"
+              style={{ backgroundColor: 'var(--dock-tooltip-bg)' }}
+            >
               {item.label}
             </span>
             <div

src/apps/officer-web/Screens/Dashboard/Layout.tsx

@@ -65,7 +65,7 @@ export function DashboardLayout({ children, mobileFull }: DashboardLayoutProps)
         <div
           className="absolute inset-0 z-0"
           style={{
-            backgroundImage: 'url(/static/landscape1.jpg)',
+            backgroundImage: 'var(--page-bg-image)',
             backgroundSize: 'cover',
             backgroundPosition: 'center center',
           }}
@@ -73,7 +73,10 @@ export function DashboardLayout({ children, mobileFull }: DashboardLayoutProps)
 
         {/* Content layer - above pixel grid */}
         <div className="absolute inset-0 z-[520] flex flex-col">
-          <header className="shrink-0 border-b border-white/20 bg-white/10 backdrop-blur-xl shadow-lg px-3 py-2 md:px-6 md:py-3 flex items-center justify-between">
+          <header
+            className="shrink-0 border-b backdrop-blur-xl shadow-lg px-3 py-2 md:px-6 md:py-3 flex items-center justify-between"
+            style={{ backgroundColor: 'var(--glass-bg)', borderColor: 'var(--glass-border)' }}
+          >
             <Link to="/">
               <img
                 src="/static/officer-logo.svg"

src/apps/officer-web/Screens/LandingPage/Layout.tsx

@@ -36,7 +36,7 @@ export function AuthLayout({ children }: AuthLayoutProps) {
         <div
           className="absolute inset-0 z-0"
           style={{
-            backgroundImage: 'url(/static/landscape1.jpg)',
+            backgroundImage: 'var(--page-bg-image)',
             backgroundSize: 'cover',
             backgroundPosition: 'center center',
           }}

src/apps/officer-web/Screens/LandingPage/components/PixelGrid.tsx

@@ -4,8 +4,8 @@ export function PixelGrid() {
       className="fixed inset-0 pointer-events-none z-[500]"
       style={{
         backgroundImage: `
-          linear-gradient(to right, rgba(20, 83, 45, 0.1) 1px, transparent 1px),
+          linear-gradient(to right, var(--pixel-grid-color) 1px, transparent 1px),
-          linear-gradient(to bottom, rgba(20, 83, 45, 0.1) 1px, transparent 1px)
+          linear-gradient(to bottom, var(--pixel-grid-color) 1px, transparent 1px)
         `,
         backgroundSize: '20px 20px',
       }}

src/workspaces/themes/DuckPond/client.ts

@@ -1,2 +1,4 @@
 import './variables.css';
 import './prose.css';
+
+document.documentElement.style.setProperty('--page-bg-image', 'url(/static/landscape1.jpg)');

src/workspaces/themes/DuckPond/variables.css

@@ -8,6 +8,16 @@
     --duck-dark: #14532D;
     --duck-beige: #E7D4B5;
 
+    /* Page background (--page-bg-image set via client.ts to avoid bundler url() resolution) */
+    --pixel-grid-color: rgba(20, 83, 45, 0.1);
+
+    /* Glass surfaces */
+    --glass-bg: rgba(255, 255, 255, 0.1);
+    --glass-border: rgba(255, 255, 255, 0.2);
+    --dock-bg: rgba(0, 0, 0, 0.15);
+    --dock-border: rgba(255, 255, 255, 0.1);
+    --dock-tooltip-bg: rgba(0, 0, 0, 0.75);
+
     /* Card component */
     --card-bg: rgba(255, 255, 255, 0.9);
     --card-grid-color: rgba(20, 83, 45, 0.08);
@@ -81,6 +91,16 @@
   }
 
   .dark {
+    /* Page background */
+    --pixel-grid-color: rgba(200, 230, 210, 0.08);
+
+    /* Glass surfaces */
+    --glass-bg: rgba(0, 0, 0, 0.2);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --dock-bg: rgba(0, 0, 0, 0.3);
+    --dock-border: rgba(255, 255, 255, 0.08);
+    --dock-tooltip-bg: rgba(0, 0, 0, 0.85);
+
     /* Card component */
     --card-bg: rgba(10, 20, 15, 0.9);
     --card-grid-color: rgba(200, 230, 210, 0.06);