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

Question

[andrei_pro]

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

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

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

И так для всех элементов которых десяток.
Как можно сделать это красиво? Может какие-то динамические свойства есть или плагин

Answer 1

[andrei_pro]

Помогла статься prgssr.ru/development/temizaciya-s-sass-beskonechn...
Выбрал 1й подход.

Answer 2

[Егор Антропов]

Видео урок, который может тебе помочь - https://www.youtube.com/watch?v=H4cG4tbc-xQ&t=1390s
Статья, которая может тебе помочь - https://webdesign-master.ru/blog/tools/2016-06-04-...
Документация на русском - https://sass-scss.ru

Comments

[sim3x]

Документация на русском

зачем?

[Егор Антропов]

sim3x, Почему нет?

[sim3x]

Егор Антропов, почему да?

[andrei_pro]

sim3x, Потому что язык у нас русский,. учить английский дело каждого. То что программисту обязательно нужно знать - не обязательно, у каждого свои цели и приоритеты.

[sim3x]

andrei_pro,

учить английский дело каждого

для разработчиков - утверждение ложно

И оно ложно даже для тех, кто закончил школу

[Егор Антропов]

sim3x, В любом случае, все мы находимся на русскоязычном сайте, следовательно русский знают все. Тогда, зачем мне кидать англоязычную документацию?

[sim3x]

Егор Антропов, потому что тут мало кто работает на 1с

[Егор Антропов]

sim3x, При чем тут 1с?

[sim3x]

Егор Антропов, потому что оригинальна документация по нему существует только на русском

Answer 3

[AdelNorbiblio]

В sass можно делать переменные. Их можно менять. За счёт этого можно управлять темами, так как все компоненты будут зависимы от них.
Забегая вперед - юзайте localstorage для того, чтобы хранить тему в ней. Иначе после перезагрузки тема будет слетать.

Comments

[andrei_pro]

Спасибо. Как связать потом localstorage и стили? чтобы менять $color

[AdelNorbiblio]

andrei_pro, давайте я вам на codesandbox.io покажу как это сделать. Придется потерпеть некоторое время, чтобы я это написал

Answer 4

[Alex]

Используйте нативные переменный CSS.

Answer 5

[nvdfxx]

Sass'у вроде как json можно скормить. Т.е. делаете какой-нибудь themes.json

{
    'default': {
        'textColor': '#000',
        'bgColor': '#f5f5f5'
    },
    'dark': {
        'textColor': '#f5f5f5',
        'bgColor': '#212121'
    } // и т.д.
}

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