diff --git a/index.html b/index.html
index 3fe66012..99fc78aa 100644
--- a/index.html
+++ b/index.html
@@ -19,11 +19,15 @@
+
+
+ 
+
diff --git a/preload.js b/preload.js
new file mode 100644
index 00000000..096c1a00
--- /dev/null
+++ b/preload.js
@@ -0,0 +1 @@
+document.documentElement.style.setProperty('--Loading-Screen-Color',localStorage.getItem('LoadingScreenColor') || "#bbd6fd");
\ No newline at end of file
diff --git a/script.js b/script.js
index bc3d6993..d57b1d65 100644
--- a/script.js
+++ b/script.js
@@ -6,7 +6,6 @@
* If not, see .
*/
-
// Check if alert has already been shown
if (!localStorage.getItem('alertShown')) {
// Show the alert after 4 seconds
@@ -1026,6 +1025,8 @@ document.addEventListener("DOMContentLoaded", () => {
selectedRadioButton.checked = true;
}
}
+ // Remove Loading Screen When the DOM and the Theme has Loaded
+ document.getElementById('LoadingScreen').style.display = "none";
// it is necessary for some elements not to blink when the page is reloaded
setTimeout(() => {
document.documentElement.classList.add('theme-transition');
@@ -1517,6 +1518,7 @@ const applySelectedTheme = (colorValue) => {
if (faviconLink && iconPaths[colorValue]) {
faviconLink.href = iconPaths[colorValue];
}
+ ApplyLoadingColor();
};
// ----Color Picker || ColorPicker----
@@ -1588,6 +1590,7 @@ const applyCustomTheme = (color) => {
document.documentElement.style.setProperty('--whitishColor-blue', '#ffffff');
document.getElementById("rangColor").style.borderColor = color;
document.getElementById('dfChecked').checked = false;
+ ApplyLoadingColor();
};
// Load theme on page reload// Load theme on page reload
@@ -3223,3 +3226,10 @@ document.addEventListener("DOMContentLoaded", function () {
loadCheckboxState("fahrenheitCheckboxState", fahrenheitCheckbox);
loadShortcuts();
});
+
+//------------------------- LoadingScreen -----------------------//
+
+function ApplyLoadingColor(){
+ let LoadingScreenColor = getComputedStyle(document.body).getPropertyValue("background-color");
+ localStorage.setItem('LoadingScreenColor', LoadingScreenColor);
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 036c185f..e82439df 100644
--- a/style.css
+++ b/style.css
@@ -2600,3 +2600,15 @@ input:checked + .toggle:before {
.savebtn:active {
transform: scale(0.96);
}
+
+/* ---------------------- Loading Screen --------------------------- */
+#LoadingScreen {
+ background: var(--Loading-Screen-Color);
+ display: flex;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 99999;
+}
\ No newline at end of file