Upgrade Guide

Version 5.1.0 to Version 5.2.0 [Dashboard]

• Updated Bootstrap to latest version 5.3.2

• Removed the scss file and also the folder src/assets/scss/dark/_dark.scss

• Added two new files

  • src/assets/scss/customizer/root.scss
  • src/assets/scss/customizer/_variable.scss

• Updated src/utilities/setting.js file

  Before

  updateBodyClass(Choices.SchemeChoice, setting.theme_scheme.value)
  updateColorRootVar(setting.theme_scheme.value, setting.theme_color, Choices.ColorChoice)

  After

  updateHtmlAttr({prop: 'data-bs-theme-color', value: setting.theme_color.value})
  updateHtmlAttr({ prop: 'data-bs-theme', value: setting.theme_scheme.value })

• Updated src/store/setting/state.js file

  Before

  export const initialState = {
      "theme_color": {
          "colors": {
              "--primary": "#7016d0",
              "--secondary": "#aca4bc",
              "--tertiray": "#3FF0B9",
              "--success": "#1AA053",
              "--danger": "#C03221",
              "--warning": "#F16A1B",
          },
          "value": "theme-color-default"
      },
  }
  export const defaultState = {
      theme_scheme: {
          target: "body",
          choices: ["light", "dark", "auto"],
          type: "layout_design",
          value: "light",
      },
      theme_color: {
          target: "body",
          choices: [
              "theme-color-blue",
              "theme-color-gray",
              "theme-color-red",
              "theme-color-yellow",
              "theme-color-pink",
              "theme-color-default",
          ],
          type: "default",
          colors: {
              "--primary": "#7016d0",
              "--secondary": "#aca4bc",
              "--tertiray": "#3FF0B9",
              "--success": "#1AA053",
              "--danger": "#C03221",
              "--warning": "#F16A1B",
          },
          value: "theme-color-default",
      },
  }

• Updated the src/store/pinia/state.js file

After

export const initialState = {
    theme_color: {
        colors: {},
        value: 'default'
    },
}
export const defaultState = {
    theme_scheme: {
        target: 'html',
        choices: ['light', 'dark', 'auto'],
        type: 'layout_design',
        value: 'dark'
    },
    theme_color: {
        target: 'html',
        choices: ['default', 'color-1', 'color-2', 'color-3'],
        type: 'variable',
        colors: {},
        value: 'default'
    },
}

• Updated the src/store/setting/mutations.js file

  Before

  theme_scheme: (state, payload) => {
      if (typeof payload !== typeof undefined) {
          state.setting.theme_scheme.value = payload
      }
      updateBodyClass(Choices.SchemeChoice, state.setting.theme_scheme.value)
      updateColorRootVar(state.setting.theme_scheme.value, state.setting.theme_color, Choices.ColorChoice)
      updateStorage(state.saveLocal, state.storeKey, createSettingObj(state))
  },
  theme_color: (state, payload) => {
      if (typeof payload !== typeof undefined) {
          _.forEach(payload.colors, (value, key) => {
          state.setting.theme_color.colors[key] = value
      })
          state.setting.theme_color.value = payload.value
      }
      updateColorRootVar(state.setting.theme_scheme.value, state.setting.theme_color, Choices.ColorChoice)
      updateStorage(state.saveLocal, state.storeKey, createSettingObj(state))
  },

• Updated the src/store/pinia/index.js file

After

theme_scheme(payload) {
    if (typeof payload !== typeof undefined) {
        this.setting.theme_scheme.value = payload
    }
    updateHtmlAttr({ prop: 'data-bs-theme', value: this.setting.theme_scheme.value })
    updateStorage(this.saveLocal, this.storeKey, createSettingObj(this))
},
theme_color(payload) {
    if (typeof payload !== typeof undefined) {
        _.forEach(payload.colors, (value, key) => {
        this.setting.theme_color.colors[key] = value
    })
        this.setting.theme_color.value = payload.value
    }
    updateHtmlAttr({ prop: 'data-bs-theme-color', value: this.setting.theme_color.value })
    updateColorRootVar(this.setting.theme_color.value, this.setting.theme_color, Choices.ColorChoice)
    updateStorage(this.saveLocal, this.storeKey, createSettingObj(this))
},