@ 命题/ 主题

默认样式 永远 编辑器、工具栏、菜单、, 拾取器和文档内容。 包括轻而暗的主题, CSS 自定义 用于定制的属性,以及打印样式。 此软件包包含 CSS 和 Sass 源, 没有 JavaScript 运行时间 .

安装

pnpm add @domternal/theme

软件包宣布Node.js 22或以后用于工具化,并且没有对等的依赖性. 对主题、编辑器和框架包装器使用1.8.1版本,从而标记组件 和样式保持一致.

使用量

在应用程序的切入点中导入一次 :

import '@domternal/theme';

对于Sass管道,使用源入点:

@use '@domternal/theme/scss';

反应、 Vue 和 Angular 组件添加编辑器 .dm-editor 课。 与 @domternal/core 或者说 @domternal/vanilla,在主机上添加该类.

光和暗模式

光是默认值. 在编辑器及其共同祖先中添加主题类 UI 这样的兄弟式工具栏和菜单接收相同的调色板 :

<div class="dm-theme-dark">
  <div class="dm-toolbar">...</div>
  <div class="dm-editor">...</div>
</div>

使用 dm-theme-auto 遵循系统偏好,或 dm-theme-light 强迫 a 浅色调色板。 在运行时切换课程而不创建编辑器 . 对于无边框文档布局,请使用 preset: 'notion'; 见 逗号模式。 。 。 .

自定义主题

在主题后加载覆盖 。 默认在组件中存在, 所以目标 .dm-editor 财务报告和审定财务报表 .dm-toolbar 而不是只在祖先上设置变量:

.my-app .dm-editor,
.my-app .dm-toolbar {
  --dm-accent: #e11d48;
  --dm-accent-hover: #be123c;
  --dm-accent-surface: rgba(225, 29, 72, 0.1);
}

.my-app .dm-editor {
  --dm-editor-bg: #fefce8;
  --dm-editor-border-radius: 0.5rem;
}

这个 主题指南 覆盖自定义调色板, 单独挂载的 UI、滚动、 Sass 和完整 CSS 财产参考。 。 。 .

渲染和打印行为

• 打印样式隐藏编辑器控件并使用一个光调色板,包括当 屏幕主题为黑暗。 将编辑器从您的应用程序周围隔离 UI,请使用 打印扩展名。 。 。 . 打印需要的色彩覆盖 !important 一会儿 @media print 规则; 见 打印。 。 。 .
• 核心、表格和主题 1.6.0 支持合格的多行打印头 打印扩展名和标准表格节点视图。 仅打印页眉组 保留文档 JSON 和选择不变;浏览器 pagination 仍然适用. Core 的可选资源准备可等待现场图像和字体 命令驱动打印。 见 可选打印准备。 。 。 .
• 高亮和阴影的表格单元格保留了作者的背景. 在现场 编辑器,没有作者颜色的文本会适应这个背景. 这种行为 不序列化为 getHTML(); 使用只读编辑器显示已保存 包含相同的对比处理。 见 保留背景的文本 用于自定义主题、浏览器倒置和实验语调帮助.
• 核心和主题 1.5.0 也保留文字全宽的段落和标题 填补 BlockColor,包括空块。 默认文本使用可读文本 已知背景的音色; 选定对比度后有明确的文字颜色 政策。 见 块背景。 。 。 .
• 待处理的图像文件显示本地化加载状态, 并减少动作 支助。 该指示器为只取景并被隐藏于平面. 自定义主题应当 样式 .domternal-image-uploading 联 合 国 __spinner 财务报告和审定财务报表 __label 孩子们.
• 核心和主题 1.4.0 加 TextColor.configure({ contrast: 'auto' }) 用于文字颜色。 默认关闭; 启用 Core 扩展名 . 活编辑器仅在其测量对比度时调整不透明字面颜色 在已知的坚实背景上,低于4.5:1。 原始颜色保留在存储中 内容、 HTML、剪贴板输出、导出和打印。 指针、半透明文本和 不确定的油漆没有变化。 见 核心读取 用于支持的油漆、自定义标记视图和样式表要求.
• 核心1.8.0暴露 TextColorStorage.preview(root, marks) 文字颜色 使用相同的主题样式表在孤立的 DOM 预览中进行调整。 见 只读预览 用于所需加价 并预览生命周期.
• 当地人 hidden 属性隐藏主题元素; hidden="until-found" 保持其浏览器行为。 。 。 .
• 样式表包含 粘贴清除反馈 财务报告和审定财务报表 浮动菜单描述。 。 。 . 装入相应的扩展或组件以启用这些特性.

入境点