深蓝色ui

frontend-web/src/roundtable-planning/components/RecommendAgentsDialog.tsx

@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { listAgents, type Agent } from "@/core/agents";
+import { useTheme } from "@/contexts/ThemeContext";
 import { cn } from "@/lib/utils";
 
 import {
@@ -183,6 +184,11 @@ export function RecommendAgentsDialog({
   onCancel,
   onConfirm,
 }: RecommendAgentsDialogProps) {
+  // 弹窗经 Radix portal 渲染到 .roundtable-planning 之外，页面的深蓝 scoped 样式
+  // 够不着它。深色下手动挂上 .roundtable-planning--dark，让同一套深蓝 token + 兜底
+  // 映射也作用于弹窗；浅色不挂，弹窗浅色外观不变。
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
   const [state, setState] = useState<InternalState>(INITIAL_STATE);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
@@ -516,7 +522,12 @@ export function RecommendAgentsDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-3xl max-h-[85vh] flex flex-col overflow-hidden gap-3">
+      <DialogContent
+        className={cn(
+          "sm:max-w-3xl max-h-[85vh] flex flex-col overflow-hidden gap-3",
+          isDark && "roundtable-planning--dark",
+        )}
+      >
         <DialogHeader className="shrink-0">
           <DialogTitle className="flex items-center gap-2">
             <SparklesIcon className="size-5 text-purple-500" />

frontend-web/src/roundtable-planning/styles/roundtable-planning.css

@@ -55,6 +55,15 @@
   /* —— 功能语义色 —— */
   --destructive: #f5222d;         /* zs-001-06 错误 */
 
+  /* —— brand-* 别名改深蓝（关键）：globals.css 只在 :root 把 --brand-* 定为浅红/红，
+   *    .dark 未覆盖，导致组件里 var(--brand-200/900/950) 在深色下泛粉/泛红、与深蓝冲突。
+   *    这里改为渐蓝系 ZS-002，所有 bg-[var(--brand-200)] / text-[var(--brand-900)] 等
+   *    一并由红转蓝。 —— */
+  --workspace-brand: #1677ff;     /* 与 primary 对齐 */
+  --brand-200: #16335f;           /* 浅红 chip 底 → 深蓝软底（chip / 头像底） */
+  --brand-900: #4096ff;           /* 红强调 / 按钮 hover → 蓝（zs-002-05） */
+  --brand-950: #91caff;           /* 深红文字 → 浅蓝（zs-002-03，深底上可读） */
+
   /* —— 圆桌局部别名（回落到上面已覆盖的 token） —— */
   --rt-page-bg: var(--background);
   --rt-primary: var(--primary);
@@ -295,6 +304,33 @@
   background-color: color-mix(in oklch, #ec4899 18%, var(--card)) !important;
 }
 
+/* =============================================================================
+ * 残留红色清理 —— 内联 SVG 红填充 + 红色发光阴影 → 深蓝系。
+ * （这些是写死在组件里的红：头像 fill 属性、按钮 rgba(245,34,45) 阴影，
+ *   不经 token，需在此单独改写；仅深色生效。）
+ * ========================================================================== */
+
+/* 头像等内联 SVG 的红色 fill（CSS 可覆盖 SVG presentation 属性） */
+:is(.dark .roundtable-planning, .roundtable-planning--dark) [fill="#f5222d"] {
+  fill: #1677ff !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark) [fill="#cf1322"] {
+  fill: #0958d9 !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark) [fill="#a8071a"] {
+  fill: #003eb3 !important;
+}
+
+/* 红色发光阴影 → 蓝色发光 */
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  .shadow-\[0_2px_8px_rgba\(245\2c 34\2c 45\2c 0\.15\)\] {
+  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.28) !important;
+}
+:is(.dark .roundtable-planning, .roundtable-planning--dark)
+  .shadow-\[0_8px_30px_rgba\(245\2c 34\2c 45\2c 0\.06\)\] {
+  box-shadow: 0 8px 30px rgba(22, 119, 255, 0.14) !important;
+}
+
 /* =============================================================================
  * 结构件覆盖（顶栏 / 步骤条 / 次要按钮）—— 保留原有针对性规则。
  * ========================================================================== */