Задать вопрос
@andrei_pro
css

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

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

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

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


И так для всех элементов которых десяток.
Как можно сделать это красиво? Может какие-то динамические свойства есть или плагин
  • Вопрос задан
  • 523 просмотра
Комментировать
Подписаться 4 Простой Комментировать
Решения вопроса 1
@andrei_pro Автор вопроса
Помогла статься prgssr.ru/development/temizaciya-s-sass-beskonechn...
Выбрал 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
Ответ написан
9 комментариев
9 комментариев
@AdelNorbiblio
В sass можно делать переменные. Их можно менять. За счёт этого можно управлять темами, так как все компоненты будут зависимы от них.
Забегая вперед - юзайте localstorage для того, чтобы хранить тему в ней. Иначе после перезагрузки тема будет слетать.
Ответ написан
2 комментария
2 комментария
Kozack
@Kozack Куратор тега CSS
Thinking about a11y
Используйте нативные переменный CSS.
Ответ написан
Комментировать
Комментировать
@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'у. И не нужно никаких классов тогда добавлять
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Нужен таргетолог нашего сайта
23 апр. 2024, в 15:57
10000 руб./за проект
3d модель накладок для наушнико
23 апр. 2024, в 15:55
1000 руб./за проект
Игровой проект VRussia online в поисках опытного backend разработчика
23 апр. 2024, в 15:54
500 руб./в час
Ещё заказы