Как хранить цвета глобально, чтобы они были видны в js, css и html?

Question

У меня есть цветовая тема для веб-сайта.До сих пор я вручную помещал цвет для каждого элемента при каждом его использовании.

Было бы проще иметь набор глобальных переменных с цветами, так что, если я решу изменить его, я не будуне нужно проходить через каждый файл, чтобы вручную изменить каждый экземпляр на новый цвет.

Возможно ли это?

Answer 1

Можно использовать переменные CSS .

Вы можете определить переменную, например, в своем 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.