/* ============================================================ LQM 平台主题 token（双主题：暗色默认 / 浅色切换） ------------------------------------------------------------ 分层约定（V2 架构 §4.1）： - 颜色类 token（bg/surface/text/border/accent/status/hover/disabled/overlay） 随主题变：在 :root（暗色默认）定义，html[data-theme="light"] 中全部覆盖 - 几何类 token（尺寸/圆角/间距/字体/阴影/z-index/过渡） 静态，仅 :root 定义一次，两主题共享 主题切换：localStorage.lqm_theme（'dark'|'light'），theme.js 在 最先加载 用法： ============================================================ */ /* ---------- 暗色（默认）: 全部 token ---------- */ :root { color-scheme: dark; /* ===== 颜色类 token（随主题变）===== */ --lqm-bg: #0f172a; /* 页面背景 */ --lqm-surface: #1e293b; /* 卡片/面板 */ --lqm-surface-2: #273549; /* 次级表面/hover */ --lqm-surface-3: #334155; /* 强调表面/禁用底 */ --lqm-border: #334155; /* 边框 */ --lqm-border-strong: #475569; /* 强调边框/分割 */ --lqm-text: #f1f5f9; /* 主文字 */ --lqm-muted: #94a3b8; /* 次级文字 */ --lqm-faint: #64748b; /* 弱文字/占位 */ --lqm-accent: #60a5fa; /* 主强调 */ --lqm-accent-2: #818cf8; /* 渐变辅色 */ --lqm-accent-soft: rgba(96,165,250,.14); /* 激活项/标签底 */ --lqm-success: #22c55e; /* 成功 */ --lqm-warning: #f59e0b; /* 警告 */ --lqm-danger: #ef4444; /* 危险/错误 */ --lqm-info: #38bdf8; /* 信息 */ --lqm-on-accent: #ffffff; /* 强调色上的文字 */ --lqm-hover-bg: rgba(241,245,249,.06); /* 通用 hover */ --lqm-active-bg: rgba(241,245,249,.10); /* 按下/选中 */ --lqm-disabled-bg: #334155; /* 禁用底 */ --lqm-disabled-text: #64748b; /* 禁用字 */ --lqm-ring: rgba(96,165,250,.4); /* focus 光环 */ --lqm-overlay: rgba(2,6,23,.7); /* 弹窗遮罩 */ --lqm-topbar-bg: rgba(11,18,32,.93); /* 顶栏（玻璃拟态） */ --lqm-sidebar-bg: rgba(11,18,32,.95); /* 侧栏 */ --lqm-gradient: linear-gradient(135deg,var(--lqm-accent),var(--lqm-accent-2)); /* 主按钮/品牌 */ --lqm-code-bg: #0b1220; /* 代码块底 */ /* ===== 几何类 token（静态，不随主题变）===== */ --lqm-topbar-h: 56px; /* 顶栏高 */ --lqm-sb-w: 64px; /* 侧栏收起宽（图标栏） */ --lqm-sb-w-open: 220px; /* 侧栏展开宽 */ --lqm-pageheader-h: 64px; /* 页头高（nav.js 注入，default 壳应用预留） */ --lqm-radius-sm: 8px; /* 小圆角 */ --lqm-radius: 12px; /* 中圆角 */ --lqm-radius-lg: 16px; /* 大圆角 */ --lqm-radius-pill: 999px; /* 胶囊 */ --lqm-space-1: 4px; --lqm-space-2: 8px; --lqm-space-3: 12px; --lqm-space-4: 16px; --lqm-space-5: 20px; --lqm-space-6: 24px; --lqm-space-7: 32px; --lqm-space-8: 40px; --lqm-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --lqm-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, "Courier New", monospace; --lqm-font-xs: 12px; --lqm-font-sm: 13px; --lqm-font-base: 14px; --lqm-font-md: 15px; --lqm-font-lg: 17px; --lqm-font-xl: 20px; --lqm-font-2xl: 24px; --lqm-shadow-sm: 0 1px 3px rgba(2,6,23,.35); --lqm-shadow: 0 12px 30px rgba(2,6,23,.5); --lqm-shadow-lg: 0 24px 48px rgba(2,6,23,.6); --lqm-z-topbar: 1001; --lqm-z-sidebar: 1000; --lqm-z-modal: 2000; --lqm-z-toast: 3000; --lqm-transition: 0.2s ease; } /* ---------- 浅色主题：仅覆盖颜色类 token ---------- */ html[data-theme="light"] { color-scheme: light; --lqm-bg: #f1f5f9; --lqm-surface: #ffffff; --lqm-surface-2: #f8fafc; --lqm-surface-3: #eef2f7; --lqm-border: #e2e8f0; --lqm-border-strong: #cbd5e1; --lqm-text: #0f172a; --lqm-muted: #475569; --lqm-faint: #94a3b8; --lqm-accent: #2563eb; --lqm-accent-2: #4f46e5; --lqm-accent-soft: rgba(37,99,235,.10); --lqm-success: #16a34a; --lqm-warning: #d97706; --lqm-danger: #dc2626; --lqm-info: #0891b2; --lqm-on-accent: #ffffff; --lqm-hover-bg: rgba(15,23,42,.05); --lqm-active-bg: rgba(15,23,42,.08); --lqm-disabled-bg: #e2e8f0; --lqm-disabled-text: #94a3b8; --lqm-ring: rgba(37,99,235,.35); --lqm-overlay: rgba(15,23,42,.45); --lqm-topbar-bg: rgba(255,255,255,.9); --lqm-sidebar-bg: rgba(255,255,255,.92); --lqm-code-bg: #f8fafc; } /* ============================================================ V1 兼容别名（旧应用可能直接引用，保持可用） ============================================================ */ :root, html[data-theme="light"] { --lqm-ok: var(--lqm-success); /* V1 别名 */ --lqm-warn: var(--lqm-warning); /* V1 别名 */ --lqm-blue: var(--lqm-accent); /* 通用别名 */ } /* ============================================================ 平台壳激活（nav.js 注入 lqm-nav-active）： - 顶部留出 topbar 高度 - 左侧留出侧边栏宽度（默认收起 64px，展开 220px） ============================================================ */ body.lqm-nav-active { padding-top: var(--lqm-topbar-h); margin-left: var(--lqm-sb-w); transition: margin-left var(--lqm-transition); } body.lqm-nav-active.lqm-sb-open { margin-left: var(--lqm-sb-w-open); }