主题
Clepit 主题由 CSS 变量驱动。设置 theme: "auto" | "light" | "dark"，或传入显式的 themeOverrides。
theme
TypeScript
// EditorConfig / RendererConfig
theme?: 'auto' | 'light' | 'dark'auto 预设通过 prefers-color-scheme 跟随操作系统的配色方案，并在其更改时实时切换。
TypeScript
import { Editor } from '@clepit/core';
Editor.create({ containerId: 'editor', theme: 'auto' });ThemeTokens
全部 22 个 token 都是可选的。任何你省略的都会回退到所选预设。
| Token | 控制内容 |
|---|---|
| bg | 编辑器/渲染器的主背景色 |
| surface | 次级表面：命令面板、模式栏顶部 |
| surface2 | 三级表面：悬浮菜单背景 |
| text | 主要文本颜色 |
| textMuted | 次要文本：标签、备用段落 |
| textSubtle | 细微文本：暗色元素、日期标记 |
| border | 主要边框颜色 |
| borderSubtle | 细微边框：非强调分割线 |
| primary | 主品牌色：按钮、锚点链接 |
| primaryHover | 主色悬停：按钮 hover/focus 状态 |
| primaryBg | 主色浅背景：焦点环 |
| marker | 文本高亮颜色：marker 工具 |
| selectionBg | 文本选区背景 |
| blockHighlightBg | 活动块背景 |
| success | 成功状态文本/图标颜色 |
| successBg | 成功状态浅背景：通知框 |
| warning | 警告状态文本/图标颜色 |
| warningBg | 警告状态浅背景 |
| error | 错误状态文本/图标颜色 |
| errorBg | 错误状态浅背景 |
| info | 信息状态文本/图标颜色 |
| infoBg | 信息状态浅背景 |
themeOverrides
覆盖任意 token 子集。编辑器会将它们作为作用域限定于其容器的 CSS 变量注入。
TypeScript
// themeOverrides accepts separate light and dark token sets.
// Both keys are optional — omit one to use the preset for that mode.
Editor.create({
containerId: 'editor',
theme: 'auto',
themeOverrides: {
light: {
primary: '#5b5bff',
primaryHover: '#4747e6',
bg: '#ffffff',
text: '#0a0a0a',
},
dark: {
primary: '#7c7cff',
primaryHover: '#9494ff',
bg: '#161b22',
text: 'rgba(240, 246, 252, 0.92)',
},
},
});CSS 自定义属性
每个 token 都映射到一个作用域限定于编辑器容器的 --clepit-* 变量。你可以从自己的样式表中读取或扩展它们。
CSS
/* Every ThemeToken maps to a --clepit-* CSS variable.
Variables are scoped to .clepit-editor, .clepit-renderer-content, and body[data-clepit-theme]. */
--clepit-bg
--clepit-surface
--clepit-surface-2
--clepit-text
--clepit-text-muted
--clepit-text-subtle
--clepit-border
--clepit-border-subtle
--clepit-primary
--clepit-primary-hover
--clepit-primary-bg
--clepit-marker
--clepit-selection-bg
--clepit-block-highlight-bg
--clepit-success
--clepit-success-bg
--clepit-warning
--clepit-warning-bg
--clepit-error
--clepit-error-bg
--clepit-info
--clepit-info-bgCSS
#editor {
color: var(--clepit-text);
background: var(--clepit-bg);
--my-surface: var(--clepit-surface-2);
border: 1px solid var(--clepit-border);
}逐块 styles 与 classNames
RendererConfig.styles 将与框架无关的 CSS 属性直接传递到组件的根元素。RendererConfig.classNames 在不影响内置样式的情况下添加额外的 CSS 类。两者可以组合使用。
TypeScript
import { Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames } from '@clepit/core';
const styles: BlockStyles = {
// alert block — keyed by variant
alert: {
error: { borderRadius: '8px', padding: '12px 16px' },
info: { borderRadius: '8px', padding: '12px 16px' },
},
// header block — keyed by level
header: {
h1: { fontFamily: 'Georgia, serif' },
h2: { fontFamily: 'Georgia, serif' },
},
// paragraph block — flat CSSProperties
paragraph: { lineHeight: '1.75' },
// table block — sub-element keys
table: { cell: { padding: '8px 12px' } },
// code block — sub-element keys
code: { container: { borderRadius: '6px' } },
};
const classNames: BlockClassNames = {
paragraph: 'prose-paragraph',
header: { h1: 'prose-h1', h2: 'prose-h2' },
alert: { info: 'alert-info', error: 'alert-error' },
};
Renderer.create({ containerId: 'output', data, styles, classNames });StyleManager.subscribe
订阅运行时 token 的变化。可用于将周围的 UI 与编辑器主题切换同步。
TypeScript
import { StyleManager } from '@clepit/core';
const unsubscribe = StyleManager.subscribe(theme => {
// theme is 'light' | 'dark' — sync surrounding UI
document.documentElement.setAttribute('data-theme', theme);
});
// later — clean up when the component unmounts
unsubscribe();为每次挂载提供 themeOverrides，可让同一应用在同一页面上呈现多个采用不同主题的编辑器。