[{"data":1,"prerenderedAt":555},["ShallowReactive",2],{"msfe-doc:\u002Fen\u002Fcustomization\u002Ftheme":3},{"id":4,"title":5,"body":6,"description":540,"extension":541,"keywords":542,"locale":548,"meta":549,"navigation":167,"order":550,"path":551,"section":5,"seo":552,"stem":553,"__hash__":554},"docs\u002Fcustomization\u002Ftheme.en.md","UI and themes",{"type":7,"value":8,"toc":530},"minimark",[9,14,18,30,34,38,105,114,118,133,185,189,192,196,367,370,374,457,464,468,475,494,497,501,504,526],[10,11,13],"h2",{"id":12},"your-application-supplies-the-appearance","Your application supplies the appearance",[15,16,17],"p",{},"The MSFE core does not depend on QuireKit's Vue components. Applications may choose their own component library; this documentation and its examples use QuireKit's public components and design tokens.",[15,19,20,21,25,26,29],{},"The examples install a theme and syntax highlighting through ",[22,23,24],"code",{},"addCodeMirrorExtensions()"," in ",[22,27,28],{},"shared\u002Fappearance.ts",". Open Integration code to see the complete theme definition.",[31,32],"msfe-demo",{"name":33},"basic\u002Feditor",[10,35,37],{"id":36},"customization-entry-points","Customization entry points",[39,40,41,54],"table",{},[42,43,44],"thead",{},[45,46,47,51],"tr",{},[48,49,50],"th",{},"What to customize",[48,52,53],{},"Interface",[55,56,57,74,85,97],"tbody",{},[45,58,59,63],{},[60,61,62],"td",{},"Fonts, colors, spacing, and syntax highlighting",[60,64,65,66,69,70,73],{},"CodeMirror ",[22,67,68],{},"EditorView.theme()"," and ",[22,71,72],{},"HighlightStyle",", installed through extensions",[45,75,76,79],{},[60,77,78],{},"Source-bound components for images, tasks, and business nodes",[60,80,81,84],{},[22,82,83],{},"addNodeView()"," and a framework renderer",[45,86,87,90],{},[60,88,89],{},"Search panels, container folding, and preview actions",[60,91,92,93,96],{},"The feature's ",[22,94,95],{},"ComponentViewRenderer"," configuration",[45,98,99,102],{},[60,100,101],{},"External toolbars, menus, and dialogs",[60,103,104],{},"Host components calling public commands, state queries, and guarded actions",[15,106,107,69,110,113],{},[22,108,109],{},"theme: 'light' | 'dark'",[22,111,112],{},"setTheme()"," control the built-in color scheme. Supply complete visual themes through extensions and CSS.",[10,115,117],{"id":116},"use-quirekit-components","Use QuireKit components",[15,119,120,121,124,125,128,129,132],{},"Configure the QuireKit UnoCSS preset, theme, and icon providers, then import buttons and other components from ",[22,122,123],{},"@quirekit\u002Fui\u002Fvue",". Use ",[22,126,127],{},"themeVariableReferences"," from ",[22,130,131],{},"@quirekit\u002Fui"," to connect theme variables to the editor and keep its colors consistent with the page.",[134,135,140],"pre",{"className":136,"code":137,"language":138,"meta":139,"style":139},"language-ts shiki shiki-themes github-light github-light github-dark","import { defineQuireKitUnoConfig } from '@quirekit\u002Funocss-preset'\n\nexport default defineQuireKitUnoConfig()\n","ts","",[22,141,142,162,169],{"__ignoreMap":139},[143,144,147,151,155,158],"span",{"class":145,"line":146},"line",1,[143,148,150],{"class":149},"sDD9d","import",[143,152,154],{"class":153},"sVPnS"," { defineQuireKitUnoConfig } ",[143,156,157],{"class":149},"from",[143,159,161],{"class":160},"s-HEn"," '@quirekit\u002Funocss-preset'\n",[143,163,165],{"class":145,"line":164},2,[143,166,168],{"emptyLinePlaceholder":167},true,"\n",[143,170,172,175,178,182],{"class":145,"line":171},3,[143,173,174],{"class":149},"export",[143,176,177],{"class":149}," default",[143,179,181],{"class":180},"sgQzM"," defineQuireKitUnoConfig",[143,183,184],{"class":153},"()\n",[10,186,188],{"id":187},"document-input-ownership","Document input ownership",[15,190,191],{},"CodeMirror continues to manage document input, selections, and the caret. Component forms can update explicit source fields through a field codec. Arbitrary editable component subtrees are not currently supported.",[10,193,195],{"id":194},"a-reusable-theme-module","A reusable theme module",[134,197,199],{"className":136,"code":198,"language":138,"meta":139,"style":139},"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",[22,200,201,213,225,243,248,272,284,293,307,316,325,340,349,355,361],{"__ignoreMap":139},[143,202,203,205,208,210],{"class":145,"line":146},[143,204,150],{"class":149},[143,206,207],{"class":153}," { Extension } ",[143,209,157],{"class":149},[143,211,212],{"class":160}," '@quirekit\u002Fmsfe-core'\n",[143,214,215,217,220,222],{"class":145,"line":164},[143,216,150],{"class":149},[143,218,219],{"class":153}," { EditorView } ",[143,221,157],{"class":149},[143,223,224],{"class":160}," '@quirekit\u002Fcm-view'\n",[143,226,227,229,232,235,238,240],{"class":145,"line":171},[143,228,150],{"class":149},[143,230,231],{"class":153}," { themeVariableReferences ",[143,233,234],{"class":149},"as",[143,236,237],{"class":153}," token } ",[143,239,157],{"class":149},[143,241,242],{"class":160}," '@quirekit\u002Fui'\n",[143,244,246],{"class":145,"line":245},4,[143,247,168],{"emptyLinePlaceholder":167},[143,249,251,253,256,260,263,266,269],{"class":145,"line":250},5,[143,252,174],{"class":149},[143,254,255],{"class":149}," const",[143,257,259],{"class":258},"sUNQB"," ProductTheme",[143,261,262],{"class":149}," =",[143,264,265],{"class":153}," Extension.",[143,267,268],{"class":180},"create",[143,270,271],{"class":153},"({\n",[143,273,275,278,281],{"class":145,"line":274},6,[143,276,277],{"class":153},"  name: ",[143,279,280],{"class":160},"'productTheme'",[143,282,283],{"class":153},",\n",[143,285,287,290],{"class":145,"line":286},7,[143,288,289],{"class":180},"  addCodeMirrorExtensions",[143,291,292],{"class":153},"() {\n",[143,294,296,299,302,305],{"class":145,"line":295},8,[143,297,298],{"class":149},"    return",[143,300,301],{"class":153}," EditorView.",[143,303,304],{"class":180},"theme",[143,306,271],{"class":153},[143,308,310,313],{"class":145,"line":309},9,[143,311,312],{"class":160},"      '&'",[143,314,315],{"class":153},": { color: token.color.text.primary, backgroundColor: token.color.surface.page },\n",[143,317,319,322],{"class":145,"line":318},10,[143,320,321],{"class":160},"      '.cm-content'",[143,323,324],{"class":153},": { padding: token.spacing.surface },\n",[143,326,328,331,334,337],{"class":145,"line":327},11,[143,329,330],{"class":160},"      '.msfe-inline-code'",[143,332,333],{"class":153},": { ",[143,335,336],{"class":149},"...",[143,338,339],{"class":153},"token.typography.code, backgroundColor: token.color.surface.subtle },\n",[143,341,343,346],{"class":145,"line":342},12,[143,344,345],{"class":160},"      '.msfe-link'",[143,347,348],{"class":153},": { color: token.color.text.accent },\n",[143,350,352],{"class":145,"line":351},13,[143,353,354],{"class":153},"    })\n",[143,356,358],{"class":145,"line":357},14,[143,359,360],{"class":153},"  },\n",[143,362,364],{"class":145,"line":363},15,[143,365,366],{"class":153},"})\n",[15,368,369],{},"Install it through extensions. EditorView themes scope rules to the editor instead of globally styling pre, table or button. Use CodeMirror precedence when needed instead of accumulating global important rules.",[10,371,373],{"id":372},"customization-map","Customization map",[39,375,376,389],{},[42,377,378],{},[45,379,380,383,386],{},[48,381,382],{},"Visual object",[48,384,385],{},"Entry",[48,387,388],{},"Boundary",[55,390,391,402,413,424,435,446],{},[45,392,393,396,399],{},[60,394,395],{},"Content, lines, selection and cursor",[60,397,398],{},"CodeMirror theme selectors",[60,400,401],{},"Retain input DOM ownership",[45,403,404,407,410],{},[60,405,406],{},"Semantic lines and marks",[60,408,409],{},"MSFE heading, link, code and container classes",[60,411,412],{},"Preserve source reveal and native selection",[45,414,415,418,421],{},[60,416,417],{},"Code tokens",[60,419,420],{},"HighlightStyle and syntaxHighlighting",[60,422,423],{},"Install the corresponding grammar",[45,425,426,429,432],{},[60,427,428],{},"Business nodes",[60,430,431],{},"Host NodeView components",[60,433,434],{},"Write fields through codecs",[45,436,437,440,443],{},[60,438,439],{},"Preview and disclosure controls",[60,441,442],{},"Host ComponentViews",[60,444,445],{},"Do not own editable body content",[45,447,448,451,454],{},[60,449,450],{},"Documentation prose",[60,452,453],{},"QuireKit QuireProse",[60,455,456],{},"Separate consumer from editor-internal themes",[15,458,459,460,463],{},"Regression-test class dependencies on upgrades rather than relying on private DOM ancestry. Broad resets such as ",[22,461,462],{},".cm-content * { all: unset }"," can break controls and accessibility.",[10,465,467],{"id":466},"themes-and-fonts","Themes and fonts",[15,469,470,471,474],{},"Use QuireKit Provider CSS variables in the editor. ",[22,472,473],{},"editor.setTheme()"," updates MSFE presentation settings but does not automatically recolor external chart engines. Those views must update their own visual parameters.",[15,476,477,478,481,482,485,486,489,490,493],{},"Selection and highlight can use fixed colors instead of following the theme's primary color: override\n",[22,479,480],{},"--qk-color-selection-document"," (document selection, preferably translucent) and ",[22,483,484],{},"--qk-prose-mark-background","\n(",[22,487,488],{},"==highlight==",", otherwise mixed from the primary color and page surface). Use a selector at the same level as the\ntheme variables, such as ",[22,491,492],{},"html[data-qk-theme][data-qk-scheme] { --qk-prose-mark-background: #fff1a1; }",", and set\na second pair for the dark scheme.",[15,495,496],{},"Fonts, line height and asynchronous resources affect geometry. Keep component geometry predictable and request measurement when it changes. Do not force every source line to a fixed height to hide overflowing previews.",[10,498,500],{"id":499},"integration-order","Integration order",[15,502,503],{},"Configure Provider, UnoCSS and tokens, then replace node and generic components, then add semantic themes. Keep the framework Host inside the Provider. Examples use QuireKit controls; feature extensions choose components and forward state\u002Factions.",[15,505,506,507,512,513,512,517,69,521,525],{},"See ",[508,509,511],"a",{"href":510},"\u002Fen\u002Fextensions\u002Fcontainers","container styles",", ",[508,514,516],{"href":515},"\u002Fen\u002Fextensions\u002Fcode-blocks","code toolbars",[508,518,520],{"href":519},"\u002Fen\u002Fextensions\u002Fdiagrams","charts",[508,522,524],{"href":523},"\u002Fen\u002Fcustomization\u002Fsearch","search panels",".",[527,528,529],"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":139,"searchDepth":164,"depth":164,"links":531},[532,533,534,535,536,537,538,539],{"id":12,"depth":164,"text":13},{"id":36,"depth":164,"text":37},{"id":116,"depth":164,"text":117},{"id":187,"depth":164,"text":188},{"id":194,"depth":164,"text":195},{"id":372,"depth":164,"text":373},{"id":466,"depth":164,"text":467},{"id":499,"depth":164,"text":500},"Connect your design system while keeping source, commands, and components within their own boundaries.","md",[543,304,544,545,546,547],"styles","CSS","component library","toolbar","renderer","en",{},0,"\u002Fen\u002Fcustomization\u002Ftheme",{"title":5,"description":540},"customization\u002Ftheme.en","e8kgfuFL8In6UB4o39iTUE1x_MBkVuy-EZkBh28P_rY",1793046312708]