Expand description
Mermaid 站点配置与配色。
用 theme: "base":base 主题不硬编码颜色,themeVariables 能完全控制调色板。
颜色烤进 SVG 内联样式,不能用 CSS 变量,取值对应 styles/theme.css 的 token;
浅色、深色各渲染一份,由 CSS 按 html.dark 显示其一。
设计:节点是浮在代码块底色上的卡片(surface 色阶 + 发丝线边框),文字用 fg,连线用 fg-3,
注释用陶土浅底;强调色留给作者用 classDef 手动指定。
base 主题只给通用变量,各图专用的颜色(甘特任务、ER 行、饼图、git 分支、时间线/思维导图的
cScale 等)由 primaryColor 推导:白色节点推出的是一片灰,深色模式更会推出黑底黑字、
浅底白字。所以这里把专用变量全部显式给出;所有颜色都必须不透明,
Mermaid 的 fade() 会直接替换 alpha(半透明的子图底色到了方块图里会变成 50% 黑)。
Structs§
- Tones 🔒
- 一套主题的色调。
Constants§
- DARK 🔒
- 深色:暖调深灰节点,surface 色阶递进。
- FONT_
FAMILY 🔒 - GIT_LEN 🔒
- LIGHT 🔒
- 浅色:白色节点浮在 surface-1 上。
- SCALE_
LEN 🔒 - Mermaid 的 cScale 色阶有 12 档,git 分支 8 档,饼图 12 档。
Functions§
- fixup_
css 🔒 - 主题变量管不到的几处颜色,追加到 SVG 自带的
<style>(规则以 SVG id 限定作用域)。 - is_
radar 🔒 - 图表类型关键字是否为雷达图;跳过空行、
%%注释与指令、YAML frontmatter。 - set 🔒
- site_
config 🔒 - 站点级 Mermaid 配置。
- theme_
variables 🔒 radar为 true 时 cScale 用系列色:雷达图拿 cScale 画曲线(描边 + 半透明填充), 分区底色那样的浅色会看不见;其余图拿 cScale 画分区底色。- tones 🔒