Ребят, как лучше реализовать функционал цветовых тем приложения (dark, lightn и т.д.)
Я надумал только 2 варианта, на прмере тем Dark и Light:
1) Создать пару файликов css (dark.styl, light.styl). c родительскими классами-неймспейсами, относящимся к конкретной теме, к примеру dark.styl:
.theme-dark
background-color: '#050507'
color: '#ababba'
.layout
background-color '#2f343d'
.panel
background-color '#283142'
и т.д.
с light.styl та же структура, только цвета разные
ну а в компонентах просто указывать в html элементах эти классы
ну а на контейнер приложения просто выставлять классы для переключения тем.
2) создать в хранилище свойство, в объекте стейт, к примеру 'theme' и в каждом компоненте приложения, выставлять класс темы и описывать стили в компоненте для каждой темы. ну геморное конечно решение.
Еще я смотрел как реализован теминг во Vuetify, там компоненты разбиты на css и js, js файлы лежать в одной папке а css в другой. И именно компонентное разделение сущностей (button, input, modal и т.д.) а не как в первом варианте (одинаковые классы с разными цветами, не имеющии к компонентам никакого отношения).
Не хотелось бы такого разделения, ведь в приложении могут быть не только компоненты ui да и вообще для всех компонентов приложения придется писать css файл со стилями, который лежит отдельно.
Можете посоветовать решение грамотнее?
Простой
Простой
