自定义 CSS
自定义 CSS 可以调整 WonderPen 界面的字体、颜色、背景和间距等样式，也可用于支持 CSS 的导出格式。使用此功能需要了解基本的 CSS 语法；如果内置的外观与主题设置已能满足需要，可以优先使用这些设置。
注意
软件界面结构未来可能还会发生变化，可能会导致部分自定义 CSS 失效。
创建、启用与编辑方案
打开【设置】→【高级】→【自定义 CSS】，在这里管理方案：
- 点击添加，输入方案的标题和 CSS 代码。
- 点击保存继续编辑，或点击保存并关闭返回列表。
- 在列表中勾选方案，使其应用于界面。取消勾选可停用方案，代码仍会保留。
若要修改已有方案，点击该行右侧的编辑按钮。已启用的方案保存后会更新界面，无需取消勾选后再勾选。
多个方案可以同时启用。拖动方案左侧的把手可调整加载顺序；优先级相同且修改同一属性的规则，通常以后面的为准。
若添加按钮带有锁定标识，可用权限以应用内说明及版本对比为准。
示例：修改边栏与备注背景色
创建一个名为“柔和边栏”的方案，输入以下代码：
[data-role="main-page-frame"] {
/* 左边栏背景色 */
--wp-left-panel-bg: #fee;
/* 右边栏背景色 */
--wp-right-panel-bg: #efe;
/* 备注背景色 */
--wp-memo-bg: #efe;
}下图省略了注释，样式规则与上面的代码相同：
保存并启用后，主窗口左边栏的背景会变为淡红色，右边栏和备注的背景会变为浅绿色。
[data-role="main-page-frame"] 选中主窗口的界面框架。三个以 --wp- 开头的名称是 CSS 变量，分别控制左边栏、右边栏和备注的背景色。更多变量及默认值见内置主题样式。
导入、导出与删除方案
点击方案列表下方的管理，打开管理窗口：
- 导出：勾选一个或多个方案，再点击导出，保存为
.wpcss文件，方便备份或转移到其他电脑。 - 导入：点击导入，选择之前导出的
.wpcss文件。导入后，如需应用于界面，还要回到方案列表中勾选启用。 - 删除：勾选要删除的方案，点击删除并确认。若只是暂时不用，在方案列表中取消勾选即可。
管理窗口中的勾选用于选择导出或删除的对象，不会改变方案的启用状态。
用于导出文档
用于导出文档的 CSS 方案也在这里创建。在导出窗口中选择支持 CSS 的格式，如 HTML、PDF、图片或 EPUB，再通过该格式的自定义 CSS选项选择方案。只用于导出的方案无需在设置列表中勾选启用。
界面与导出文档的结构不同：上面示例中的主窗口选择器不适用于导出正文。编写导出样式时，请参考内置默认文档样式，并检查对应格式的预览或导出文件。
查找选择器与排查问题
可以通过开发者工具检查目标元素。优先使用含义清楚的 data-role 属性和 CSS 变量，避免依赖自动生成的类名；这些属性和变量也可能随版本调整。
如果样式没有生效，先检查代码是否已保存、CSS 语法是否正确，以及选择器是否匹配目标，再根据用途检查：
- 界面样式：确认已在设置的方案列表中勾选启用。多个方案相互影响时，可逐个停用以定位问题。
- 导出样式：确认已在对应格式的导出设置中选择该方案，并检查预览或导出文件。无需为此在设置的方案列表中勾选启用。
更多示例可参考 WonderPen 小百科的自定义 CSS页面。