颜色设置

color是一个直接嵌套在theme.json顶层settings属性中的对象，用于配置界面中出现的各种与颜色相关的设置。

以下是带有默认值的theme.json文件中color属性的示例：

{
	"version": 2,
	"settings": {
		"color": {
			"background": true,
			"custom": true,
			"customDuotone": true,
			"customGradient": true,
			"defaultDuotone": true,
			"defaultGradients": true,
			"defaultPalette": true,
			"duotone": [],
			"gradients": [],
			"link": true,
			"palette": [],
			"text": true
		}
	}
}

如您所见，大多数设置都接受布尔值，也就是说您可以将其设置为true或false。而duotone、gradients和palette这类设置则接受值数组。正是通过这些数组，您才可以注册自定义预设，本文档也将介绍如何创建此类预设。

颜色设置大致可分为四类，它们分别能让您：

  • 启用或禁用界面中的各类颜色相关设置。
  • 启用或禁用用户对颜色、双色滤镜以及渐变的自定义设置。
  • 启用或禁用WordPress内置的默认颜色、双色及渐变预设。
  • 注册自定义的颜色、双色及渐变预设。

在接下来的章节中，您将了解每类设置的具体作用。

文本、背景与链接设置

在块编辑器中，至少对于那些支持相关功能的块而言，您通常会在块的颜色面板下看到文本、背景和链接设置。

这些选项在界面中的显示效果如下：

WordPress文章编辑器，其中有一个蓝色背景的段落块，右侧打开了背景颜色选择器，展示了多种颜色选项。

但即便某个块支持文本、背景和链接颜色设置，您的主题也并非必须支持这些功能，这完全由您来决定。

您可以通过在theme.json的settings.color下定义background、link和text属性，来决定主题是否支持这些设置：

{
	"version": 2,
	"settings": {
		"color": {
			"background": true,
			"link": true,
			"text": true
		}
	}
}

默认情况下，所有这些属性都设置为true，因此相应的控制选项会显示在块编辑器界面中。如果您想禁用某个功能，只需在theme.json中将对应的值设置为false即可。

作为练习，您可以尝试禁用背景颜色设置，但仍保留文本和链接颜色设置：

{
	"version": 2,
	"settings": {
		"color": {
			"background": false,
			"link": true,
			"text": true
		}
	}
}

有些WordPress内置块以及第三方块还提供其他可供用户配置的颜色选项，由于这些并非颜色系统的标准组成部分，因此无法通过theme.json来启用或禁用它们。

启用与禁用用户自定义设置

在为主题设计时，您需要做出的一个重要决定就是是否允许用户创建自定义颜色。一方面，允许用户自定义颜色能给他们极大的灵活性，让他们能够真正打造属于自己的网站风格；但另一方面，如果您已经花费大量精力将主题的颜色方案调整得恰到好处，可能希望确保用户只能从预定义的色板中选择颜色。

WordPress目前允许针对三种不同的功能进行用户自定义颜色设置，您可以通过theme.json来启用或禁用这些功能：

  • custom: 是否允许用户创建并使用自定义颜色。
  • customDuotone: 是否允许用户创建自定义的双色滤镜（通常用于带有图片的块的叠加效果）。
  • customGradient: 是否允许用户创建自定义的背景渐变。

默认情况下，theme.json中这三种功能都是启用的：

{
	"version": 2,
	"settings": {
		"color": {
			"custom": true,
			"customDuotone": true,
			"customGradient": true
		}
	}
}

用户自定义颜色

当settings.colors.custom的值设置为true（即默认值）时，用户就可以为各个块定义自定义颜色，如下图所示：

WordPress文章编辑器，其中有一个蓝色背景的段落块，右侧显示了文本颜色选项，用户正在选择自定义颜色。

由于此功能默认是启用的，您可以尝试通过在theme.json中将该属性设置为false来关闭它：

{
	"version": 2,
	"settings": {
		"color": {
			"custom": false
		}
	}
}

如此之后，用户就只能从预定义的颜色中选择了。

用户自定义双色滤镜

通常，那些显示图片的块都支持双色滤镜。这种滤镜会作为图片上方的叠加层，形成双色效果。用户可以通过它选择阴影色和高亮色。

默认情况下，用户可以创建自定义的双色滤镜，如下图所示：

WordPress文章编辑器，其中有一个图片块，自定义双色滤镜选项处于开启状态。

因为默认是启用自定义双色滤镜的，所以如果您不希望用户添加自定义颜色，就必须将settings.color.customDuotone设置为false：

{
	"version": 2,
	"settings": {
		"color": {
			"customDuotone": false
		}
	}
}

用户自定义渐变

与大多数其他颜色设置一样，自定义渐变默认也是启用的。这样一来，您的主题用户就可以为支持渐变背景的任何块定义渐变效果，如下图所示：

WordPress文章编辑器，其中有一个封面块，右侧的叠加选项中打开了渐变选择器。

如果您已经精心挑选好了希望提供给用户的渐变选项，或者干脆想完全禁用自定义渐变，可以通过在theme.json中将settings.color.customGradient设置为false来实现：

{
	"version": 2,
	"settings": {
		"color": {
			"customGradient": false
		}
	}
}

WordPress默认预设

WordPress为每种颜色功能都预置了默认选项。与用户自定义颜色类似，您也需要决定是否允许用户使用这些默认选项。虽然这些默认颜色可能会与您主题的色板存在冲突，但您也可以选择让用户完全自行决定颜色。

WordPress目前允许针对三种不同的功能进行用户自定义颜色设置，您可以通过theme.json来启用或禁用这些功能：

  • defaultDuotone：是否允许用户从WordPress默认的双色滤镜预设中选择（通常用于带有图片的块的叠加效果）。
  • defaultGradients：是否允许用户从WordPress默认的背景渐变预设中选择。
  • defaultPalette：是否允许用户从WordPress默认的色板中选择颜色。

默认情况下，theme.json中这三种功能都是启用的：

{
	"version": 2,
	"settings": {
		"color": {
			"defaultDuotone": true,
			"defaultGradients": true,
			"defaultPalette": true
		}
	}
}

需要指出的是，即便禁用了这些设置，WordPress仍会为相应的预设生成CSS自定义属性，这只是为了保持向后兼容性，避免用户在使用其他主题时已选择的颜色、渐变或双色滤镜丢失。

默认色板

WordPress自带了自身的色板，对于那些没有选择取消该功能的主题来说，此色板是默认启用的。它包含以下颜色：

  • 黑色
  • 青蓝色灰色
  • 白色
  • 淡粉色
  • 鲜红色
  • 亮亮鲜橙色
  • 亮亮鲜琥珀色
  • 浅绿青色
  • 鲜绿青色
  • 淡青蓝色
  • 鲜青蓝色
  • 鲜紫色

如这张截图所示，文本、背景、链接以及可能的其他颜色控制选项都提供有默认颜色预设：

WordPress文章编辑器，其中有一个包裹着段落块的组块，右侧侧边栏中高亮显示了文本颜色选项。

有时您可能希望禁用WordPress默认的颜色，只需在theme.json中将settings.color.defaultPalette设置为false即可：

{
	"version": 2,
	"settings": {
		"color": {
			"defaultPalette": false
		}
	}
}

默认双色滤镜

WordPress预置了若干默认的双色滤镜，如下所示：

  • 深灰色调
  • 灰色调
  • 紫色与黄色
  • 蓝色与红色
  • 午夜色
  • 品红与黄色
  • 紫色与绿色
  • 蓝色与橙色

这些默认滤镜会出现在支持双色滤镜的块上（通常用于带有图片的块的叠加效果），如下图所示：

WordPress文章编辑器，其中有一个图片块，应用了紫色到黄色的双色滤镜背景。

如果您不希望主题用户使用默认的双色滤镜，就必须将settings.color.defaultDuotone设置为false：

{
	"version": 2,
	"settings": {
		"color": {
			"defaultDuotone": false
		}
	}
}

默认渐变

与颜色类似，您也可以为主题注册自定义的渐变预设。而且您的主题支持的渐变数量没有限制，不妨大胆创造一些独特的渐变效果！

您可以通过theme.json中的settings.color.gradients属性来注册自定义渐变：

{
	"version": 2,
	"settings": {
		"color": {
			"gradients": []
		}
	}
}

gradients属性接受一个渐变对象数组，每个渐变对象都需要设置三个属性：

  • gradient：有效的CSS背景渐变值。
  • name：渐变的名称，该名称会被国际化处理（以便翻译），并在某些场景下（如工具提示）显示给用户。
  • slug：该渐变的唯一、机器可读的标识符，用于生成CSS自定义属性和CSS类。

假设您想为主题添加两种名为“翡翠色”和“奇幻日落色”的渐变，如下所示：

WordPress文章编辑器，其中有一个图片块，应用了蓝色调的双色滤镜。

要在theme.json中注册这两种渐变，只需添加如下代码：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"color": {
			"gradients": [
				{
					"gradient": "linear-gradient(to right, #10b981, #64a30d)",
					"name": "Emerald",
					"slug": "emerald"
				},
				{
					"gradient": "linear-gradient(-225deg,#231557,#44107a 29%,#ff1361 67%,#fff800)",
					"name": "Fabled Sunset",
					"slug": "fabled-sunset"
				}
			]
		}
	}
}

目前，双色滤镜还不支持CSS自定义属性或引用，也无法动态生成。目前有一个开放的问题正在寻求解决这一问题的方法。