thehighhomie
@thehighhomie

Цветовой теминг приложения?

Ребят, как лучше реализовать функционал цветовых тем приложения (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 файл со стилями, который лежит отдельно.

Можете посоветовать решение грамотнее?
  • Вопрос задан
  • 342 просмотра
Решения вопроса 2
yarkov
@yarkov Куратор тега JavaScript
Помог ответ? Отметь решением.
Посмотрите, может пригодится: https://github.com/zephraph/vue-theme-loader
Ответ написан
AlexanderMarginal
@AlexanderMarginal
Frontend web developer
ЗИспользуйте нативные css переменные и изменяйте их. Мне кажется это самое лучшее решение.
PS если ответ помог вам, пожалуйста, отметьте его решением
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы