如何全局存储颜色，以便它们在js，css和html中可见？

Question

我有一个网站的颜色主题。到目前为止，我每次使用时都会手动为每个元素添加颜色。

拥有一组带有颜色的全局变量会更容易，这样，如果我决定更改一个，就不必遍历每个文件即可将每个实例手动更改为新颜色。

这可能吗？

Answer 1

可以使用CSS variables。

您可以在CSS中定义一个变量，

body {
  --my-color: #000;
}

然后在CSS或HTML中的任何地方使用它，如下所示：

p {
  color: var(--my-color);
}

或

<p style="color: var(--my-color)"></p>

您可以通过执行以下操作从JS检索变量值：

getComputedStyle(document.body).getPropertyValue('--my-color');

现在您的变量可以从CSS，HTML和JS中获得。