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?

CodePudding user response：

i solve this issue with this..

1. store mode to localstorage and reload page

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

2. 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");
}

CodePudding user response：

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