[{"data":1,"prerenderedAt":587},["ShallowReactive",2],{"msfe-doc:\u002Fcustomization\u002Ftheme":3},{"id":4,"title":5,"body":6,"description":572,"extension":573,"keywords":574,"locale":580,"meta":581,"navigation":166,"order":582,"path":583,"section":5,"seo":584,"stem":585,"__hash__":586},"docs\u002Fcustomization\u002Ftheme.zh-CN.md","UI 与主题",{"type":7,"value":8,"toc":562},"minimark",[9,13,17,29,33,36,103,113,117,132,184,187,190,193,364,382,385,489,496,499,506,525,532,535,538,558],[10,11,12],"h2",{"id":12},"外观由应用提供",[14,15,16],"p",{},"MSFE 核心不依赖 QuireKit Vue 组件。应用可以选择自己的组件库；这里的文档和示例使用 QuireKit 公共组件与设计 token。",[14,18,19,20,24,25,28],{},"示例的 ",[21,22,23],"code",{},"shared\u002Fappearance.ts"," 通过 ",[21,26,27],{},"addCodeMirrorExtensions()"," 安装主题和语法高亮。打开接入代码可以看到完整主题定义。",[30,31],"msfe-demo",{"name":32},"basic\u002Feditor",[10,34,35],{"id":35},"三类定制入口",[37,38,39,52],"table",{},[40,41,42],"thead",{},[43,44,45,49],"tr",{},[46,47,48],"th",{},"要定制的内容",[46,50,51],{},"使用的接口",[53,54,55,72,83,95],"tbody",{},[43,56,57,61],{},[58,59,60],"td",{},"字体、颜色、间距、语法高亮",[58,62,63,64,67,68,71],{},"CodeMirror ",[21,65,66],{},"EditorView.theme()","、",[21,69,70],{},"HighlightStyle","，通过扩展安装",[43,73,74,77],{},[58,75,76],{},"图片、任务、业务节点等源码绑定组件",[58,78,79,82],{},[21,80,81],{},"addNodeView()"," 与框架 renderer",[43,84,85,88],{},[58,86,87],{},"搜索面板、容器折叠及预览操作",[58,89,90,91,94],{},"相应功能的 ",[21,92,93],{},"ComponentViewRenderer"," 配置",[43,96,97,100],{},[58,98,99],{},"外部工具栏、菜单与弹窗",[58,101,102],{},"宿主组件调用公开命令、状态查询与受控动作",[14,104,105,108,109,112],{},[21,106,107],{},"theme: 'light' | 'dark'"," 和 ",[21,110,111],{},"setTheme()"," 是内置明暗设置；完整视觉主题通过扩展和 CSS 提供。",[10,114,116],{"id":115},"使用-quirekit-组件","使用 QuireKit 组件",[14,118,119,120,123,124,127,128,131],{},"应用配置 QuireKit UnoCSS 预设、主题与图标 Provider 后，从 ",[21,121,122],{},"@quirekit\u002Fui\u002Fvue"," 导入按钮等组件。主题变量通过 ",[21,125,126],{},"@quirekit\u002Fui"," 的 ",[21,129,130],{},"themeVariableReferences"," 接入编辑器，保持页面和编辑器颜色一致。",[133,134,139],"pre",{"className":135,"code":136,"language":137,"meta":138,"style":138},"language-ts shiki shiki-themes github-light github-light github-dark","import { defineQuireKitUnoConfig } from '@quirekit\u002Funocss-preset'\n\nexport default defineQuireKitUnoConfig()\n","ts","",[21,140,141,161,168],{"__ignoreMap":138},[142,143,146,150,154,157],"span",{"class":144,"line":145},"line",1,[142,147,149],{"class":148},"sDD9d","import",[142,151,153],{"class":152},"sVPnS"," { defineQuireKitUnoConfig } ",[142,155,156],{"class":148},"from",[142,158,160],{"class":159},"s-HEn"," '@quirekit\u002Funocss-preset'\n",[142,162,164],{"class":144,"line":163},2,[142,165,167],{"emptyLinePlaceholder":166},true,"\n",[142,169,171,174,177,181],{"class":144,"line":170},3,[142,172,173],{"class":148},"export",[142,175,176],{"class":148}," default",[142,178,180],{"class":179},"sgQzM"," defineQuireKitUnoConfig",[142,182,183],{"class":152},"()\n",[10,185,186],{"id":186},"正文输入所有权",[14,188,189],{},"正文输入、选区和光标继续由 CodeMirror 管理。组件里的表单可以通过字段 codec 修改明确的源码字段；任意可编辑组件子树目前不在支持范围内。",[10,191,192],{"id":192},"一个可扩展的主题模块",[133,194,196],{"className":135,"code":195,"language":137,"meta":138,"style":138},"import { Extension } from '@quirekit\u002Fmsfe-core'\nimport { EditorView } from '@quirekit\u002Fcm-view'\nimport { themeVariableReferences as token } from '@quirekit\u002Fui'\n\nexport const ProductTheme = Extension.create({\n  name: 'productTheme',\n  addCodeMirrorExtensions() {\n    return EditorView.theme({\n      '&': { color: token.color.text.primary, backgroundColor: token.color.surface.page },\n      '.cm-content': { padding: token.spacing.surface },\n      '.msfe-inline-code': { ...token.typography.code, backgroundColor: token.color.surface.subtle },\n      '.msfe-link': { color: token.color.text.accent },\n    })\n  },\n})\n",[21,197,198,210,222,240,245,269,281,290,304,313,322,337,346,352,358],{"__ignoreMap":138},[142,199,200,202,205,207],{"class":144,"line":145},[142,201,149],{"class":148},[142,203,204],{"class":152}," { Extension } ",[142,206,156],{"class":148},[142,208,209],{"class":159}," '@quirekit\u002Fmsfe-core'\n",[142,211,212,214,217,219],{"class":144,"line":163},[142,213,149],{"class":148},[142,215,216],{"class":152}," { EditorView } ",[142,218,156],{"class":148},[142,220,221],{"class":159}," '@quirekit\u002Fcm-view'\n",[142,223,224,226,229,232,235,237],{"class":144,"line":170},[142,225,149],{"class":148},[142,227,228],{"class":152}," { themeVariableReferences ",[142,230,231],{"class":148},"as",[142,233,234],{"class":152}," token } ",[142,236,156],{"class":148},[142,238,239],{"class":159}," '@quirekit\u002Fui'\n",[142,241,243],{"class":144,"line":242},4,[142,244,167],{"emptyLinePlaceholder":166},[142,246,248,250,253,257,260,263,266],{"class":144,"line":247},5,[142,249,173],{"class":148},[142,251,252],{"class":148}," const",[142,254,256],{"class":255},"sUNQB"," ProductTheme",[142,258,259],{"class":148}," =",[142,261,262],{"class":152}," Extension.",[142,264,265],{"class":179},"create",[142,267,268],{"class":152},"({\n",[142,270,272,275,278],{"class":144,"line":271},6,[142,273,274],{"class":152},"  name: ",[142,276,277],{"class":159},"'productTheme'",[142,279,280],{"class":152},",\n",[142,282,284,287],{"class":144,"line":283},7,[142,285,286],{"class":179},"  addCodeMirrorExtensions",[142,288,289],{"class":152},"() {\n",[142,291,293,296,299,302],{"class":144,"line":292},8,[142,294,295],{"class":148},"    return",[142,297,298],{"class":152}," EditorView.",[142,300,301],{"class":179},"theme",[142,303,268],{"class":152},[142,305,307,310],{"class":144,"line":306},9,[142,308,309],{"class":159},"      '&'",[142,311,312],{"class":152},": { color: token.color.text.primary, backgroundColor: token.color.surface.page },\n",[142,314,316,319],{"class":144,"line":315},10,[142,317,318],{"class":159},"      '.cm-content'",[142,320,321],{"class":152},": { padding: token.spacing.surface },\n",[142,323,325,328,331,334],{"class":144,"line":324},11,[142,326,327],{"class":159},"      '.msfe-inline-code'",[142,329,330],{"class":152},": { ",[142,332,333],{"class":148},"...",[142,335,336],{"class":152},"token.typography.code, backgroundColor: token.color.surface.subtle },\n",[142,338,340,343],{"class":144,"line":339},12,[142,341,342],{"class":159},"      '.msfe-link'",[142,344,345],{"class":152},": { color: token.color.text.accent },\n",[142,347,349],{"class":144,"line":348},13,[142,350,351],{"class":152},"    })\n",[142,353,355],{"class":144,"line":354},14,[142,356,357],{"class":152},"  },\n",[142,359,361],{"class":144,"line":360},15,[142,362,363],{"class":152},"})\n",[14,365,366,367,370,371,373,374,377,378,381],{},"把它放入 ",[21,368,369],{},"extensions","。",[21,372,66],{}," 将规则作用于编辑器实例，不会污染整站的 pre、table 或 button。需要覆盖默认优先级时用 CodeMirror 的 ",[21,375,376],{},"Prec","，而不是全局 ",[21,379,380],{},"!important"," 堆叠。",[10,383,384],{"id":384},"定制入口对照",[37,386,387,400],{},[40,388,389],{},[43,390,391,394,397],{},[46,392,393],{},"视觉对象",[46,395,396],{},"入口",[46,398,399],{},"边界",[53,401,402,419,436,452,463,474],{},[43,403,404,407,416],{},[58,405,406],{},"正文、行、选区、光标",[58,408,409,67,412,415],{},[21,410,411],{},".cm-content",[21,413,414],{},".cm-line"," 等 CodeMirror 主题",[58,417,418],{},"不改输入 DOM 结构",[43,420,421,424,433],{},[58,422,423],{},"语义行和行内标记",[58,425,426,67,429,432],{},[21,427,428],{},".msfe-heading",[21,430,431],{},".msfe-link","、代码\u002F容器类",[58,434,435],{},"保留源码显露与原生选择",[43,437,438,441,449],{},[58,439,440],{},"代码 token",[58,442,443,445,446],{},[21,444,70],{}," + ",[21,447,448],{},"syntaxHighlighting",[58,450,451],{},"高亮语法需要安装语言",[43,453,454,457,460],{},[58,455,456],{},"业务节点",[58,458,459],{},"NodeView 的宿主组件",[58,461,462],{},"字段修改通过 codec",[43,464,465,468,471],{},[58,466,467],{},"预览和折叠操作",[58,469,470],{},"ComponentView 的宿主组件",[58,472,473],{},"不接管可编辑正文",[43,475,476,479,486],{},[58,477,478],{},"文档网站正文",[58,480,481,482,485],{},"QuireKit ",[21,483,484],{},"QuireProse"," 组件",[58,487,488],{},"与编辑器内部主题是不同消费入口",[14,490,491,492,495],{},"类名依赖需要随版本回归，不能只依赖内部 DOM 层级。不要用 ",[21,493,494],{},".cm-content * { all: unset }"," 这类规则重置控件和辅助技术语义。",[10,497,498],{"id":498},"深浅主题和字体",[14,500,501,502,505],{},"在 QuireKit Provider 管理应用主题时，编辑器可使用同一套 CSS 变量。",[21,503,504],{},"editor.setTheme()"," 更新 MSFE 的配色设置，不会自动替换你第三方图表的皮肤；图表需观察自己的视觉参数并更新实例。",[14,507,508,509,512,513,516,517,520,521,524],{},"选区与高亮可以使用固定色，而不跟随主题主色：覆盖 ",[21,510,511],{},"--qk-color-selection-document","（正文选区，建议带透明度）\n和 ",[21,514,515],{},"--qk-prose-mark-background","（",[21,518,519],{},"==高亮==","，未设置时由主色混合页面底色得到）。选择器需与主题变量同级，\n例如 ",[21,522,523],{},"html[data-qk-theme][data-qk-scheme] { --qk-prose-mark-background: #fff1a1; }","，深色方案再单独设置一组。",[14,526,527,528,531],{},"字体大小、行高和异步资源会改变几何。保持组件内行高可预测；必要时调用 ",[21,529,530],{},"requestMeasure()","。不要通过固定所有源码行高度来隐藏预览溢出。",[10,533,534],{"id":534},"组件库替换顺序",[14,536,537],{},"先接好 Provider \u002F UnoCSS \u002F token，再替换节点组件和通用控件，最后补语义主题。框架 Host 应放在 Provider 内。本站所有新增按钮和选择器继续使用 QuireKit；业务扩展只负责选择组件、传状态和发动作。",[14,539,540,541,67,546,67,550,67,554,370],{},"完整例子：",[542,543,545],"a",{"href":544},"\u002Fextensions\u002Fcontainers","容器样式",[542,547,549],{"href":548},"\u002Fextensions\u002Fcode-blocks","代码块工具栏",[542,551,553],{"href":552},"\u002Fextensions\u002Fdiagrams","图表主题与释放",[542,555,557],{"href":556},"\u002Fcustomization\u002Fsearch","搜索面板",[559,560,561],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}",{"title":138,"searchDepth":163,"depth":163,"links":563},[564,565,566,567,568,569,570,571],{"id":12,"depth":163,"text":12},{"id":35,"depth":163,"text":35},{"id":115,"depth":163,"text":116},{"id":186,"depth":163,"text":186},{"id":192,"depth":163,"text":192},{"id":384,"depth":163,"text":384},{"id":498,"depth":163,"text":498},{"id":534,"depth":163,"text":534},"接入自己的设计体系，同时保持源码、命令和组件的边界。","md",[575,301,576,577,578,579],"样式","CSS","组件库","toolbar","renderer","zh-CN",{},0,"\u002Fcustomization\u002Ftheme",{"title":5,"description":572},"customization\u002Ftheme.zh-CN","LlBsfkjw7-w4ha_P4mU2Ujd0IfdRmPMG1290-Uqh07w",1793046311420]