UI and themes

Your application supplies the appearance

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.

The examples install a theme and syntax highlighting through addCodeMirrorExtensions() in shared/appearance.ts. Open Integration code to see the complete theme definition.

Preparing the editor…

Customization entry points

What to customize	Interface
Fonts, colors, spacing, and syntax highlighting	CodeMirror `EditorView.theme()` and `HighlightStyle`, installed through extensions
Source-bound components for images, tasks, and business nodes	`addNodeView()` and a framework renderer
Search panels, container folding, and preview actions	The feature's `ComponentViewRenderer` configuration
External toolbars, menus, and dialogs	Host components calling public commands, state queries, and guarded actions

theme: 'light' | 'dark' and setTheme() control the built-in color scheme. Supply complete visual themes through extensions and CSS.

Use QuireKit components

Configure the QuireKit UnoCSS preset, theme, and icon providers, then import buttons and other components from @quirekit/ui/vue. Use themeVariableReferences from @quirekit/ui to connect theme variables to the editor and keep its colors consistent with the page.

import { defineQuireKitUnoConfig } from '@quirekit/unocss-preset'

export default defineQuireKitUnoConfig()

Document input ownership

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.

A reusable theme module

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 },
    })
  },
})

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.

Customization map

Visual object	Entry	Boundary
Content, lines, selection and cursor	CodeMirror theme selectors	Retain input DOM ownership
Semantic lines and marks	MSFE heading, link, code and container classes	Preserve source reveal and native selection
Code tokens	HighlightStyle and syntaxHighlighting	Install the corresponding grammar
Business nodes	Host NodeView components	Write fields through codecs
Preview and disclosure controls	Host ComponentViews	Do not own editable body content
Documentation prose	QuireKit QuireProse	Separate consumer from editor-internal themes

Regression-test class dependencies on upgrades rather than relying on private DOM ancestry. Broad resets such as .cm-content * { all: unset } can break controls and accessibility.

Themes and fonts

Use QuireKit Provider CSS variables in the editor. editor.setTheme() updates MSFE presentation settings but does not automatically recolor external chart engines. Those views must update their own visual parameters.

Selection and highlight can use fixed colors instead of following the theme's primary color: override --qk-color-selection-document (document selection, preferably translucent) and --qk-prose-mark-background (==highlight==, otherwise mixed from the primary color and page surface). Use a selector at the same level as the theme variables, such as html[data-qk-theme][data-qk-scheme] { --qk-prose-mark-background: #fff1a1; }, and set a second pair for the dark scheme.

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.

Integration order

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/actions.

See container styles, code toolbars, charts and search panels.