Upgrade Guide

Version 1.0.1 to Version 2.0.0

• Updated Bootstrap to latest version 5.3.2

• Removed the files and folder in the customizer folder and 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))
                },