How to dynamically change style mode in vueJS

Question

i want to create features where we can change style on click button.

in my case im using sass/scss for my styling..

for example i have 3 different style, default.scss, dark.scss and system.scss.. the code is like this for dark.scss

// Mode
$mode: dark;

// Initialize
@import "init";

// Components
@import "./core/components/components";
@import "components/components";

// Layout
@import "layout/layout";
@import "./core/layout/docs/layout";

and on the app.vue

<style lang="scss">
@import "assets/sass/dark";
</style>

and on my test.vue i create button to change the style

<v-btn @click="light" />
<v-btn @click="dark" />

is that possible to change style with button click?

how i can do it, for example to change @import "assets/sass/dark"; to @import "assets/sass/light"; from file app.vue?

If you're using webpack you could use require in a condition. — Lucas David Ferrero
– Lucas David Ferrero, Commented Nov 15, 2021 at 14:33

jeremy castelli · Accepted Answer · 2021-11-15 22:42:35Z

1

You can conditionnally import with sass

<style lang="scss">
.dark-mode {
    @import "assets/sass/dark";
}
.light-mode {
    @import "assets/sass/light";
}
</style>

Bind the class of your App main div

<div :class="selectedMode">
    
</div>

There is a lot of way to handle selectedMode but I think you should already know how to do it

answered Nov 15, 2021 at 22:42

jeremy castelli

1,26011 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jazuly Over a year ago

the problem is on that file scss, there's another file scss that i import.. in my case i only need to change $mode: dark/light..

Jazuly Over a year ago

because i cant do it on frontend side, so i create 2 different file base scss..

jeremy castelli Over a year ago

not sure to understand but ... ok

Jazuly · Accepted Answer · 2021-11-15 16:53:19Z

0

i solve this issue with this..

store mode to localstorage and reload page

const changeMode = (mode) => {
  localStorage.setItem("mode", mode);
  window.location.reload();
};

check the localstorage and load style

if (localStorage.getItem("mode") && localStorage.getItem("mode") == "dark") {
  require("@/assets/sass/plugins.dark.scss");
  require("@/assets/sass/style.dark.scss");
} else {
  require("@/assets/sass/plugins.scss");
  require("@/assets/sass/style.scss");
}

answered Nov 15, 2021 at 16:53

Jazuly

1,4145 gold badges23 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to dynamically change style mode in vueJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related