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

Question

[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 файл со стилями, который лежит отдельно.

Можете посоветовать решение грамотнее?

Answer 1

[Алексей Ярков]

Посмотрите, может пригодится: https://github.com/zephraph/vue-theme-loader

Comments

[thehighhomie]

спасибо, интересный плагин, но он не решает вопроса, я про реализацию спрашиваю, хочу грамотно реализовать структуру. а плагин я так понимаю при загрузке только одну тему загружает, без перезагрузки не вариант переключаться как я понял

[thehighhomie]

и вопроса первый вариант похож на бутстраповский, у него аксент поставлен на классы, а у второго акент на компонентах, оба варианта меня не устраивают, я думаю можно грамотнее сделать, но примеров не нашел нормальных

[Евгений]

thehighhomie, бэкенд есть?

[thehighhomie]

Евгений, да, но бэкенд чисто для запросов данных, у меня SPA. этот функционал я хочу сделать во фронте

[Евгений]

thehighhomie, ну нашел с подрубом JQ,... (сам не знаком ни с js ни с jq...) говорят можно реализовать сессии тут(подправил ссыль на библеотеку)
Это если вобще бэк не юзать... костыль/нет - хз, не силен в фронте))

PS

Я бы сделал 2 файла стилей, и писал их имя в сессию, ну и выдерал имя файла при подрубе стилей... как-то так

[thehighhomie]

Евгений, это тоже самое, что класс у боди менять)) но я кстати смотрю еще аналоги плагинов, что Алексей Ярков предложил, и прихожу к мысли, что хоть и очень геморно в каждом компоненте описывать стили, но почему-то люди так делают... у меня больше 100 компонентов))) это как бы не очень приятно.

хотя если использовать вариант на классах, то можно сделать правку в одном файле (добавить цвета и класс-неймспейс для них) и вуаля.

что же выбрать...

[Евгений]

thehighhomie, так один файл сделал как надо, скопировал код во второй, запустил страницу и где надо меняешь цвет, пока не получишь желаемый результат, это же не весь файл править, а только цвета переписать) и то не все наверно...

[thehighhomie]

Евгений, ну не знаю, что будет проще поддерживать в будущем

[Rustam Bainazarov]

thehighhomie, как из верных подходов — описывать в компоненте общие стили, а цвета каждого компонента описывать в связке с темой. Либо делать универсальные CSS-переменные, если, конечно, вас устроит их поддержка со стороны браузеров.