/** * 主题色彩系统 * 支持一键切换不同主题（春夏秋冬、节日主题等） * * 使用方法： * 1. 在页面引入此CSS文件 * 2. 在上设置 data-theme="主题名"，如 * 3. 可用主题：default, spring, summer, autumn, winter, newyear, christmas */ :root { /* 默认主题 - 科技蓝 */ --primary: #0066ff; --primary-hover: #0052cc; --primary-light: #e6f0ff; --accent: #00d4aa; --bg-primary: #ffffff; --bg-secondary: #f5f7fa; --bg-card: #ffffff; --text-primary: #1a1a2e; --text-secondary: #666666; --text-muted: #999999; --border: #e8ecf0; --shadow: rgba(0, 0, 0, 0.06); --shadow-hover: rgba(0, 0, 0, 0.12); --gradient-start: #0066ff; --gradient-end: #00d4aa; --header-bg: #ffffff; --nav-bg: #ffffff; --footer-bg: #1a1a2e; } /* 🌸 春天主题 - 粉色柔和 */ [data-theme="spring"] { --primary: #ff6b9d; --primary-hover: #ff4081; --primary-light: #fff0f5; --accent: #ffb7c5; --bg-primary: #fffbfd; --bg-secondary: #fff5f8; --bg-card: #ffffff; --text-primary: #2d2d3a; --text-secondary: #666666; --border: #ffe4eb; --gradient-start: #ff6b9d; --gradient-end: #ffa07a; --primary-color: #ff6b9d; --accent-primary: #ff6b9d; --border-color: #ffe4eb; --white: #ffffff; } /* ☀️ 夏天主题 - 清新蓝绿 */ [data-theme="summer"] { --primary: #00b4d8; --primary-hover: #0096c7; --primary-light: #e0f7ff; --accent: #48cae4; --bg-primary: #f0fbff; --bg-secondary: #e8f8ff; --bg-card: #ffffff; --text-primary: #1a3a4a; --text-secondary: #5a7a8a; --border: #cce8f0; --gradient-start: #0077b6; --gradient-end: #00b4d8; --primary-color: #00b4d8; --accent-primary: #00b4d8; --border-color: #cce8f0; --white: #ffffff; } /* 🍂 秋天主题 - 暖橙枫红 */ [data-theme="autumn"] { --primary: #e67e22; --primary-hover: #d35400; --primary-light: #fff5e6; --accent: #f39c12; --bg-primary: #fffaf5; --bg-secondary: #fff8f0; --bg-card: #ffffff; --text-primary: #2c1810; --text-secondary: #7a5a3a; --border: #f0e0c8; --gradient-start: #e67e22; --gradient-end: #c0392b; --primary-color: #e67e22; --accent-primary: #e67e22; --border-color: #f0e0c8; --white: #ffffff; } /* ❄️ 冬天主题 - 冷灰蓝紫 */ [data-theme="winter"] { --primary: #8b5cf6; --primary-hover: #7c3aed; --primary-light: #f5f3ff; --accent: #06b6d4; --bg-primary: #fafbff; --bg-secondary: #f0f4ff; --bg-card: #ffffff; --text-primary: #1e1b4b; --text-secondary: #5b5b7a; --border: #ddd6fe; --gradient-start: #8b5cf6; --gradient-end: #06b6d4; --primary-color: #8b5cf6; --accent-primary: #8b5cf6; --border-color: #ddd6fe; --white: #ffffff; } /* 🎊 新年主题 - 中国红金 */ [data-theme="newyear"] { --primary: #dc2626; --primary-hover: #b91c1c; --primary-light: #fef2f2; --accent: #f59e0b; --bg-primary: #fffbeb; --bg-secondary: #fef7ed; --bg-card: #ffffff; --text-primary: #1c1917; --text-secondary: #78716c; --border: #fecaca; --gradient-start: #dc2626; --gradient-end: #f59e0b; --primary-color: #dc2626; --accent-primary: #dc2626; --border-color: #fecaca; --white: #ffffff; } /* 🎄 圣诞节主题 - 圣诞红绿 */ [data-theme="christmas"] { --primary: #16a34a; --primary-hover: #15803d; --primary-light: #f0fdf4; --accent: #dc2626; --bg-primary: #fafffe; --bg-secondary: #f0fdf4; --bg-card: #ffffff; --text-primary: #14532d; --text-secondary: #4a7c59; --border: #bbf7d0; --gradient-start: #16a34a; --gradient-end: #dc2626; --primary-color: #16a34a; --accent-primary: #16a34a; --border-color: #bbf7d0; --white: #ffffff; }