设计与主题

自定义设计只需要两个文件，放在项目的 .moss/theme/ 目录里（青苔在你打开文件夹时会自动创建它）：

my-site/
├── .moss/
│   └── theme/
│       ├── style.css   ← 自定义 CSS
│       └── script.js   ← 自定义 JS
├── index.md
└── ...

青苔会自动加载这两个文件：style.css 覆写默认主题，无需写 !important；script.js 在所有内置脚本之后运行。

用变量调整外观

青苔的样式建立在一套 --moss-* CSS 变量上。覆盖几个变量就能换掉整体观感：

:root {
  --moss-color-accent: #2d5a2d;      /* 链接与强调色 */
  --moss-font-body: "Inter", sans-serif;
  --moss-content-width: 72ch;        /* 正文最大宽度 */
}

深色模式只需覆盖一个选择器，青苔已经把系统偏好和手动切换都归到 data-theme 上：

:root[data-theme="dark"] {
  --moss-color-bg: #0f0f0f;
  --moss-color-accent: #6abf6a;
}

运行命令行工具 moss describe --json 可列出全部变量及其亮色/暗色默认值。

针对组件微调

青苔生成的每个组件都有稳定的 .moss-* 类名，可以在 style.css 里直接定位，例如 .moss-grid-card、.moss-collection-card、.callout。也可以给短代码挂自定义类：:::grid 3 {.profiles}，再写 .profiles .moss-grid-card { … }。

其他资源

你也可以把其他媒体文件放入.moss/theme/中，供 script.js 和 style.css引用。比如，把 .woff2 放在 .moss/theme/fonts/，在 style.css 中用 @font-face { src: url('fonts/myfont.woff2') } 引用。

深入了解

完整的 CSS 变量表、组件类名清单、数据属性和 DOM 结构，见英文文档 Write a theme、CSS tokens 和 Components。

青苔发布