Quiero crear funciones donde podamos cambiar el estilo al hacer clic en el botón.
en mi caso estoy usando sass/scss para mi estilo...
por ejemplo, tengo 3 estilos diferentes, default.scss, dark.scss y system.scss... el código es así para 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";y en la aplicación.vue
<style lang="scss"> @import "assets/sass/dark"; </style>y en mi test.vue creo un botón para cambiar el estilo
<v-btn @click="light" /> <v-btn @click="dark" />¿Es posible cambiar el estilo con un clic de botón?
cómo puedo hacerlo, por ejemplo, para cambiar @import "assets/sass/dark"; para @import "assets/sass/light"; del archivo app.vue ?
Puedes importar condicionalmente con sass
<style lang="scss"> .dark-mode { @import "assets/sass/dark"; } .light-mode { @import "assets/sass/light"; } </style> Vincule la clase de la división principal de su div
<div :class="selectedMode"> </div> Hay muchas formas de manejar el modo selectedMode , pero creo que ya deberías saber cómo hacerlo.
resuelvo este problema con esto ..
localstorage y página de recargaconst changeMode = (mode) => { localStorage.setItem("mode", mode); window.location.reload(); };
localstorage y el estilo de cargaif (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"); }