Разные цветовые шаблоны сайта?

Всем привет. Сайт на vuejs + css. Потиху переписываю на sass.
На сайте есть 2 темы while, dark их планируется больше.

Сейчас сделано так: на боди ставится класс темы и дальше стили идут так:

.nav {
        position: absolute;
        left: 0;
        top: 0;
        background: #fff;
    }
    .dark .nav {
        background: #1b2f41;
    }


И так для всех элементов которых десяток.
Как можно сделать это красиво? Может какие-то динамические свойства есть или плагин
  • Вопрос задан
  • 385 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 4
Relow
@Relow
Ничего не умею
Видео урок, который может тебе помочь - https://www.youtube.com/watch?v=H4cG4tbc-xQ&t=1390s
Статья, которая может тебе помочь - https://webdesign-master.ru/blog/tools/2016-06-04-...
Документация на русском - https://sass-scss.ru
Ответ написан
@AdelNorbiblio
В sass можно делать переменные. Их можно менять. За счёт этого можно управлять темами, так как все компоненты будут зависимы от них.
Забегая вперед - юзайте localstorage для того, чтобы хранить тему в ней. Иначе после перезагрузки тема будет слетать.
Ответ написан
@nvdfxx
Senior Pomidor developer
Sass'у вроде как json можно скормить. Т.е. делаете какой-нибудь themes.json
{
    'default': {
        'textColor': '#000',
        'bgColor': '#f5f5f5'
    },
    'dark': {
        'textColor': '#f5f5f5',
        'bgColor': '#212121'
    } // и т.д.
}

В app.vue его импортите в data, создаете там же переменную, которая хранит выбранную тему, в computed выполняете поиск по themes.json, выцепляете нужную тему и подсовываете ее sass'у. И не нужно никаких классов тогда добавлять
Ответ написан
Ваш ответ на вопрос

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

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