在 Total 5.4 中，我们添加了快速更改主题默认配色方案的功能，因此您可以立即全局更改网站的默认设计。要访问设置，只需转到外观 > 自定义 > 全局样式 > 颜色方案。

配色方案如何工作？

Total 主题使用 4 种文本颜色和 4 种表面颜色进行编码，这些颜色在整个站点中使用。这些颜色可以位于 :root CSS 属性声明中，如下所示：

:root {
--wpex-text-1: var(--wpex-gray-900);
--wpex-text-2: var(--wpex-gray-700);
--wpex-text-3: var(--wpex-gray-600);
--wpex-text-4: var(--wpex-gray-500);
--wpex-surface-1: var(--wpex-white);
--wpex-surface-2: var(--wpex-gray-100);
--wpex-surface-3: var(--wpex-gray-200);
--wpex-surface-4: var(--wpex-gray-300);
--wpex-alert-bg: var(--wpex-surface-3);
}

您可能会注意到表面和文本颜色使用主题灰度（请参阅主题样式指南）作为其默认值。

因此，当您调整定制器选项时，主题将简单地覆盖这些默认的自定义 CSS 属性（变量）。

在元素或自定义代码中使用配色方案颜色

如果您希望在自定义代码或元素中使用文本和表面颜色，您可以！

例如，如果您想将自定义 CSS 应用到某个元素以赋予其 Surface 2 背景，您可以这样：

.my-element { background: var(--wpex-surface-2); }

您还可以在 HTML 中使用主题实用程序类（或使用页面构建器时的元素自定义类字段）。例子：

<div class="my-element wpex-surface-2">element content</div>

正如您可能已经猜到的那样，可用的类名如下：

wpex-text-1
wpex-text-2
wpex-text-3
wpex-text-4
wpex-surface-1
wpex-surface-2
wpex-surface-3
wpex-surface-4