Я использую (теперь более старую) версию реактивного шаблона, который поставляется с CSS-модулями. Что с ними приятно, так это то, что вы можете создавать переменные и импортировать их в другие файлы CSS.
Здесь мой файл colors.css
:root {
/* Status colors */
--error: #842A2B;
--success: #657C59;
--pending: #666;
--warning: #7E6939;
}
Когда я импортирую этот файл, мне просто нужно использовать его в верхней части моего .css файла:
@import 'components/App/colors.css';
Я ищу вариант для двух тем для моего сайта, и я хотел бы иметь возможность динамически обновлять эти переменные с помощью Javascript. Какой лучший способ сделать это?
Изменить: я надеялся, что у вас есть способ обновить файл colors.css
и не придется выполнять условный импорт во всех компонентах, которые извлекаются из двух возможных файлов css... дайте мне знать, есть ли способ сделать это и если есть, я изменю принятый ответ. Спасибо всем, кто ответил!