2

Хочу реализовать переключение тем в веб-приложении на vue. Я использую бустрап и тему с сайта bootswatch.com. Тема оттуда представляет собой просто scss-файл с переменными. Именно поэтому мне не подходит способ, который широко предлагают в интернете, типа такого:

body {
  color: black;
}
body[data-theme="dark"] {
  color: white
}

Я пытаюсь придумать какой-то вариант динамически переключать подключение scss файл, но мне кажется это невозможно. Никаких статей по динамической темизации я не нашел. Вопрос: как динамически переключать bootstrap тему в vue-приложении?

1 ответ 1

1

Не знаю поможет ли мой ответ.

У меня в проекте была задача сделать 2 темы для 1 приложения.

  1. Все переменные, которые должны измениться были вынесены в отдельный файл colors.scss.
  2. В webpack-е было настроено подключение одного или другого такого файла в зависимости от билда: 1 или 2 проект.
  3. Была создана папка themes. В index файле сначала подключаются цвета, затем подключается основной main.scss, который использует эти переменные.

Во всех местах где используются цвета - нужно поставить переменные.

Не делал темные темы, но похоже, что нужно менять цвет bg, основной цвет текста и задать main-color, который будет белым или черным соответственно использоваться для всех элементов.

https://monosnap.com/file/Oa7gmeyl1tldnGyb2m2Gqja4LShvfk

2
  • Спасибо за ответ! Но это и так уже есть. Вы предлагаете вариант, в котором для смены темы на заново билдить проект. А я имел ввиду дать пользователю возможность выбора темы.
    – zabachok
    18 апр 2020 в 10:26
  • Понял о чем Вы. Но похоже, что вам так же нужны 2 сборки css, чтобы не хранить все стили - тк все происходит на стадии сборки webpack. Есть несколько вариантов. 1. Тянуть необходимый css для стилизации в зависимости от выбранных настроек. 2. Подключать 2 css сразу и менять глобальный класс у body. Как-то пользовался приложение nylas mail. Там были разные темы. Это на electron-е. Можно заглянуть в их исходники на github - github.com/nylas/nylas-mail.
    – Toba
    18 апр 2020 в 10:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.