在运行时切换主题 - 现在最好的方法是什么？

【问题标题】：Switching themes in runtime - what is the best approach right now?在运行时切换主题 - 现在最好的方法是什么？
【发布时间】：2020-07-02 11:27:36
【问题描述】：

我正在构建 Clarity 3 应用程序（期待在发布后将其升级到 Clarity 4）。
我不关心旧浏览器。
我想，我不应该使用 Clarity SCSS，因为它将在 v4 中被删除

我想要一种在浅色和深色主题之间切换的简单方法，它将：

不在我的文件中包含手动复制的 Clarity CSS 代码like this example from docs
流畅切换主题，无故障
每个主题都会有一小部分自定义的 CSS 变量（带有品牌颜色和字体）

我在这里查看了几个答案和this repository mentioned in Clarity docs，但它们都不符合我的要求。

有什么建议吗？

【问题讨论】：

这能回答你的问题吗？ How to dynamically switch theme with vmware clarity

标签： css themes vmware-clarity

【解决方案1】：

您可以使用本机 css 变量，然后您可以通过 css 本身或 javascript 更改这些变量，因为您可以在那里处理 css 属性。为了平滑切换，可能已经通过提到的方法给出，我将添加一个专注于更改属性的转换：

.html

<html>
    <div id="somediv0" className="theme"></div>
    <div id="somediv1" className="theme"></div>
</html>

.css

:root {
    --theme-attribute-0: black;
    --theme-attribute-1: white;
}

.theme {
    color: var(--theme-attribute-1);
    background-color: var(--theme-attribute-0);
    transition: all 1000ms ease;
}

.js

element.addEventListener('click', () => {
    document.documentElement.style.setProperty('--theme-attribute-0', 'white');
    document.documentElement.style.setProperty('--theme-attribute-1', 'black');
})

【讨论】：

是的，但是我如何使用 Clarity css vars 做到这一点，而无需复制粘贴它们并手动重新分配 js 中的每个变量？