根据暗或亮模式更改styles

Question

I want to have a dark and a light theme on my Vue app. I can create dark.scss file and change classes styles and use !important property to override styles defined in components. Or I can use props in my components and change className with v-if based on the theme. eg set class to className__light when theme is light otherwise set to className__dark . which one is better in all situations like performance or time needed to do it?

Answer 1

Well i would not do it with classes. I would create CSS variables with either SCSS or you create CSS variables in :root

If you do it with the :root method then it should look something like this:

:root {
   --background: red;
}

Then you can access it in any component like this for example:

.class {
   background: var(--background); // the background will appear red
}

Now you can change the background color with just 1 CSS variables.

To change the variable with Javascript you just write following:

 root.style.setProperty('--background', "green");

The problem here is that it isnt supported in IE if you care about browser support. So you should create an fallback like this:

.class {
   background: red; //fallback
   background: var(--background); // the background will appear red
}