theming

2026-02-17 01:33:45 +00:00
parent a1e416e894
commit 3dc7383e11
6 changed files with 36 additions and 7 deletions
@@ -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
@@ -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"
@@ -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',
          }}
@@ -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 bottom, rgba(20, 83, 45, 0.1) 1px, transparent 1px)
+          linear-gradient(to right, var(--pixel-grid-color) 1px, transparent 1px),
+          linear-gradient(to bottom, var(--pixel-grid-color) 1px, transparent 1px)
        `,
        backgroundSize: '20px 20px',
      }}
@@ -1,2 +1,4 @@
 import './variables.css';
 import './prose.css';
+
+document.documentElement.style.setProperty('--page-bg-image', 'url(/static/landscape1.jpg)');
@@ -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);