Upgrade Guide

Version 5.1.4 to Version 5.2.0

  • Updated Bootstrap to latest version 5.3.2
  • Removed the scss file and also the folder public/scss/dark/_dark.scss
  • Removed the files and folder in the customizer folder and added two new files
    • public/scss/customizer/root.scss
    • public/scss/customizer/_variables.scss
  • Remove the Dark css link for the head
    • removed in /public/components/partials/head.blade.php file
    <link rel="stylesheet" href="../assets/css/dark.min.css?v=1.1.0"/>
  • Updated the Default Layout file in views/layouts/dashboard.blade.php file

    • Before

     <html lang="en" dir="ltr">

    After

    <html lang="en" data-bs-theme="light" data-bs-theme-color="default" dir="ltr" >
  • Updated the Custom color options in views/components/shareoffcanvas.blade.php. file

    • Before

    <div class="collapse" id="custom-color">
    <div class="form-group d-flex justify-content-between align-items-center">
        <label class="" for="custom-primary-color">Primary</label>
        <input class="" name="theme_color" data-extra="primary" type="color" id="custom-primary-color" value="#3a57e8" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
        <label class="" for="custom-info-color">Secondary</label>
        <input class="" name="theme_color" data-extra="info" type="color" id="custom-info-color" value="#08B1BA" data-setting="color">
    </div>
</div>

    After

    <div class="collapse" id="custom-color">
    <div class="form-group d-flex justify-content-between align-items-center">
        <label class="" for="custom-primary-color">Primary</label>
        <input class="" name="theme_color" data-extra="primary" type="color" id="custom-primary-color" value="#3a57e8" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
        <label class="" for="custom-secondary-color">Secondary</label>
        <input class="" name="theme_color" data-extra="secondary" type="color" id="custom-secondary-color" value="#8a92a6" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
        <label class="" for="custom-success-color">Success</label>
        <input class="" name="theme_color" data-extra="success" type="color" id="custom-success-color" value="#1aa053" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
        <label class="" for="custom-danger-color">Danger</label>
        <input class="" name="theme_color" data-extra="danger" type="color" id="custom-danger-color" value="#c03221" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
        <label class="" for="custom-warning-color">Warning</label>
        <input class="" name="theme_color" data-extra="warning" type="color" id="custom-warning-color" value="#f16a1b" data-setting="color">
    </div>
    <div class="form-group d-flex justify-content-between align-items-center">
        <label class="" for="custom-info-color">Info</label>
        <input class="" name="theme_color" data-extra="info" type="color" id="custom-info-color" value="#08B1BA" data-setting="color">
    </div>
</div>
  • Setting.Js
    Updated in public/js/setting/setting.js file

    • Before

    theme_scheme: {
    target: "body",
    choices: ["light", "dark", "auto"],
    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: "variable",
colors: {
    "--primary": "#3a57e8",
    "--info": "#08B1BA",
},
value: "theme-color-default",
},

    After

    theme_scheme: {
    target: "html",
    choices: ["light", "dark", "auto"],
    value: "light",
},
            
theme_color: {
    target: "html",
    choices: [
    "default",
    "color-1",
    "color-2",
    "color-3",
    ],
    type: "variable",
    colors: {},
    value: "default",
},

    Before

    IQSetting.prototype.theme_scheme = function (value) {
    if (typeof value !== typeof null) {
            this.__radioUpdate__("theme_scheme", value, () => {
            if (value == "auto") {
                if (matchMedia("(prefers-color-scheme: light)").matches) {
                    document.querySelector("body").classList.add("light");
                } else {
                    document.querySelector("body").classList.add("dark");
                }
            }
            setTimeout(() => {
                this.__updateThemeColor__("theme_color", null);
            }, 250);
        });
    }
};
         
IQSetting.prototype.theme_color = function (value) {
    if (typeof value !== typeof null) {
        if(value == 'custom') {
            this.__updateThemeColor__("theme_color");
        } else {
            this.__attributeUpdate__("theme_color", { prop: "data-bs-theme-color", value: value });
        }
    }
};

    After

    IQSetting.prototype.theme_scheme = function(value) {
    if (typeof value !== typeof null) {
        this.__attributeUpdate__(
        "theme_scheme",
        { prop: "data-bs-theme", value: value },
        function(key, val) {
            document.querySelector("html").setAttribute("data-bs-theme", value);
            if (value == "auto") {
            if (matchMedia("(prefers-color-scheme: light)").matches) {
                document.querySelector("html").setAttribute("data-bs-theme", "light");
            } else {
                document.querySelector("html").setAttribute("data-bs-theme", "dark");
            }
            }
        }
        );
    }
};
          
IQSetting.prototype.theme_font_size = function (value) {
    if (typeof value !== typeof null) {
      this.__radioUpdate__("theme_font_size", value);
    }
  };
Source & Credits Changelog