/* ========================================================================== 主题样式表 theme.css 通过 切换 4 套配色 所有组件样式只引用 var(--*) ，从而实现全局主题切换 ========================================================================== */ /* ---------- 基础（默认藏青金主题 navy） ---------- */ :root { --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-heading: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Georgia", serif; --primary: #16324f; --primary-strong: #0e2337; --primary-soft: #eaf0f6; --on-primary: #ffffff; --accent: #c9a34e; --accent-strong: #ad8936; --on-accent: #241a06; --bg: #ffffff; --bg-alt: #f5f7fa; --surface: #ffffff; --text: #37424f; --heading: #14232f; --muted: #75808c; --border: #e5e9ee; --header-bg: #12283c; --header-text: #f5f7fa; --header-muted: rgba(245, 247, 250, 0.72); --hero-bg: linear-gradient(135deg, #16324f 0%, #12283c 55%, #0e2337 100%); --hero-text: #ffffff; --hero-muted: rgba(255, 255, 255, 0.78); --shadow: 0 10px 30px rgba(14, 35, 55, 0.1); --shadow-lg: 0 20px 50px rgba(14, 35, 55, 0.16); --radius: 14px; --container: 1200px; } /* ---------- 主题：黑白极简 mono ---------- */ [data-theme="mono"] { --primary: #111111; --primary-strong: #000000; --primary-soft: #f0f0f0; --on-primary: #ffffff; --accent: #555555; --accent-strong: #333333; --on-accent: #ffffff; --bg: #ffffff; --bg-alt: #f6f6f6; --surface: #ffffff; --text: #3a3a3a; --heading: #0a0a0a; --muted: #8a8a8a; --border: #e6e6e6; --header-bg: #111111; --header-text: #ffffff; --header-muted: rgba(255, 255, 255, 0.7); --hero-bg: linear-gradient(135deg, #1a1a1a 0%, #0c0c0c 100%); --hero-text: #ffffff; --hero-muted: rgba(255, 255, 255, 0.75); --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.16); } /* ---------- 主题：浅色商务清爽 light ---------- */ [data-theme="light"] { --primary: #2b6cb0; --primary-strong: #1f4e8c; --primary-soft: #eaf2fb; --on-primary: #ffffff; --accent: #e09b3c; --accent-strong: #c9801f; --on-accent: #2a1c08; --bg: #ffffff; --bg-alt: #f7f9fb; --surface: #ffffff; --text: #3c4753; --heading: #1b2733; --muted: #76828f; --border: #e6eaef; --header-bg: #ffffff; --header-text: #1b2733; --header-muted: rgba(27, 39, 51, 0.66); --hero-bg: linear-gradient(135deg, #2b6cb0 0%, #1f4e8c 100%); --hero-text: #ffffff; --hero-muted: rgba(255, 255, 255, 0.82); --shadow: 0 10px 30px rgba(31, 78, 140, 0.1); --shadow-lg: 0 20px 50px rgba(31, 78, 140, 0.16); } /* ---------- 主题：复古墨绿 vintage ---------- */ [data-theme="vintage"] { --primary: #2f4437; --primary-strong: #20302a; --primary-soft: #e8ede6; --on-primary: #f7f3ea; --accent: #a67c52; --accent-strong: #8f6844; --on-accent: #20140a; --bg: #f7f3ea; --bg-alt: #efe9dc; --surface: #fffdf6; --text: #3c362c; --heading: #2a251c; --muted: #857b6a; --border: #e2dac6; --header-bg: #2f4437; --header-text: #f4efe3; --header-muted: rgba(244, 239, 227, 0.72); --hero-bg: linear-gradient(135deg, #2f4437 0%, #24342a 100%); --hero-text: #f7f3ea; --hero-muted: rgba(247, 243, 234, 0.8); --shadow: 0 10px 30px rgba(47, 68, 55, 0.14); --shadow-lg: 0 20px 50px rgba(47, 68, 55, 0.2); } /* ---------- 默认 init：无 data-theme 时等价于 navy ---------- */ html[data-theme="navy"] { /* 与 :root 一致，无需额外声明 */ }