Version 4.0.0 to Version 4.1.0

• Updated Bootstrap to latest version 5.3.2

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

• 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

• Remove the dark.scss in app.js

import "./assets/scss/dark.scss";

• Updated the Color Customizer in src/components/setting/sections/color-customizer.js file

Before

<Collapse in={open}>
      <div>
          <div className="form-group d-flex justify-content-between align-items-center">
                <label htmlFor="custom-primary-color">Primary</label>
                <input name="theme_color" data-extra="primary" onInput={(e) => colorChange('custom-color', {"--primary": e.target.value}, true)} type="color" id="custom-primary-color" value={colorValue.colors['--primary']} />
          </div>
          <div className="form-group d-flex d-flex justify-content-between align-items-center">
                <label htmlFor="custom-info-color">Secondary</label>
                <input name="theme_color" data-extra="info" onInput={(e) => colorChange('custom-color', {"--info": e.target.value}, true)} type="color" id="custom-info-color" value={colorValue.colors['--info']} />
          </div>
      </div>
</Collapse> 

After

<Collapse in={open}>
        <div>
          <div className="form-group d-flex justify-content-between align-items-center">
            <label htmlFor="custom-primary-color">Primary</label>
            <input
              name="theme_color"
              data-extra="primary"
              onInput={(e) =>
                colorChange(
                  "custom",
                  { "--primary": e.target.value },
                  true
                )
              }
              type="color"
              id="custom-primary-color"
              value={
                colorValue.colors["--primary"]
                  ? colorValue.colors["--primary"]
                  : "#3a57e8"
              }
            />
          </div>
          <div className="form-group d-flex d-flex justify-content-between align-items-center">
            <label htmlFor="custom-secondary-color">Secondary</label>
            <input
              name="theme_color"
              data-extra="secondary"
              onInput={(e) =>
                colorChange(
                  "custom",
                  { "--secondary": e.target.value },
                  true
                )
              }
              type="color"
              id="custom-secondary-color"
              value={
                colorValue.colors["--secondary"]
                  ? colorValue.colors["--secondary"]
                  : "#8a92a6"
              }
            />
          </div>
          <div className="form-group d-flex d-flex justify-content-between align-items-center">
            <label htmlFor="custom-success-color">Success</label>
            <input
              name="theme_color"
              data-extra="success"
              onInput={(e) =>
                colorChange(
                  "custom",
                  { "--success": e.target.value },
                  true
                )
              }
              type="color"
              id="custom-success-color"
              value={
                colorValue.colors["--success"]
                  ? colorValue.colors["--success"]
                  : "#1aa053"
              }
            />
          </div>
          <div className="form-group d-flex d-flex justify-content-between align-items-center">
            <label htmlFor="custom-danger-color">Danger</label>
            <input
              name="theme_color"
              data-extra="danger"
              onInput={(e) =>
                colorChange(
                  "custom",
                  { "--danger": e.target.value },
                  true
                )
              }
              type="color"
              id="custom-danger-color"
              value={
                colorValue.colors["--danger"]
                  ? colorValue.colors["--danger"]
                  : "#c03221"
              }
            />
          </div>
          <div className="form-group d-flex d-flex justify-content-between align-items-center">
            <label htmlFor="custom-warning-color">Warning</label>
            <input
              name="theme_color"
              data-extra="warning"
              onInput={(e) =>
                colorChange(
                  "custom",
                  { "--warning": e.target.value },
                  true
                )
              }
              type="color"
              id="custom-warning-color"
              value={
                colorValue.colors["--warning"]
                  ? colorValue.colors["--warning"]
                  : "#f16a1b"
              }
            />
          </div>
          <div className="form-group d-flex d-flex justify-content-between align-items-center">
            <label htmlFor="custom-info-color">Info</label>
            <input
              name="theme_color"
              data-extra="info"
              onInput={(e) =>
                colorChange(
                  "custom",
                  { "--info": e.target.value },
                  true
                )
              }
              type="color"
              id="custom-info-color"
              value={
                colorValue.colors["--info"]
                  ? colorValue.colors["--info"]
                  : "#08B1BA"
              }
            />
        </div>
    </div>
</Collapse>

• Updated the src/store/setting/state.ts file

Before

export const initialState: SettingState = {
"theme_color": {
      "colors": {
        "--primary": "#3a57e8",
        "--info": "#08B1BA"
      },
      "value": "theme-color-default"
    },
}
// Default Setting State
export const defaultState: SettingDefaultState = {
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": "#3a57e8",
        "--info": "#08B1BA",
      },
      value: "theme-color-default",
    },
}

After

export const initialState: SettingState = {
"theme_color": {
      "colors": {},
      "value": "theme-color-default"
    },
}
// Default Setting State
export const defaultState: SettingDefaultState = {
theme_scheme: {
      target: "html",
      choices: ["light", "dark", "auto"],
      type: "layout_design",
      value: "light",
    },
theme_color: {
        target: "html",
        choices: [
          "default",
          "color-1",
          "color-2",
          "color-3",
          "color-4",
          "color-5",
        ],
        type: "default",
        colors: {},
        value: "default",
      },
}

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

Before

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

After

theme_scheme: (state, action) => {
      if (typeof action.payload !== typeof undefined) {
        state.setting.theme_scheme.value = action.payload;
      }
      updateHtmlAttr({
        prop: "data-bs-theme",
        value: state.setting.theme_scheme.value,
      });
      updateThemeScheme(
        state.setting.theme_scheme.value,
        Choices,
        state.setting.theme_color
      );
      updateStorage(state.saveLocal, state.storeKey, createSettingObj(state));
    },

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

• Updated the src/utilities/setting.js file

Before

export const updateDomValueBySetting = (setting, Choices) => {
                updateThemeScheme(setting.theme_scheme.value, Choices, setting.theme_color)
                updateThemeScheme(setting.theme_scheme.value, Choices, setting.theme_color)
                }

export const updateDomValueBySetting = (setting, Choices) => {
                updateHtmlAttr({ prop: "data-bs-theme-color", value: setting.theme_color.value,});
                updateHtmlAttr({ prop: "data-bs-theme", value: setting.theme_scheme.value });
                }

• Updated the src/utilities/colors.js file