单一令牌真源 · 全站 46 页统一 · 两套可切换主题。本页自身就是规范的示例(它只加载 main.css,不含任何页面级样式)。
配色与组件只在一个文件里定义,页面不再各写一套:
assets/css/main.css ← 令牌 + 组件(唯一真源)
assets/js/theme.js ← 主题切换(只决定选哪套)
<!-- 每个页面 <head> 末尾加两行,须在页面内联 <style> 之后 -->
<link rel="stylesheet" href="assets/css/main.css">
<script src="assets/js/theme.js"></script>
页面里旧的内联 :root 与旧变量名无需逐页删除:main.css §0c 已把全站 30 个旧变量名重定向到统一令牌,旧值会被整站接管。
右下角按钮切换,选择记在 localStorage["e-theme"]。主题只换令牌值,不动任何规则。
| 主题 | 定位 | 主色 | 辅色 | 强调 |
|---|---|---|---|---|
| ink(默认) | 冷调·靛蓝紫 | #6b8afd | #b388ff | #ffc95e |
| neon | 暖调·霓虹紫青 | #8b5cf6 | #22d3ee | #ffb020 |
| 语义 | 令牌 | ink 值 | neon 值 | 用途 |
|---|---|---|---|---|
| 页面底 | --bg-base | #07070f | #070510 | body 背景 |
| 卡片底 | --bg-surface | #10101e | #120c22 | 卡片/面板 |
| 正文 | --text-primary | #eef0fa | #f4f2ff | 主文字 |
| 次要文字 | --text-secondary | #9aa0bd | #a8a3c7 | 说明/副文 |
| 弱化文字 | --text-muted | #676d8f | #6f6893 | 脚注/占位 |
| 主色 | --primary | #6b8afd | #8b5cf6 | 品牌/链接 |
| 辅色 | --secondary | #b388ff | #22d3ee | 次级强调 |
| 强调 | --accent | #ffc95e | #ffb020 | 指标/高亮 |
| 成功 | --success | #6ee7c8 | #4ade80 | 已验证/通过 |
| 警告 | --warning | #ffc95e | #ffb020 | 进行中 |
| 危险 | --danger | #ff6b8b | #ff5f6d | 失败/必做 |
| 信息 | --info | #7ec8ff | #22d3ee | 提示 |
| 描边 | --border-subtle | rgba(148,163,255,.14) → rgba(139,92,246,.25) | 分隔线 | |
字阶 --fs-display 60 / --fs-h1 38 / --fs-h2 28 / --fs-h3 20
--fs-body 16 / --fs-small 14 / --fs-caption 12
字体 --font-sans(Inter / PingFang SC 系) --font-mono(等宽)
间距 --space-1..24 = 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96
圆角 --radius-sm 8 / -md 12 / -lg 18 / -xl 24 / -full 999
阴影 --shadow-card / --shadow-pop 光晕 --glow-primary / --glow-hover
| 旧名 | → 新令牌 | 旧名 | → 新令牌 |
|---|---|---|---|
--bg | --bg-base | --ok / --okbg | --success / -dim |
--txt / --t1 / --ink | --text-primary | --warn / --warnbg | --warning / -dim |
--dim / --t2 / --ink2 / --mut | --text-secondary | --red / --err / --bad / --must | --danger |
--line / --bd / --bs | --border-subtle | --mustbg | --danger-dim |
--pri / --accent | --primary | --opt | --text-muted |
--pri2 / --acc2 / --vio | --secondary | --optbg | --bg-elevated |
--acc | --primary-strong | --mono | --font-mono |
--gold | --warning | --code | --code-bg |
本规范只覆盖视觉层:颜色 / 字体 / 间距 / 圆角 / 阴影 / 组件样式。
不包含、不修改任何数据:*.json、docs/ 数据、.db 一律不碰;页面数据全部由 fetch 动态拉取,与样式解耦。
master 与 mos/bootstrap 为 M 团队代码线,不在本规范范围内。