Как динамически переключать цветовые темы с помощью SASS? - PullRequest
0 голосов
/ 27 марта 2019

Я пытаюсь реализовать переключаемые темы для проекта, это проект Mendix, но давайте предположим, что это веб-сайт.

  • На каждой странице много разных страниц и разных элементов.
  • Все стили для них написаны на SASS.Страницы и элементы используют значения из одного отдельного файла SASS с переменными - variable-1 .
  • У меня есть второй файл SASS с теми же переменными, но разными значениями - variable-2.

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


Здесь я вижу два варианта:

  1. Компилировать 2 файла CSSи переключаться между ними: связать все файлы sass с переменные-1 , скомпилировать файл CSS, затем связать все файлы Sass с переменные-2 , скомпилировать второй файл CSS.Переключайтесь между ними одним нажатием кнопки.

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

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

Большинствоскорее всего, не сработает, так как в проекте слишком много элементов, и было бы слишком сложно изменить класс для каждого.


Есть ли какое-либо решение этой проблемы?
Я бы хотелБуду очень признателен за совет!Заранее спасибо!

1 Ответ

0 голосов
/ 25 мая 2019

Вы не можете динамически изменять переменные sass в браузере. Вот более подробное объяснение:

Изменение значений переменных scss

Возможное решение для вас - добавить или удалить класс для тела, представляющего тему. Затем, например, если в теле есть класс "dark-theme", цвет фона черный и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...