在自定义主题中,如何选择所需light和dark调色板?

我对自定义主题如何支持浅色和深色模式的调色板有点困惑。当我编辑一个新主题并选择一个调色板时,我只能选择一个。当我预览时,并且我正在使用深色模式,我没有看到调色板。当我将我的设置(操作系统设置)切换到浅色模式时,我可以看到自定义调色板。所以我想问题是 - 如果一个主题只能选择一个调色板,我如何将新主题“绑定”到浅色模式的自定义调色板 X 和深色模式的自定义调色板 Y?

1 个赞

在您的用户偏好设置中,您可能已将暗黑模式配色方案设置为与默认方案不同的方案。

我相信,您可以在/admin/customize/colors中查看所有调色板。

目前,网站需要选择一种配色方案作为深色模式配色方案 - 它没有内置在配色调色板系统中以拥有两种模式。

然而,我们正在深入研究,这将使这一过程更加直观,并为所有主题包含原生的浅色和深色模式,用户偏好将决定他们将看到哪种模式。我们目前还没有这些更新的预计发布时间,但我们已经取得了很大进展,并希望尽快推出用于配色调色板的浅色和深色模式(以及其他相关改进)。

4 个赞

“然而,我们正在深入进行一项工作,这将使它更加直观,并为所有主题提供原生的亮色和暗色模式,用户偏好决定他们将看到哪种模式。”

但要明确的是,如果我不想向用户提供选项,只是有一个网站的亮/暗配色方案,那也是可能的,对吧?

我还是有点困惑。您是说主题将使用自定义选择的颜色方案用于亮色模式,而对于暗色模式,它会……做其他事情吗?如果我可以编辑默认的暗色模式,那就可以了,因为我不需要 N 个主题让用户选择。如果这可行,我怎么知道要编辑哪个方案?

是的,这是可能的。

您创建两个调色板(或自定义现有调色板)。我创建了基于 WCAG 浅色调色板的“粉色”调色板,并通过自定义 WCAG 深色调色板创建了“深粉色”调色板。我假设您不希望您的用户也为浅色模式选择深色调色板;然后我会确保“color palette can be selected by users”(用户可以选择调色板)被禁用。如果所有调色板都禁用此选项,用户界面中的下拉菜单将消失。

然后您的用户只会看到


而不是您在 Meta 上的偏好设置中看到的颜色选择器 此处

您在 default dark mode color scheme ID(默认深色模式配色方案 ID)站点设置中将深色调色板设置为深色模式的站点范围默认调色板。

并将浅色调色板放入主题的调色板设置中。

目前的限制是,我无法轻松创建另外两个调色板,例如浅蓝色和深蓝色,并让用户在粉色和蓝色之间进行选择。虽然与主题关联的浅色调色板工作正常,但我无法为该主题设置不同的默认深色调色板。但只要您只需要一个浅色和一个深色调色板,当前的选项就足够了。

5 个赞

谢谢,我会试试的!

是的,随着即将推出的浅色和深色调板支持,这将很容易实现。正如 @Moin 指出的那样,这种事情已经可以做到,但它不是最直观的做法。

随着即将到来的变化,所有调色板都将包含浅色和深色模式。这包括主题自带的配色方案,以及你可以在管理员那里创建和编辑的配色方案。你可以根据需要选择默认设置。

4 个赞

翘首以盼。不得不翻阅了很多主题才找到这些信息。目前将按照此主题中的建议进行。

1 个赞

这个功能实现过了吗?

1 个赞

还没有,但我们正在取得进展。不过,这是我们的最高优先级,所以预计在未来几周内会开始有一些成果落地。

2 个赞