/** * 品牌主题覆盖（可选） * * - 删除下方 @media not all 外壳并改色：覆盖默认蓝，换肤无需 rebuild * - 保持注释 / 删除文件：回退 globals.css + antd-theme 默认蓝（404 无妨） * * Docker 挂载示例（compose 中默认注释，需要时打开）： * ./branding/theme.css:/app/public/branding/theme.css:ro * * 改色步骤： * 1. 改 --color-primary-50 ~ 900 * 2. 同步改 --color-primary-a* 的 rgba 回退值（color-mix 行在支持的浏览器会跟 500） * * 注意：下方示例使用永不匹配的 @media not all 默认禁用，因此段内可保留正常注释。 * 启用时只需删除 @media not all 外壳（开始行和最后一个右花括号）。 */ :root { /* ---- Tailwind / 业务侧主色阶 ---- */ --color-primary-50: #f2f4f7; --color-primary-100: #dfe5f1; --color-primary-200: #b9cae9; --color-primary-300: #8aaae5; --color-primary-400: #4a7dde; --color-primary-500: #1e50ae; /* 品牌主色 */ --color-primary-600: #1c4ca5; /* 官网辅色，对齐站点 */ --color-primary-700: #012f96; /* 官网深色，对齐站点 */ --color-primary-800: #0d2759; --color-primary-900: #0c1c3c; /* ---- 主色透明度变体（@ant-design/x Conversations / Sender / ThoughtChain 等） ---- */ /* 先写 rgba 作为旧浏览器回退，再写 color-mix 以便只改 500 时自动跟随 */ --color-primary-a06: rgba(19, 194, 194, 0.06); --color-primary-a06: color-mix(in srgb, var(--color-primary-500) 6%, transparent); --color-primary-a08: rgba(19, 194, 194, 0.08); --color-primary-a08: color-mix(in srgb, var(--color-primary-500) 8%, transparent); --color-primary-a10: rgba(19, 194, 194, 0.1); --color-primary-a10: color-mix(in srgb, var(--color-primary-500) 10%, transparent); --color-primary-a15: rgba(19, 194, 194, 0.15); --color-primary-a15: color-mix(in srgb, var(--color-primary-500) 15%, transparent); --color-primary-a22: rgba(19, 194, 194, 0.22); --color-primary-a22: color-mix(in srgb, var(--color-primary-500) 22%, transparent); --color-primary-a25: rgba(19, 194, 194, 0.25); --color-primary-a25: color-mix(in srgb, var(--color-primary-500) 25%, transparent); --color-primary-a45: rgba(19, 194, 194, 0.45); --color-primary-a45: color-mix(in srgb, var(--color-primary-500) 45%, transparent); --color-primary-a65: rgba(19, 194, 194, 0.65); --color-primary-a65: color-mix(in srgb, var(--color-primary-500) 65%, transparent); /* ---- 语义色 ---- */ --color-surface: #ffffff; --color-background: #f5faf9; --color-border-default: #d9e8e6; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; /* ---- 品牌渐变 ---- */ --brand-gradient-from: var(--color-primary-300); --brand-gradient-to: var(--color-primary-500); } /* ---- Ant Design / Ant Design X CSS Variables（cssVar key = app） ---- */ /* html.app .app 提升权重，覆盖组件节点自身的 .app. 变量。 */ html.app, html.app .app { /* ---- 全局 Token ---- */ --ant-color-primary: var(--color-primary-500); --ant-color-primary-hover: var(--color-primary-400); --ant-color-primary-active: var(--color-primary-600); --ant-color-primary-bg: var(--color-primary-50); --ant-color-primary-bg-hover: var(--color-primary-100); --ant-color-primary-border: var(--color-primary-200); --ant-color-primary-border-hover: var(--color-primary-300); --ant-color-primary-text: var(--color-primary-500); --ant-color-primary-text-hover: var(--color-primary-400); --ant-color-primary-text-active: var(--color-primary-600); --ant-color-info: var(--color-primary-500); --ant-color-info-hover: var(--color-primary-400); --ant-color-info-active: var(--color-primary-600); --ant-color-info-bg: var(--color-primary-50); --ant-color-info-border: var(--color-primary-200); --ant-color-link: var(--color-primary-500); --ant-color-link-hover: var(--color-primary-400); --ant-color-link-active: var(--color-primary-600); --ant-color-success: var(--color-success); --ant-color-warning: var(--color-warning); --ant-color-error: var(--color-danger); --ant-color-bg-layout: var(--color-background); --ant-color-border: var(--color-border-default); /* ---- antd 组件 Token 兜底 ---- */ --ant-input-hover-border-color: var(--color-primary-400); --ant-input-active-border-color: var(--color-primary-500); --ant-input-number-hover-border-color: var(--color-primary-400); --ant-input-number-active-border-color: var(--color-primary-500); --ant-tabs-ink-bar-color: var(--color-primary-500); --ant-tabs-item-selected-color: var(--color-primary-500); --ant-tabs-item-hover-color: var(--color-primary-400); --ant-tabs-item-active-color: var(--color-primary-600); --ant-button-default-hover-color: var(--color-primary-400); --ant-button-default-hover-border-color: var(--color-primary-400); --ant-button-default-active-color: var(--color-primary-600); --ant-button-default-active-border-color: var(--color-primary-600); --ant-button-group-border-color: var(--color-primary-400); --ant-checkbox-color-primary: var(--color-primary-500); --ant-checkbox-color-primary-hover: var(--color-primary-400); --ant-radio-color-primary: var(--color-primary-500); --ant-radio-color-primary-hover: var(--color-primary-400); --ant-switch-color-primary: var(--color-primary-500); --ant-switch-color-primary-hover: var(--color-primary-400); /* ---- @ant-design/x：Conversations（新对话按钮等） ---- */ --ant-conversations-creation-bg-color: var(--color-primary-a15); --ant-conversations-creation-border-color: var(--color-primary-a22); --ant-conversations-creation-hover-color: var(--color-primary-a25); --ant-conversations-shortcut-key-text-color: var(--color-primary-a65); /* ---- @ant-design/x：Sender（输入框插槽 / 技能胶囊 / 操作按钮） ---- */ --ant-sender-color-bg-slot: var(--color-primary-a06); --ant-sender-color-bg-skill: var(--color-primary-a08); --ant-sender-color-bg-skill-hover: var(--color-primary-a15); --ant-sender-color-text-slot: var(--color-primary-500); --ant-sender-color-text-slot-placeholder: var(--color-primary-a25); --ant-sender-color-border-slot: var(--color-primary-a06); --ant-sender-color-border-slot-hover: var(--color-primary-a10); --ant-sender-switch-checked-bg: var(--color-primary-a08); --ant-sender-switch-checked-hover-bg: var(--color-primary-a10); --ant-sender-color-bg-actions-disabled: var(--color-primary-a45); --ant-sender-color-text-actions-disabled: var(--color-primary-a45); --ant-sender-box-shadow-input: 0 4px 12px 0 var(--color-primary-a10); /* ---- @ant-design/x：ThoughtChain ---- */ --ant-thought-chain-color-primary-disabled: var(--color-primary-a45); }