Итак, во-первых, я не использую <style> в своих компонентах, я очень увлечен выделенными файлами для стилевого оформления CSS. И приложение сделано в Vue CLI environemnt. В этом контексте мне интересно, каковы мои лучшие варианты, чтобы разрешить несколько тем CSS?
Я могу придумать следующие вещи:
- Связать тему по умолчанию в теге
<link> моего index.html и затем Vueзамените это выбранной темой, выполнив манипуляции с DOM. Недостатком здесь является то, что при начальной загрузке приложения на мгновение может появиться неправильная тема, если только вы не используете стандартную - Импортирование темы с
require() в файле main.js, что может вызватьтот, который вы выбрали (прямо из начальной загрузки), который будет сохранен в cookie или localStorage. Недостатком здесь является то, что (я думаю?) Изменение темы потребует перезагрузки страницы, чтобы увидеть изменения. - Добавление объявления класса с именем темы (например,
.light-theme, .dark-theme) в качестве родительского элемента к каждому отдельному объявлению в моих темах, а затем атрибут my class в элементе #app определяет, какойТема, которую я использую, так что я могу изменить тему, выполнив <div id="app" :class="`theme-${themeName}`">. Здесь недостатком будет то, что мой связанный CSS-файл будет намного больше или сложнее.
Есть ли четвертый способ, который бы разрешил все эти проблемы? Значение:
- Загружать правильную тему сразу после обновления,
- Не требует перезагрузки
- Не иметь все темы в одном файле?