颜色

颜色是设计的主要组成部分之一。您可以创建一个黑暗，喜怒无常，有趣，轻松的主题，或者干净和公司。您选择哪种颜色将定义世界如何看待您的主题，WordPress提供了可以设置的一系列特定于颜色的配置选项。

这settings.color财产中theme.json使您可以完全控制主题中的颜色，渐变和更多工作。主要是，目标是配置用户界面中是否出现特定控件，但它也使您可以注册用户可以选择的自定义预设。

颜色设置

color是一个直接嵌套在顶级中的对象settings财产中theme.json。它用于配置用户界面中出现的多个特定于颜色的设置。

看看color在一个上下文中的属性theme.json具有默认值的文件：

{
	"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取一个值。这些是您可以注册自定义预设的地方，您将学习如何在此文档中创建它们。

颜色设置很大程度上可以分为四组，让您：

• 在UI中启用或禁用设置。
• 启用或禁用用户自定义颜色，双元过滤器和梯度的自定义。
• 启用或禁用核心WordPress颜色，Duotone和梯度预设。
• 注册自定义颜色，Duotone和梯度预设。

在以下各节中，您将学习其中的每一个。

文字，背景和链接设置

在块编辑器中，您经常会看到 文本，背景，和 关联 设置下的设置 颜色 一个块的面板，至少对于那些选择支持其中一个或多个的块。

这些选项在接口中看起来像这样：

但是，仅仅因为块寄存器对文本，背景和链接颜色的支持并不意味着您的主题也必须支持它们。这完全取决于您。

WordPress使您可以通过定义主题来决定您的主题是否支持任何或全部设置background，link，和text属性下的属性settings.color在theme.json：

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

默认情况下，所有这些都设置为true，因此它们的关联控件将出现在块接口中。如果要禁用功能，只需要将其值设置为false在你的theme.json。

为了进行练习，请尝试禁用背景颜色，但仍然允许文本和链接颜色：

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

某些核心WordPress块和第三方块可能具有用户可以配置的其他颜色选项。这些无法通过theme.json由于它们不是颜色系统的标准组成部分。

启用和禁用用户自定义

您需要为主题做出的主要决定之一是您是否要允许用户创建自定义颜色。一方面，启用自定义颜色为用户提供了许多灵活性和自由，可以真正使自己的网站真正建立自己的网站。但是也许您已经做了很多工作，以获取配色方案正好并希望确保用户仅从预定的调色板中挑选颜色。

这可能会根据您是否正在建立公开分布的主题而不是为客户的主题而发生变化。每个项目都是独一无二的，您将成为最适合您的设计的法官。

WordPress当前允许用户量身定制的颜色三个不同的功能，您可以通过这些功能启用或禁用。theme.json：

• custom： 用户是否可以创建和使用自定义颜色。
• customDuotone： 用户是否可以创建自定义Duotone过滤器（通常用于带有图像的块上的叠加层）。
• customGradient： 用户是否可以创建自定义背景梯度。

默认情况下，这些功能中的每一个都在theme.json：

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

用户定量的颜色

当。。。的时候settings.colors.custom值设置为true（默认值），用户将能够为单个块定义自定义颜色，如下所示：

因为默认情况下启用了这一点，请尝试通过将属性设置为false在你的theme.json文件：

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

现在，用户只能从预设颜色中选择。

用户注重的双酮过滤器

Duotone过滤器通常由显示图像的块支持。过滤器被用作图像上方的覆盖层，从而产生双酮效果。两种颜色过滤器允许用户选择阴影并突出显示颜色。

默认情况下，用户可以创建自定义双酮过滤器，如下所示：

由于默认情况下启用了自定义双酮过滤器，因此您必须设置settings.color.customDuotone财产为false如果您不想允许用户添加自定义颜色：

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

用户定量的梯度

像大多数其他颜色设置一样，默认情况下启用了自定义渐变。这使您的主题用户可以为任何支持它的块定义梯度背景：如下所示：

如果您已经仔细微调了所需的梯度，或者只是想完全禁用自定义梯度，则可以通过设置来关闭此功能settings.color.customGradient到false在theme.json：

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

默认WordPress预设

WordPress为每个颜色特征创建自己的预设。与用户定义的颜色一样，您需要决定是否要让用户访问这些颜色。他们经常会与您的主题的调色板发生冲突，但您也可以选择为用户提供完全自由决定自己的自由。

WordPress当前允许用户量身定制的颜色三个不同的功能，您可以通过这些功能启用或禁用。theme.json：

• defaultDuotone：用户是否可以从WordPress的默认Duotone滤波器预设中进行选择（通常用于带有图像的块上的叠加层）。
• defaultGradients： 用户是否可以从WordPress的默认背景梯度预设中选择。
• defaultPalette： 用户是否可以从WordPress的默认调色板中选择颜色。

默认情况下，这些功能中的每一个都在theme.json：

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

重要的是要注意，即使这些设置被禁用，WordPress仍将为其预设生成CSS自定义属性。这是用于向后兼容的，因此用户不会丢失他们以前在使用另一个主题时选择的颜色，渐变或Duotone过滤器。

默认调色板

WordPress带有自己的调色板，默认情况下启用了尚未选择退出的主题的主题。它包含以下颜色：

• 黑色的
• 青色蓝灰色
• 白色的
• 浅粉色
• 生动的红色
• 发光生动的橙色
• 发光的生动琥珀色
• 浅绿色的青色
• 生动的绿色青色
• 淡雅蓝色
• 生动的青色蓝
• 生动的紫色

颜色预设可用于 文本，背景，关联，以及可能的其他颜色控制，如此屏幕截图所示：

有时您可能想禁用核心WordPress颜色，您可以通过设置来进行此操作settings.color.defaultPalette到false在theme.json：

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

默认的Duotone过滤器

WordPress具有定义的几个默认双酮过滤器预设：

• 深色灰度
• 灰度
• 紫色和黄色
• 蓝色和红色
• 午夜
• 洋红色和黄色
• 紫色和绿色
• 蓝色和橙色

这些将出现用于支持双酮过滤器的块（通常用作带有图像的块的覆盖层），如下所示：

如果您不想允许主题用户从默认的双酮预设中进行选择，则必须设置settings.color.defaultDuotone到false在theme.json：

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

默认梯度

默认情况下，WordPress定义了几个渐变，供用户选择。这些可以添加到支持梯度背景的块中：

• 生动的青色蓝色至生动的紫色
• 浅绿色的青色到生动的绿色青色
• 发光的生动琥珀色至发光的生动橙色
• 发光生动的橙色至生动的红色
• 非常浅灰色至青色蓝灰色
• 凉爽到温暖的光谱
• 腮红紫色
• 脸红波尔多
• 发光的黄昏
• 苍白的海洋
• 电草
• 午夜

它们如下所示 背景>梯度 在用户界面中的控制：

默认情况下启用了核心WordPress梯度预设，但是有时您可能希望将其禁用为主题。您可以通过设置来做到这一点settings.color.defaultGradients到false在你的theme.json：

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

注册自定义颜色预设

就像WordPress定义了自己的颜色，Duotone和梯度预设一样，您也可以。这是一个强大的功能，可让您自定义主题在网站的前端的外观，以及主题用户可以在块编辑器中选择哪种颜色。

您可以通过theme.json：

• duotone：用户可以选择的一系列Duotone过滤器（通常用于带有图像的块上的叠加层）。
• gradients：用户可以选择的一系列背景梯度对象。
• palette： 用户可以选择的一系列颜色对象。

这就是它的样子theme.json（请注意，尚未注册）：

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

WordPress将以您的每个预设的形式自动为您的每个预设生成CSS自定义属性--wp--preset--{type}--{slug}。因此，调色板预设与contrast会变成--wp--preset--color--contrast。

您可以在您的theme.json通过CSS自定义属性本身或通过特殊命名约定的样式var:preset|{type}|{slug}。您将在theme.json样式文档。

WordPress有时还会基于预设生成CSS类。例如，contrast调色板预设将有一个关联的类.has-contrast-color当用作块的文字颜色时.has-contrast-background-color当用作背景时。

自定义调色板

构建主题时，您几乎总是希望注册自己的调色板。对于某些主题，这可能像几种颜色一样简单。其他人可能包括数十种颜色。

最后，这是您的主题，WordPress为您提供了构建设计的工具。

您可以通过settings.color.palette财产中theme.json：

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

这palette属性接受颜色对象数组，这些对象中的每个对象都有三个必须设置的属性：

• color：有效的CSS颜色值。
• name： 您的颜色标签将是国际化的（以便可以翻译），并在某些情况下（例如工具提示）显示给用户。
• slug： 颜色的独特机器可读sl/id。这用于生成CSS自定义属性和CSS类。

假设您想为主题注册三种名为“基础”的颜色，对比度和主题。他们会像这样出现在彩色拾取器中：

要在界面中出现自定义颜色，必须将它们添加到settings.color.palette如本代码段所示的数组：

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#89CFF0",
					"name": "Primary",
					"slug": "primary"
				}
			]
		}
	}
}

您可以根据需要添加尽可能少的颜色，也没有官方的命名方案。

尽管没有官方命名计划，但base和contrastsl是事实上标准 列出 由二十三十三个默认主题。建议使用base对于网站背景和contrast用于文字。这提供了主题之间最大的未来范围和兼容性。它还为插件作者提供了一组标准的后备颜色。

自定义梯度

像颜色一样，您还可以注册一组自定义的梯度预设。而且您的主题可以支持的梯度数量没有限制，因此请疯狂并玩得开心！

您可以通过settings.color.gradients财产中theme.json：

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

这gradients属性接受一系列梯度对象，这些对象中的每个对象都必须设置三个属性：

• gradient： 有效的CSS背景梯度值。
• name： 您的渐变标签将进行国际化（以便可以翻译），并在某些情况下（例如工具提示）显示给用户。
• slug： 一个唯一的机器可读sl/id，适合您的梯度。这用于生成CSS自定义属性和CSS类。

假设您有几个名为Emerald的渐变和寓言日落，您想为主题添加，如下所示：

将以下内容添加到您的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"
				}
			]
		}
	}
}

自定义双酮过滤器

像颜色和渐变一样，您可以为主题注册任意数量的自定义双酮过滤器。这将使您的用户可以将自定义直接应用于支持Duotone的图像和其他块。

您可以通过settings.color.duotone财产中theme.json：

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

这duotone属性接受一系列Duotone对象，这些对象中的每个对象都有三个必须设置的属性：

• colors： 一个包含两个有效CSS颜色值的数组。
• name： 您的Duotone过滤器的标签，该标签将被国际化（以便可以翻译）并在某些情况下显示给用户，例如工具提示。
• slug： Duotone滤波器的独特机器可读sl/ID。这用于生成CSS自定义属性和CSS类。

假设您想创建两个Duotone滤波器 – 一个用于红色阴影和亮点的滤波器，以及一个类似的蓝色，如下所示：

要注册红色和蓝色的Dutone过滤器，请将此代码添加到您的theme.json：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [
						"#450a0a",
						"#fef2f2"
					],
					"name": "Red",
					"slug": "red"
				},
				{
					"colors": [
						"#172554",
						"#eff6ff"
					],
					"name": "Blue",
					"slug": "blue"
				}
			]
		}
	}
}

Duotone当前不支持CSS自定义属性或参考，也不能动态生成。有一个 公开票 解决这个问题。