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?
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
i solve this issue with this..
localstorage and reload pageconst changeMode = (mode) => { localStorage.setItem("mode", mode); window.location.reload(); };
localstorage and load styleif (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"); }