Looking for Vue, React, Angular, Laravel Version? Click here to Get 5 in 1 JS Bundle.
Upgrade Guide
Version 1.0.1 to Version 2.0.0
-
Updated Bootstrap to latest version 5.3.2
-
Removed the scss file and also the folder src/assets/scss/dark/_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/_variables.scss
-
Remove the Dark css link for the head
- removed in /src/templates/components/partials/head.hbs file
<link rel="stylesheet" href="../assets/css/dark.min.css?v=1.1.0"/> -
Updated the Default Layout file in scss/src/templates/layouts/default.hbs file
-
Updated the Custom color options in scss/src/templates/components/widgets/setting-offcanvas.hbs file
-
Setting.Js
Updated in /assets/js/iqonic-script/setting.js file
Before
<html lang="en" dir="ltr">After
<html lang="en" data-bs-theme="light" data-bs-theme-color="default" dir="ltr" >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>
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",
"color-4",
"color-5",
],
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);
}
};
};