/** * 网站主题配色配置文件 * 修改本文件中的变量值即可全局更换网站色调 * 使用方式：在页面 最前面引入 */ :root { /* ========== 主色（ui-ux-pro-max 电商商城推荐：蓝色系） ========== */ --color-primary: #2563eb; /* 主色-蓝（按钮、链接、高亮） */ --color-primary-hover: #1d4ed8; /* 主色-悬停/深色 */ --color-primary-light: #3b82f6; /* 主色-浅色（渐变、次要按钮） */ --color-primary-alpha-12: rgba(37, 99, 235, 0.12); --color-primary-alpha-15: rgba(37, 99, 235, 0.15); --color-primary-alpha-25: rgba(37, 99, 235, 0.25); --color-primary-alpha-35: rgba(37, 99, 235, 0.35); /* ========== 辅助色 ========== */ --color-accent: #f97316; /* CTA 橙色（价值/强调） */ --color-accent-amber: #ea580c; --color-blue: #2563eb; --color-purple: #7c3aed; --color-pink: #db2777; --color-link: #3b82f6; /* ========== 背景色 ========== */ --bg-page: linear-gradient(180deg, #eff6ff 0%, #f8fafc 15%, #f8fafc 100%); --bg-page-start: #eff6ff; --bg-page-end: #f8fafc; --bg-white: #fff; --bg-gray-50: #f8f8f8; --bg-gray-100: #f4f4f4; --bg-slate-100: #f1f5f9; /* ========== 文字色 ========== */ --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --text-placeholder: #94a3b8; --text-gray: #666; --text-light: #999; --text-dark: #333; /* ========== 边框/分割线 ========== */ --border-light: #e2e8f0; --border-slate: #f1f5f9; --border-gray: #ddd; --border-dark: #cbd5e1; /* ========== 阴影 ========== */ --shadow-primary: rgba(37, 99, 235, 0.1); --shadow-primary-12: rgba(37, 99, 235, 0.12); --shadow-primary-15: rgba(37, 99, 235, 0.15); --shadow-primary-25: rgba(37, 99, 235, 0.25); --shadow-card: rgba(0, 0, 0, 0.06); /* ========== 功能色 ========== */ --color-error: #f13140; --color-success: #08a600; --color-warning: #ffb320; --color-info: #2af; } /* ========== 换肤示例 ========== * 在 theme-variables.css 末尾或单独文件中覆盖 :root 变量即可切换主题 * 例如蓝色主题： * * :root { * --color-primary: #2563eb; * --color-primary-hover: #1d4ed8; * --color-primary-light: #3b82f6; * --color-primary-alpha-12: rgba(37, 99, 235, 0.12); * --color-primary-alpha-15: rgba(37, 99, 235, 0.15); * --color-primary-alpha-25: rgba(37, 99, 235, 0.25); * --color-primary-alpha-35: rgba(37, 99, 235, 0.35); * --bg-page: linear-gradient(180deg, #eff6ff 0%, #f8fafc 15%, #f8fafc 100%); * --bg-page-start: #eff6ff; * --bg-page-end: #f8fafc; * --shadow-primary: rgba(37, 99, 235, 0.1); * --shadow-primary-12: rgba(37, 99, 235, 0.12); * --shadow-primary-15: rgba(37, 99, 235, 0.15); * --shadow-primary-25: rgba(37, 99, 235, 0.25); * } */