Изменить значения переменных CSS во время выполнения в Typescript

Question

У меня есть угловое 4 веб-приложение, которое должно устанавливать стили в зависимости от значения цветов и URL-адресов изображений, которые он получает из серверной части. Я успешно настроил веб-приложение для использования URL-адресов изображений, отправленных с сервера, для загрузки требуемых изображений, но проблема значений цвета является более сложной. Основные цвета, используемые во многих местах приложения, находятся в файле styles.css как переменные css.

:root {
--grape: #4b286d;
--purple: #651f97;
--purp-button-on-hover: #6d4299;
--accessibility-green: #248700;
--green-button-on-hover: #36ad0a;
--telus-grey: #595859;
--text-grey: #54595f;
--bg-grey: #e2e2e2;
--secondary-bg: #f5f5f5;
--white: #fff;
--almost-white: #f3f3f3;
--footer-bg: #333333;
--footer-copyright: #595853;
--select-title: #4a4a4a;
--pale-grey: #f5f6f7;
--select-gradient: linear-gradient(to bottom, #f2f2f2, #d4d4d4);
--select-border: #979797;
--font-type: "Helvetica Neue", helvetica, arial, sans-serif;
--font-light: 300;
}

Я хочу иметь возможность в машинописи просто изменить эти значения на значения, которые я получаю с сервера, когда приложение загружается первым. Кажется, что методы, которые я нашел, включают получение HTMLElement и изменение его стиля в цвет, который я хочу, это будет означать, что мне придется пройти через все приложение, меняя цвет для каждого элемента по одному. Есть ли лучший способ добиться этого? спасибо.

Answer 1

Поскольку эти значения определены на корневом уровне, вы можете просто обновить их с помощью документа. Я не совсем уверен, как вы можете получить доступ к документу в угловом формате, но как только у вас есть документ, вы можете сделать что-то вроде этого:

document.documentElement.style.setProperty(`--${your-variable}`, value + suffix); //suffix may be px or ''

Таким образом, вы будете непосредственно устанавливать переменную css, которая будет действовать во всех местах, и вам не придется ориентироваться на отдельные элементы.