/** * OpenCPAi 全局主题系统 v1.0 * =========================== * * 设计原则： * 1. 科技感 + 专业 + 优雅（适合财税审计人员，女性友好） * 2. 参考 ChatGPT/豆包/Notion 的成熟配色 * 3. 支持三种主题：深色(dark)、浅色(light)、中性(neutral) * * 使用方法： * 1. 在 HTML 中引入此文件 * 2. 在或上添加 data-theme="dark|light|neutral" * 3. 使用 CSS 变量，如 var(--bg-primary) */ /* ============================================ 一、语义化颜色变量（按用途命名） ============================================ */ :root { /* ========== 品牌色（固定不变）========== */ --brand-primary: #3B82F6; /* 品牌蓝 - 专业、可信赖 */ --brand-secondary: #8B5CF6; /* 品牌紫 - 科技、优雅 */ --brand-cyan: #06B6D4; /* 品牌青 - Lovable风格活力色 */ --brand-gradient: linear-gradient(135deg, #3B82F6, #8B5CF6); --brand-gradient-cyan: linear-gradient(135deg, #3B82F6, #06B6D4); /* ========== 功能色（固定不变）========== */ --color-success: #10B981; /* 成功/通过 - 绿色 */ --color-warning: #F59E0B; /* 警告/注意 - 橙色 */ --color-error: #EF4444; /* 错误/危险 - 红色 */ --color-info: #3B82F6; /* 信息/提示 - 蓝色 */ /* ========== 微信专用 ========== */ --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 { /* 背景层级（由深到浅）*/ --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(59, 130, 246, 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); /* 前景色 (通用) */ --foreground: #FAFAFA; --foreground-muted: #A3A3A3; } /* ============================================ 三、浅色主题 (Light) 参考: ChatGPT浅色模式、豆包 ============================================ */ [data-theme="light"] { /* 背景层级（由浅到深）*/ --bg-base: #FFFFFF; /* 最底层背景 */ --bg-primary: #FFFFFF; /* 主要背景 */ --bg-secondary: #F7F7F8; /* 次要背景（卡片、侧边栏）*/ --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(59, 130, 246, 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); /* 前景色 (通用) */ --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(139, 92, 246, 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); /* 前景色 (通用) */ --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(139, 92, 246, 0.3); color: var(--text-primary); } /* 下拉菜单选项 — 暗色主题兼容 */ [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 注入的