自定义 CSS

注意：此项功能仍处于测试阶段，软件界面结构未来可能还会发生变化，可能会导致部分自定义 CSS 失效。

介绍

自定义 CSS 是一种可以让你自定义软件界面的方法，你可以使用它来修改软件的字体、颜色、背景、边框样式等等，基本上界面上可见的部分，都可以通过自定义 CSS 来调整样式。使用本功能可能需要你对 CSS 有一定的了解。

你可以在【选项设置】→【高级】→【自定义 CSS】中添加和编辑自定义 CSS，如下图所示：

你可以设置多个自定义 CSS 方案，并启用需要的方案。自定义 CSS 会覆盖软件的默认样式，因此方案的顺序有时候会影响最终的效果，你可以拖拽方案的顺序来调整对应 CSS 的出现顺序。

如果修改了 CSS 内容，需要在上图的列表复选框中选中它以让它生效。如果它已经是选中状态，可能需要先取消选中，再重新选中它，否则可能不能及时生效。

示例 1：修改左边栏背景色

下面是一个简单的示例：

在这个例子中，输入的 CSS 代码如下：

#root {
  --wp-frame-left-bg-color: #fee;
}

这段 CSS 代码会将软件的左侧边栏背景色改为淡红色。

其中 #root 为应用的根节点，--wp-frame-left-bg-color 为左侧边框背景色的 CSS 变量，你可以在内置主题样式中查看可用的 CSS 变量以及默认值。

示例 2：修改编辑器字体

下面是另一个示例：

[data-role="editor"] {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

这段 CSS 代码会将编辑器的字体加粗，并开启字体抗锯齿。

其中 [data-role="editor"] 对应编辑器元素的根节点。

示例 3：编辑器中使用虚线背景

下面的 CSS 代码可在编辑器中添加虚线背景。如编辑器本身已经指定了横线背景，需要先将其关闭。

.CodeMirror-code {
  background-image: linear-gradient(#fff calc(var(--wp-editor-line-height) - 1px), transparent 0), linear-gradient(90deg, var(--wp-border-color-2) 50%, transparent 0);
  background-size: 10px var(--wp-editor-line-height);
  background-position: 0 0, 0 0;
}

示例 4：加宽编辑器滚动条

一些用户可能更喜欢通过拖拽滚动条的方式来滚动编辑器，下面的 CSS 代码可将编辑器滚动条的宽度加宽，让操作滚动条更容易。

[data-role="editor"] {
  --wp-scroll-size: 20px;
}

你可以修改代码中的 20px 数值来调整滚动条的宽度，具体效果如下图所示：

你可以打开开发者工具来查看与界面有关的更多信息，需要注意的是，后续版本中，界面的结构、类名等可能会发生变化，因此自定义 CSS 时尽量不要依赖这些信息。相对来说，id、data-* 属性等更稳定，因此建议尽量使用这些属性来定位元素。

返回目录