Переключение тем(dark mode) в SPA VUE на SCSS
Хочу реализовать переключение тем в веб-приложении на vue. Я использую бустрап и тему с сайта bootswatch.com. Тема оттуда представляет собой просто scss-файл с переменными. Именно поэтому мне не подходит способ, который широко предлагают в интернете, типа такого:
body {
color: black;
}
body[data-theme="dark"] {
color: white
}
Я пытаюсь придумать какой-то вариант динамически переключать подключение scss файл, но мне кажется это невозможно. Никаких статей по динамической темизации я не нашел. Вопрос: как динамически переключать bootstrap тему в vue-приложении?
Ответы (1 шт):
Не знаю поможет ли мой ответ.
У меня в проекте была задача сделать 2 темы для 1 приложения.
- Все переменные, которые должны измениться были вынесены в отдельный файл colors.scss.
- В webpack-е было настроено подключение одного или другого такого файла в зависимости от билда: 1 или 2 проект.
- Была создана папка themes. В index файле сначала подключаются цвета, затем подключается основной main.scss, который использует эти переменные.
Во всех местах где используются цвета - нужно поставить переменные.
Не делал темные темы, но похоже, что нужно менять цвет bg, основной цвет текста и задать main-color, который будет белым или черным соответственно использоваться для всех элементов.