如何使用 themeEditor 修改界面

‍

修改特定主题的界面

首先需要修改主题的 theme.json 文件，添加 config 字段，然后在 config 字段中指定的文件中指定设置界面定义。

例如这样

[
    {
        "name": "font-weight",
        "type": "number",
        "label": "一级标题字重",
        "selector": ".b3-typography .h1, .b3-typography h1, .protyle-wysiwyg .h1, .protyle-wysiwyg h1",
        "memo": "",
        "default":700,
        "unit": "none",
        "step": 100,
        "min": 500,
        "max": 1000
      },
      {
        "name": "font-weight",
        "type": "number",
        "label": "段落字重",
        "selector": ".b3-typography .p, .b3-typography p, .protyle-wysiwyg .p, .protyle-wysiwyg p",
        "memo": "",
        "default":700,
        "unit": "none",
        "step": 100,
        "min": 500,
        "max": 1000
      }
]

这个配置文件产生的自定义界面是这样的：

上面那个图片里面产生的效果就是它调整之后的。

如果调整之后的效果差不多可以了，点击这里

它会生成一个代码片段，这个代码片段只有在对应的主题下才会生效

差不多就是这样吧。

自定义通用配置

通用配置比较简单 ，只要直接把配置文件放进 data\storage\petal\themeEditor\commonConfigs 文件架就行了。

使用 css 配置

如果你不大清楚编写规则的话可以参考插件自带的几个示例配置，还是不会的话，就直接用 css 后缀名的配置文件就可以了。

特别的，css 配置文件中的 @import 规则会被解析为开关。

不过这种方式产生的界面可能会不大好读，例如这个 css

.file-tree {
    font-size: 12px; /* 设置合适的字体大小，可以根据需要调整 */
}

作为配置内容的话，产生的界面是这样的：

用这个文件调节主题外观之后产生的结果就是这个：

关掉插件之后如何管理代码片段

插件的这两个按钮

的作用分别是将当前配置好的样式写入主题专用代码片段和公共代码片段，之后使用 quicksnippets 插件就能快速开关了，差不多就是这样吧。