/** * OpenRDai 全局主题系统 v1.0 * =========================== * * 设计原则： * 1. 科技感 + 专业 + 优雅（适合财税审计人员，女性友好） * 2. 参考 ChatGPT/豆包/Notion 的成熟配色 * 3. 支持三种主题：深色(dark)、浅色(light)、中性(neutral) * * 使用方法： * 1. 在 HTML 中引入此文件 * 2. 在或上添加 data-theme="dark|light|neutral" * 3. 使用 CSS 变量，如 var(--bg-primary) */ /* ============================================ 一、语义化颜色变量（按用途命名） ============================================ */ :root { /* ========== 品牌色（研小匠 V2：深翠绿 + 琥珀金）========== */ --brand-primary: #047857; /* 品牌主色 - emerald-700 深翠绿，研发/创新/合规，专业稳重 */ --brand-secondary: #D46B08; /* 品牌琥珀金 - 高新认定、首购优惠 */ --brand-cyan: #10B981; /* 品牌辅助色 - emerald-500 亮翠绿，hover/active 状态 */ --brand-gradient: linear-gradient(135deg, #047857, #10B981); --brand-gradient-cyan: linear-gradient(135deg, #047857, #34D399); /* ========== 功能色（精简为 3 色）========== */ --color-success: #389E0D; /* 成功/通过 - 低饱和绿 */ --color-warning: #D46B08; /* 警告/注意 - 琥珀金 */ --color-error: #EF4444; /* 错误/危险 - 红色（保持不变） */ --color-info: #047857; /* 信息/提示 - 科技蓝 */ /* ========== 风险/安全语义色 ========== */ --color-risk-text: #D46B08; --color-risk-bg: #FFF7E6; --color-safe-text: #389E0D; --color-safe-bg: #F6FFED; /* ========== 微信专用 ========== */ --wechat-green: #07C160; /* ========== 过渡动画 ========== */ --transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } /* ============================================ 二、深色主题 (Dark) - 默认参考: ChatGPT深色模式 ============================================ */ [data-theme="dark"], :root { /* ── 深色模式品牌色覆盖（提亮以保证暗背景可读性）── */ --brand-primary: #10B981; /* 深色背景下用 emerald-500 亮翠绿 */ --brand-cyan: #34D399; /* emerald-400 更亮的辅助绿 */ --brand-gradient: linear-gradient(135deg, #10B981, #34D399); --brand-gradient-cyan: linear-gradient(135deg, #10B981, #6EE7B7); /* 背景层级（由深到浅）*/ --bg-base: #0a0a0a; /* 最底层背景 */ --bg-primary: #0f0f0f; /* 主要背景 */ --bg-secondary: #171717; /* 次要背景（卡片、侧边栏）*/ --bg-tertiary: #1f1f1f; /* 第三层（悬浮、输入框）*/ --bg-elevated: #262626; /* 抬升层（下拉菜单、弹窗）*/ /* 文字层级（由亮到暗）*/ --text-primary: #FAFAFA; /* 主要文字 */ --text-secondary: #A3A3A3; /* 次要文字 */ --text-tertiary: #737373; /* 辅助文字 */ --text-disabled: #525252; /* 禁用文字 */ /* 边框 */ --border-default: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.15); --border-active: rgba(255, 255, 255, 0.25); /* 交互状态 */ --hover-overlay: rgba(255, 255, 255, 0.05); --active-overlay: rgba(255, 255, 255, 0.1); --focus-ring: rgba(24, 144, 255, 0.5); /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); /* 滚动条 */ --scrollbar-track: #1f1f1f; --scrollbar-thumb: #404040; --scrollbar-thumb-hover: #525252; /* 图标颜色 */ --color-icon-primary: #FAFAFA; --color-icon-secondary: #A3A3A3; --color-icon-tertiary: #737373; --color-icon-brand: var(--brand-primary); --color-icon-success: var(--color-success); --color-icon-warning: var(--color-warning); --color-icon-error: var(--color-error); /* 卡片/定价模块专用变量 */ --card-bg: rgba(23, 23, 23, 0.92); --card-border: rgba(255, 255, 255, 0.1); --section-bg: rgba(255, 255, 255, 0.04); /* 前景色 (通用) */ --foreground: #FAFAFA; --foreground-muted: #A3A3A3; } /* ============================================ 三、浅色主题 (Light) 参考: ChatGPT浅色模式、豆包 ============================================ */ [data-theme="light"] { /* 背景层级（微灰底 + 白色卡片）*/ --bg-base: #F4F6F9; /* 最底层背景 - 冷灰蓝 */ --bg-primary: #F4F6F9; /* 主要背景 */ --bg-secondary: #FFFFFF; /* 次要背景（卡片、侧边栏）*/ --bg-tertiary: #ECECF1; /* 第三层（悬浮、输入框）*/ --bg-elevated: #FFFFFF; /* 抬升层（下拉菜单、弹窗）*/ /* 文字层级（由深到浅）*/ --text-primary: #1A1A1A; /* 主要文字 */ --text-secondary: #6B6B6B; /* 次要文字 */ --text-tertiary: #8E8E8E; /* 辅助文字 */ --text-disabled: #ABABAB; /* 禁用文字 */ /* 边框 */ --border-default: rgba(0, 0, 0, 0.08); --border-hover: rgba(0, 0, 0, 0.15); --border-active: rgba(0, 0, 0, 0.25); /* 交互状态 */ --hover-overlay: rgba(0, 0, 0, 0.04); --active-overlay: rgba(0, 0, 0, 0.08); --focus-ring: rgba(24, 144, 255, 0.3); /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* 滚动条 */ --scrollbar-track: #F7F7F8; --scrollbar-thumb: #D1D1D1; --scrollbar-thumb-hover: #ABABAB; /* 图标颜色 */ --color-icon-primary: #1A1A1A; --color-icon-secondary: #6B6B6B; --color-icon-tertiary: #8E8E8E; --color-icon-brand: var(--brand-primary); --color-icon-success: var(--color-success); --color-icon-warning: var(--color-warning); --color-icon-error: var(--color-error); /* 卡片/定价模块专用变量 */ --card-bg: #ffffff; --card-border: #e5e7eb; --section-bg: #f9fafb; /* 前景色 (通用) */ --foreground: #1A1A1A; --foreground-muted: #6B6B6B; } /* ============================================ 四、中性主题 (Neutral) - 柔和深色参考: Notion深色、温柔科技风适合女性用户，柔和但不失专业 ============================================ */ [data-theme="neutral"] { /* 背景层级（柔和深色，带一点暖调）*/ --bg-base: #1A1B1E; /* 最底层背景 - 带微暖 */ --bg-primary: #1E1F23; /* 主要背景 */ --bg-secondary: #25262B; /* 次要背景 */ --bg-tertiary: #2C2D33; /* 第三层 */ --bg-elevated: #37383F; /* 抬升层 */ /* 文字层级（柔和白，不刺眼）*/ --text-primary: #E8E8ED; /* 主要文字 */ --text-secondary: #9898A0; /* 次要文字 */ --text-tertiary: #6C6C75; /* 辅助文字 */ --text-disabled: #4A4A52; /* 禁用文字 */ /* 边框 */ --border-default: rgba(255, 255, 255, 0.06); --border-hover: rgba(255, 255, 255, 0.12); --border-active: rgba(255, 255, 255, 0.2); /* 交互状态 */ --hover-overlay: rgba(255, 255, 255, 0.04); --active-overlay: rgba(255, 255, 255, 0.08); --focus-ring: rgba(245, 158, 11, 0.4); /* 紫色聚焦，更柔和 */ /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); /* 滚动条 */ --scrollbar-track: #25262B; --scrollbar-thumb: #3D3E45; --scrollbar-thumb-hover: #4D4E55; /* 图标颜色 */ --color-icon-primary: #E8E8ED; --color-icon-secondary: #9898A0; --color-icon-tertiary: #6C6C75; --color-icon-brand: var(--brand-secondary); --color-icon-success: var(--color-success); --color-icon-warning: var(--color-warning); --color-icon-error: var(--color-error); /* 卡片/定价模块专用变量 */ --card-bg: rgba(37, 38, 43, 0.92); --card-border: rgba(255, 255, 255, 0.08); --section-bg: rgba(255, 255, 255, 0.04); /* 前景色 (通用) */ --foreground: #E8E8ED; --foreground-muted: #9898A0; } /* ============================================ 五、通用基础样式 ============================================ */ /* 全局页面基色兜底：避免自定义 Tailwind 类失效时出现白底白字 */ html, body { background-color: var(--bg-base); color: var(--text-primary); } /* 全局过渡 */ *, *::before, *::after { transition: var(--transition-colors); } /* 滚动条样式 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* 选中文本颜色 */ ::selection { background: rgba(24, 144, 255, 0.3); color: var(--text-primary); } /* 全局 placeholder 颜色统一 */ input::placeholder, textarea::placeholder { color: #8C8C8C !important; opacity: 1; } /* 下拉菜单选项 — 暗色主题兼容 */ [data-theme="dark"] select option { background: #1F2937; color: #E5E7EB; } /* 聚焦样式 */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* ============================================ 六、Tailwind CSS 兼容类（!important 防御层）说明：Tailwind CDN 注入的