Как динамически переключать цветовые темы с помощью SASS?
Я пытаюсь реализовать переключаемые темы для проекта, это проект Mendix, но давайте предположим, что это веб-сайт.
- На каждой странице много разных страниц и разных элементов.
- Все стили для них написаны на SASS. Страницы и элементы используют значения из одного отдельного файла SASS с переменными - variable-1.
- У меня есть второй файл SASS с теми же переменными, но разными значениями - переменные-2.
Проблема:
Мне нужно изменить цветовую тему сайта одним нажатием кнопки. Поэтому в основном мне нужно, чтобы все элементы принимали цвета из разных наборов переменных, когда я нажимаю кнопку.
Я вижу два варианта здесь:
- Скомпилируйте 2 файла css и переключайтесь между ними: свяжите все файлы sass с переменными-1, скомпилируйте файл CSS, затем свяжите все файлы sass с переменными-2, скомпилируйте второй файл css. Переключайтесь между ними одним нажатием кнопки.
В этом варианте цвета не будут назначаться динамически, и каждый раз, когда я буду вносить изменения, мне придется вручную связывать каждый файл sass с различными переменными или изменять значения переменных и перекомпилировать все. Также я не смогу продолжать работать над проектом и переключать темы одновременно.
- Предопределите цветовые темы в миксинах, скомпилируйте классы CSS для каждой темы, как в этой статье, и используйте некоторую пользовательскую логику js для назначения соответствующих классов элементам.
Скорее всего, не сработает, поскольку в проекте слишком много элементов, и было бы слишком сложно изменить класс для каждого.
Есть ли решение этой проблемы?
Буду очень признателен за совет! Заранее спасибо!
1 ответ
Вы не можете динамически изменять sass-переменные в браузере. Вот более подробное объяснение:
Изменение значений переменных scss
Возможное решение для вас - добавить или удалить класс для тела, представляющего тему. Тогда, например, если тело имеет класс "темная тема", цвет фона будет черный и так далее.