Different site color templates?

Question

css

Hello. Website in vuejs + css. I'm slowly rewriting in sass.
The site has 2 themes while, dark are planned more.
Now it’s done like this: a theme class is placed on the body and then the styles go like this:

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

And so for all elements of which are ten.
How can you make it beautiful? Maybe there are some dynamic properties or a plugin

Answer 1

Helped to become prgssr.ru/development/temizaciya-s-sass-beskonechn...
Chose the 1st approach.

Answer 2

Video tutorial that can help you - https://www.youtube.com/watch?v=H4cG4tbc-xQ&t=1390s
Article that can help you - https://webdesign-master.ru/blog/tools/2016- 06-04-...
Documentation in Russian - https://sass-scss.ru

Answer 3

You can make variables in sass. They can be changed. Due to this, you can manage themes, since all components will depend on them.
Looking ahead - use localstorage to store the theme in it. Otherwise, after the reboot, the topic will fly off.

Answer 4

Use native CSS variables .

Answer 5

Sass'u like json can be fed. Those. make some themes.json

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

In app.vue, import it into data, create a variable there that stores the selected theme, search for themes.json in computed, extract the desired theme and slip it to sass. And you don't need to add any classes then