如何使用 vue 和 vuex 在 metrinic 中切换到暗模式？

如何解决如何使用 vue 和 vuex 在 metrinic 中切换到暗模式？

我正在使用 metronic 主题和 vue 开发一个 SPA 网站我需要一个按钮来在 metronic 中在暗模式和亮模式之间切换。 我需要使用 vuex 和 vue 来解决这个问题。 有谁知道我该怎么做？ 这是layaout.config.json文件

{
  "demo": "demo3","self": {
    "layout": "default","body": {
    }
  },"colors": {
    "theme": {
      "base": {
        "white": "#ffffff","primary": "#1BC5BD","secondary": "#E5EAEE","success": "#1BC5BD","info": "#6993FF","warning": "#FFA800","danger": "#F64E60","light": "#F3F6F9","dark": "#212121"
      },"light": {
        "white": "#ffffff","secondary": "#ECF0F3","success": "#C9F7F5","info": "#E1E9FF","warning": "#FFF4DE","danger": "#FFE2E5","dark": "#D6D6E0"
      },},"gray": {
      "gray-100": "#F3F6F9","gray-200": "#ECF0F3","gray-300": "#E5EAEE","gray-400": "#D6D6E0","gray-500": "#B5B5C3","gray-600": "#80808F","gray-700": "#464E5F","gray-800": "#1B283F","gray-900": "#212121"
    }
  },"font-family": "Poppins",}
}

这也是 config.module.js 文件

import objectPath from "object-path";
import merge from "deepmerge";
import config from "@/panel/src/core/config/layout.config.json";

// action types
export const SET_LAYOUT_CONfig = "setLayoutConfig";
export const RESET_LAYOUT_CONfig = "resetLayoutConfig";
export const OVERRIDE_LAYOUT_CONfig = "overrideLayoutConfig";
export const OVERRIDE_PAGE_LAYOUT_CONfig = "overridePageLayoutConfig";

// mutation types

export default {
  state: {
    config: config,initial: config
  },getters: {
    /**
     * Get config from layout config
     * @param state
     * @returns {function(path,defaultValue): *}
     */
    layoutConfig: state => (path,defaultValue) => {
      return objectPath.get(state.config,path,defaultValue);
    }
  },actions: {
    /**
     * Set and replace the whole config
     * @param state
     * @param payload
     */
    [SET_LAYOUT_CONfig](state,payload) {
      state.commit(SET_LAYOUT_CONfig,payload);
    },/**
     * Reset the config at the initial state
     * @param state
     */
    [RESET_LAYOUT_CONfig](state) {
      state.commit(RESET_LAYOUT_CONfig);
    },/**
     * Reset the config using saved config in the cache by the layout builder
     * @param state
     */
    [OVERRIDE_LAYOUT_CONfig](state) {
      state.commit(OVERRIDE_LAYOUT_CONfig);
    },/**
     * Override config by page level
     * @param state
     * @param payload
     */
    [OVERRIDE_PAGE_LAYOUT_CONfig](state,payload) {
      state.commit(OVERRIDE_PAGE_LAYOUT_CONfig,payload);
    }
  },mutations: {
    [SET_LAYOUT_CONfig](state,payload) {
      state.config = payload;
    },[RESET_LAYOUT_CONfig](state) {
      state.config = Object.assign({},state.initial);
    },[OVERRIDE_LAYOUT_CONfig](state) {
      state.config = state.initial = Object.assign(
        {},state.initial,JSON.parse(localStorage.getItem("config"))
      );
    },[OVERRIDE_PAGE_LAYOUT_CONfig](state,payload) {
      state.config = merge(state.config,payload);
    }
  }
};

如果您有任何想法，请告诉我。