你可以有两个主题
在 GrapesJS 中，有两个独立的表面： 编辑器界面 （面板、按钮、管理器）以及 画布 （页面的存在） 编辑，存在于iframe中）。它们是独立设计的。本指南 用CSS变量重新品牌UI，并单独为画布设置主题。
1. 覆盖UI颜色变量
GrapesJS 会暴露 CSS 的自定义属性。 在 GrapesJS CSS 并覆盖它们：
:root {
--gjs-primary-color: #1f2937; /* top bars / base */
--gjs-secondary-color: #e5e7eb; /* icons / text */
--gjs-tertiary-color: #6d28d9; /* active / accents */
--gjs-quaternary-color: #7c3aed; /* highlights */
}这四个变量涵盖了大多数品牌需求——编辑镀铬负责捕捉 立刻。
2. 目标编辑器类，用于更细致的控制
/* GrapesJS UI classes are prefixed with gjs- */
.gjs-pn-btn.gjs-pn-active { color: var(--gjs-tertiary-color); }
.gjs-block { border-radius: 8px; }3. 独立为画布设定主题
grapesjs.init({
container: '#gjs',
canvas: {
// Stylesheets injected into the canvas iframe (your site's CSS, fonts, etc.)
styles: ['/assets/site.css', 'https://fonts.googleapis.com/css2?family=Inter'],
},
});因为画布是iframe，它的样式不会泄漏到编辑器界面， 反之亦然——页面预览与制作保持一致，而UI则保留你的品牌。
小贴士
顺序和范围都要正确。你的覆盖样式表必须在之后grapes.min.css加载，否则默认会获胜。CSS 自定义属性（--gjs-primary-color和 Friends ）只会重新设计编辑器的界面——画布是一个独立的 iframe 主题，canvas.styles所以不要指望主机更改能达到它。要支持暗界面，建议重新定义暗域下的变量（例如 .dark :root），而不是覆盖数十个类。在直接针对gjs-类别之前，要依靠四个颜色变量——它们覆盖了大部分品牌，代码远少得多。
前提条件
你需要一个运行中的GrapesJS编辑器和一个样式表，可以在 GrapesJS CSS。记住两个表面：编辑器界面（面板、按钮）和 画布（正在编辑的页面，iframe中）——它们是独立样式的。
颜色完全变数
GrapesJS 为用户界面暴露了 CSS 自定义属性。覆盖四个核心颜色，另外 你自己样式表中的字体颜色：
:root {
--gjs-primary-color: #1f2937;
--gjs-secondary-color: #e5e7eb;
--gjs-tertiary-color: #6d28d9;
--gjs-quaternary-color: #7c3aed;
--gjs-font-color: #111827;
}支持暗色界面
重新定义你暗部的变量，而不是覆盖数十个类：
.dark :root, :root[data-theme="dark"] {
--gjs-primary-color: #0b1220;
--gjs-secondary-color: #94a3b8;
}独立为画布设定主题
grapesjs.init({
container: '#gjs',
canvas: { styles: ['/assets/site.css', 'https://fonts.googleapis.com/css2?family=Inter'] },
});因为画布是iframe，样式不会渗透到编辑器界面——预览与制作匹配，而Chrome保留品牌。
最佳实践
在直接针对 gjs- 类别之前，先依靠颜色变量——他们
用更少的代码覆盖大部分品牌，更好地应对GrapesJS的更新。装填你的
在基础CSS之后覆盖，所以他们赢了。保留 canvas 字体和重置
canvas.styles 所以预告片是忠实的。
下一步
将定制造型与 定制结合 插件 和 自定义模块， 或者探索 样式插件 和完整版 GrapesJS 插件 目录 GJS。市场。
常见问题
我该如何更改GrapesJS编辑器的颜色？
覆盖CSS自定义属性（--gjs-primary-color，
--gjs-secondary-color， --gjs-tertiary-color，
--gjs-quaternary-color）在 GrapesJS CSS 之后加载的样式表中。
画布的样式是和界面分开的吗？
是的——画布是一个带有独立文档的iframe。用途
canvas.styles 为了给它添加样式表。
我能完全重新设计面板吗？
是的——针对 gjs- 预置类别进行精细控制，尽管
大多数品牌形象都涉及变量。