Autocomplete
Theming
Restyle the menus and syntax colors with CSS variables.
comarkTheme is a CodeMirror base theme: your themes win. Every color is a CSS variable with a light and a dark value (the dark ones apply when the editor has a dark theme, such as @codemirror/theme-one-dark).
.cm-editor {
--cme-accent: #e11d48;
--cme-menu-bg: #fffdf7;
--cme-component: #7c3aed;
}
| Variable | Used for |
|---|---|
--cme-menu-bg, --cme-menu-fg, --cme-menu-muted | menu and docs panel |
--cme-menu-border, --cme-menu-shadow, --cme-menu-selected, --cme-menu-header | menu chrome |
--cme-accent | matched text, chevrons, links |
--cme-code-bg | code in the docs panel |
--cme-mono | label and example font |
--cme-mark, --cme-component, --cme-attr, --cme-value, --cme-class, --cme-binding, --cme-meta, --cme-math, --cme-slot | syntax colors |
Classes
- Syntax:
cm-comark-mark,-component,-attr,-value,-class,-id,-binding,-meta,-math,-slot,-alert(fromcomarkHighlightStyle; standard highlight tags are set too, so any CodeMirror theme colors Comark). - Menu:
cm-completionIcon-<type>(component,prop,prop-bound,slot,value,binding-root,binding-key,binding-leaf, …),cm-comark-section(breadcrumb),cm-comark-crumb,cm-comark-chevron,cm-comark-glyph,cm-comark-swatch. - Docs panel:
cm-comark-info,-info-title,-info-rows,-info-value,cm-comark-example.
Set theme: false to style everything yourself.