Change Styles Based On Dark Or Light Mode

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. O

Solution 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
}