Как динамически изменять цветовую тему с меньшим количеством переменных по выбору пользователя

Question

Я использую Angular-material-6.В качестве основной таблицы стилей я использую таблицу стилей с угловым материалом и собственную собственную таблицу стилей.У меня есть поле выбора в заголовке, которое показывает название цвета темы, такое как красный, зеленый, синий и т. Д. Теперь моя задача состоит в том, чтобы изменить менее переменную в соответствии с выбранной пользователем темой.

например, по умолчанию основной цвет моего приложения - красный, и если пользователь изменит его на синий из поля выбора заголовка, то он автоматически изменит цвет моей основной переменной на красный.

Я попробовал простойспособ решения, как переключение CSS из index.html с использованием javascript, но я не уверен, как это сделать с меньшим и меньшим количеством переменных.

Заранее спасибо.

Answer 1

Less - это препроцессор CSS, что означает, что он генерирует CSS во время компиляции, а не во время выполнения.Поэтому вы не можете делать то, что намереваетесь делать.

Вы можете взглянуть на переменные css , если хотите динамически переопределить это.Вы также можете использовать CSS в JS или использовать каскадную модель CSS.