جاوااسکریپت - چگونه بهصورت پویا حالت سبک را در VueJS تغییر دهیم

من میخواهم قابلیتهایی ایجاد کنم که در آنها بتوانیم با کلیک روی دکمه سبک را تغییر دهیم.

در مورد من، من از sass/scss برای استایلدهیام استفاده میکنم..

به عنوان مثال من ۳ سبک مختلف دارم، default.scss، dark.scss و system.scss.. کد برای 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";

و در app.vue

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

و در test.vue خودم دکمهای برای تغییر استایل ایجاد میکنم

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

آیا ممکن است با کلیک روی دکمه سبک تغییر کند؟

چطور میتوانم این کار را انجام دهم، برای مثال تغییر @import "assets/sass/dark"; به @import "assets/sass/light"; در فایل app.vue؟

پاسخ شماره ۱

شما میتوانید بهطور مشروط با sass وارد کنید

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

کلاس div اصلی برنامه خود را متصل کنید

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

راههای زیادی برای مدیریت selectedMode وجود دارد اما فکر میکنم شما قبلاً میدانید چگونه این کار را انجام دهید

پاسخ شماره ۲

من این مشکل را با این حل میکنم..

1. حالت ذخیرهسازی را به localstorage قرار دهید و صفحه را دوباره بارگذاری کنید

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

2. بررسی localstorage و بارگذاری استایل

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