外观由应用提供
MSFE 核心不依赖 QuireKit Vue 组件。应用可以选择自己的组件库；这里的文档和示例使用 QuireKit 公共组件与设计 token。
示例的 shared/appearance.ts 通过 addCodeMirrorExtensions() 安装主题和语法高亮。打开接入代码可以看到完整主题定义。
三类定制入口
| 要定制的内容 | 使用的接口 |
|---|---|
| 字体、颜色、间距、语法高亮 | CodeMirror EditorView.theme()、HighlightStyle，通过扩展安装 |
| 图片、任务、业务节点等源码绑定组件 | addNodeView() 与框架 renderer |
| 搜索面板、容器折叠及预览操作 | 相应功能的 ComponentViewRenderer 配置 |
| 外部工具栏、菜单与弹窗 | 宿主组件调用公开命令、状态查询与受控动作 |
theme: 'light' | 'dark' 和 setTheme() 是内置明暗设置；完整视觉主题通过扩展和 CSS 提供。
使用 QuireKit 组件
应用配置 QuireKit UnoCSS 预设、主题与图标 Provider 后，从 @quirekit/ui/vue 导入按钮等组件。主题变量通过 @quirekit/ui 的 themeVariableReferences 接入编辑器，保持页面和编辑器颜色一致。
import { defineQuireKitUnoConfig } from '@quirekit/unocss-preset'
export default defineQuireKitUnoConfig()
正文输入所有权
正文输入、选区和光标继续由 CodeMirror 管理。组件里的表单可以通过字段 codec 修改明确的源码字段；任意可编辑组件子树目前不在支持范围内。
一个可扩展的主题模块
import { Extension } from '@quirekit/msfe-core'
import { EditorView } from '@quirekit/cm-view'
import { themeVariableReferences as token } from '@quirekit/ui'
export const ProductTheme = Extension.create({
name: 'productTheme',
addCodeMirrorExtensions() {
return EditorView.theme({
'&': { color: token.color.text.primary, backgroundColor: token.color.surface.page },
'.cm-content': { padding: token.spacing.surface },
'.msfe-inline-code': { ...token.typography.code, backgroundColor: token.color.surface.subtle },
'.msfe-link': { color: token.color.text.accent },
})
},
})
把它放入 extensions。EditorView.theme() 将规则作用于编辑器实例，不会污染整站的 pre、table 或 button。需要覆盖默认优先级时用 CodeMirror 的 Prec，而不是全局 !important 堆叠。
定制入口对照
| 视觉对象 | 入口 | 边界 |
|---|---|---|
| 正文、行、选区、光标 | .cm-content、.cm-line 等 CodeMirror 主题 | 不改输入 DOM 结构 |
| 语义行和行内标记 | .msfe-heading、.msfe-link、代码/容器类 | 保留源码显露与原生选择 |
| 代码 token | HighlightStyle + syntaxHighlighting | 高亮语法需要安装语言 |
| 业务节点 | NodeView 的宿主组件 | 字段修改通过 codec |
| 预览和折叠操作 | ComponentView 的宿主组件 | 不接管可编辑正文 |
| 文档网站正文 | QuireKit QuireProse 组件 | 与编辑器内部主题是不同消费入口 |
类名依赖需要随版本回归，不能只依赖内部 DOM 层级。不要用 .cm-content * { all: unset } 这类规则重置控件和辅助技术语义。
深浅主题和字体
在 QuireKit Provider 管理应用主题时，编辑器可使用同一套 CSS 变量。editor.setTheme() 更新 MSFE 的配色设置，不会自动替换你第三方图表的皮肤；图表需观察自己的视觉参数并更新实例。
选区与高亮可以使用固定色，而不跟随主题主色：覆盖 --qk-color-selection-document（正文选区，建议带透明度）
和 --qk-prose-mark-background（==高亮==，未设置时由主色混合页面底色得到）。选择器需与主题变量同级，
例如 html[data-qk-theme][data-qk-scheme] { --qk-prose-mark-background: #fff1a1; }，深色方案再单独设置一组。
字体大小、行高和异步资源会改变几何。保持组件内行高可预测；必要时调用 requestMeasure()。不要通过固定所有源码行高度来隐藏预览溢出。
组件库替换顺序
先接好 Provider / UnoCSS / token，再替换节点组件和通用控件，最后补语义主题。框架 Host 应放在 Provider 内。本站所有新增按钮和选择器继续使用 QuireKit；业务扩展只负责选择组件、传状态和发动作。