/** * 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-gradient: linear-gradient(135deg, #3B82F6, #8B5CF6); /* ========== 功能色（固定不变）========== */ --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; } /* ============================================ 三、浅色主题 (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; } /* ============================================ 四、中性主题 (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; } /* ============================================ 五、通用基础样式 ============================================ */ /* 全局过渡 */ *, *::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); } /* 聚焦样式 */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* ============================================ 六、Tailwind CSS 兼容类 ============================================ */ /* 背景色 */ .bg-base { background-color: var(--bg-base); } .bg-primary { background-color: var(--bg-primary); } .bg-secondary { background-color: var(--bg-secondary); } .bg-tertiary { background-color: var(--bg-tertiary); } .bg-elevated { background-color: var(--bg-elevated); } /* 文字色 */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-disabled { color: var(--text-disabled); } /* 边框色 */ .border-default { border-color: var(--border-default); } .border-hover { border-color: var(--border-hover); } /* 品牌色 */ .text-brand { color: var(--brand-primary); } .bg-brand { background-color: var(--brand-primary); } .bg-brand-gradient { background: var(--brand-gradient); } /* 功能色 */ .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-error { color: var(--color-error); } .bg-success { background-color: var(--color-success); } .bg-warning { background-color: var(--color-warning); } .bg-error { background-color: var(--color-error); } /* ============================================ 七、Jenny 个性化主题色（用户可选） ============================================ */ :root { /* 8种 Jenny 主题色 */ --jenny-sakura-primary: #FF69B4; --jenny-sakura-secondary: #FFB7C5; --jenny-lavender-primary: #9370DB; --jenny-lavender-secondary: #E6E6FA; --jenny-peach-primary: #FF7F50; --jenny-peach-secondary: #FFDAB9; --jenny-mint-primary: #3CB371; --jenny-mint-secondary: #98FB98; --jenny-rosegold-primary: #B76E79; --jenny-rosegold-secondary: #E8B4B8; --jenny-milktea-primary: #8B7355; --jenny-milktea-secondary: #D4A574; --jenny-glacier-primary: #87CEEB; --jenny-glacier-secondary: #E0FFFF; --jenny-taro-primary: #9932CC; --jenny-taro-secondary: #DDA0DD; } /* ============================================ 八、主题切换 JavaScript 辅助 ============================================ */ /* ============================================ 确认弹窗 (ConfirmDialog) 样式 ============================================ */ /* 遮罩层 */ .confirm-dialog-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); transition: background 0.2s ease, backdrop-filter 0.2s ease; } .confirm-dialog-overlay.confirm-dialog-visible { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } /* 卡片 */ .confirm-dialog-card { background: var(--bg-elevated, #262626); border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08)); border-radius: 16px; padding: 24px; width: 90%; max-width: 380px; box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.5)); transform: scale(0.9) translateY(10px); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; } .confirm-dialog-visible .confirm-dialog-card { transform: scale(1) translateY(0); opacity: 1; } /* body 区域 */ .confirm-dialog-body { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; } /* 图标 */ .confirm-dialog-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .confirm-dialog-icon-danger { background: rgba(239, 68, 68, 0.12); color: #EF4444; } .confirm-dialog-icon-warning { background: rgba(245, 158, 11, 0.12); color: #F59E0B; } .confirm-dialog-icon-info { background: rgba(59, 130, 246, 0.12); color: #3B82F6; } /* 文本 */ .confirm-dialog-text { flex: 1; min-width: 0; padding-top: 2px; } .confirm-dialog-title { font-size: 15px; font-weight: 600; color: var(--text-primary, #FAFAFA); margin-bottom: 6px; } .confirm-dialog-message { font-size: 14px; color: var(--text-secondary, #A3A3A3); line-height: 1.5; } /* 按钮区域 */ .confirm-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; } .confirm-dialog-btn { padding: 8px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; outline: none; transition: all 0.15s ease; font-family: inherit; } .confirm-dialog-btn:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring, rgba(59, 130, 246, 0.5)); } /* 取消按钮 */ .confirm-dialog-btn-cancel { background: var(--bg-tertiary, #1f1f1f); color: var(--text-secondary, #A3A3A3); border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08)); } .confirm-dialog-btn-cancel:hover { background: var(--hover-overlay, rgba(255, 255, 255, 0.05)); color: var(--text-primary, #FAFAFA); border-color: var(--border-hover, rgba(255, 255, 255, 0.15)); } /* 危险按钮 (删除) */ .confirm-dialog-btn-danger { background: #EF4444; color: #fff; } .confirm-dialog-btn-danger:hover { background: #DC2626; } /* 警告按钮 */ .confirm-dialog-btn-warning { background: #F59E0B; color: #fff; } .confirm-dialog-btn-warning:hover { background: #D97706; } /* 主要按钮 */ .confirm-dialog-btn-primary { background: var(--brand-primary, #3B82F6); color: #fff; } .confirm-dialog-btn-primary:hover { background: #2563EB; } /* 使用方法： // 获取当前主题 const theme = document.documentElement.getAttribute('data-theme') || 'dark'; // 切换主题 function setTheme(theme) { document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('opencpai-theme', theme); } // 初始化（从 localStorage 读取） const savedTheme = localStorage.getItem('opencpai-theme') || 'dark'; setTheme(savedTheme); */