@@ -4,6 +4,9 @@ --fg_color: #fff;
   --main_color: #1f9b92;
   --sub_color: #00000000;
   --err_color: #DC143C;
+  
+  --main_bg: '/static/bg2.png';
+  --login_bg: '/static/bg.png';
 }
 
 * { scrollbar-color:var(--main_color) var(--sub_color); }
@@ -21,6 +24,7 @@ font-size: 16px;
   background: var(--bg_color);
   color: var(--fg_color);
   background: url('/static/bg2.png');
+  background: url(var(--main_bg));
   background-size: cover;
   background-position: top left;
   background-attachment: fixed;
@@ -28,6 +32,7 @@ }
 
 .login-body {
   background: url('/static/bg.png');
+  background: url(var(--login_bg));
   background-size: cover;
   background-position: center center;
   height: 100vh;

@@ -1,4 +1,6 @@ 
 const defaultTheme = [ "#000000cc", "#ffffffff", "#1f9b92ff", "#00000000", "#DC143Cff" ];
+const loginBgReader = new FileReader();
+const mainBgReader = new FileReader();
 
 const saveData = {
   theme: defaultTheme,
@@ -28,7 +30,7 @@ Math.min(Math.max(parseInt(v), 0), 255).toString(16)
   ).slice(-2);
 }
 
-function resetTheme(theme) {
+function resetTheme(theme, bg = false) {
   try{
     let bg_col = theme[0];
     let fg_col = theme[1];
@@ -58,6 +60,13 @@ $("sub_col_opacity").value = sub_opacity;
     $("err_col_input").value = err_col;
     $("err_col_opacity").value = err_opacity;
   } catch {}
+  
+  if (bg) {
+    localStorage.setItem("loginScreen", '/static/bg.png');
+    localStorage.setItem("mainScreen", '/static/bg2.png');
+    resetBG("login");
+    resetBG("main");
+  }
 }
 
 function setTheme() {
@@ -87,23 +96,65 @@ document.body.style.setProperty("--main_color", saveData.theme[2]);
     document.body.style.setProperty("--sub_color", saveData.theme[3]);
     document.body.style.setProperty("--err_color", saveData.theme[4]);
   }
+  
+  setBG("login");
+  setBG("main");
 }
 
 function setBG(screen) {
-  // get the input element based on screen
-  // create the reader
-  // save dataURL into localstorage
-  
-  // resetBG(screen)
+  let reader = null;
+  switch(screen) {
+    case "login":
+      reader = loginBgReader;
+      break;
+    case "main":
+      reader = mainBgReader;
+      break;
+  }
+  const imgPath = $(`${screen}_bg_upload`)?.files[0];
+  if (imgPath) {
+    reader.readAsDataURL(imgPath);
+  }
 }
 
 function resetBG(screen) {
   // set dataURL from localstorage to theme state
+  saveData[screen + "Screen"] = localStorage.getItem(screen + "Screen");
   // bind reader load -> body background set dataURL
+  let selector = null;
+  switch (screen) {
+    case "login":
+      selector = ".login-body";
+      break;
+    case "main":
+      selector = "body";
+      break;
+  }
+  const rules = document.styleSheets[0].cssRules;
+  let rule = null;
+  for (var i = 0; i < rules.length; i++) {
+    if (rules[i].selectorText == selector) {
+      rule = rules[i];
+      break;
+    }
+  }
+
+  rule.style.setProperty("background", `url('${saveData[screen + "Screen"]}`);
+  rule.style.setProperty("background-size", "cover");
+  rule.style.setProperty("background-attachment", "fixed");
 }
 
-loadStorage();
-resetTheme(saveData.theme);
-setTheme();
+function initializeReaders() {
+  loginBgReader.addEventListener("load", () => {
+     localStorage.setItem("loginScreen", loginBgReader.result);
+     resetBG("login");
+  }, false);
+    mainBgReader.addEventListener("load", () => {
+     localStorage.setItem("mainScreen", mainBgReader.result);
+     resetBG("main");
+  }, false);
+}
+
+initializeReaders();
 resetBG("login");
-resetBG("main");+resetBG("main");

@@ -0,0 +1,4 @@ 
+
+loadStorage();
+resetTheme(saveData.theme);
+setTheme();

@@ -28,7 +28,7 @@ <div class="upload-wrapper">
   <label for="main-upload">Set Main BG</label><br/>
   <input type="file" id="main_bg_upload" name="file"/>
   </div>
-        <button onclick="setTheme()">Apply</button><button onclick="resetTheme(defaultTheme)">Reset</button>
+        <button onclick="setTheme()">Apply</button><button onclick="resetTheme(defaultTheme, true)">Reset</button>
       </form>
     </details>
 

@@ -1,6 +1,6 @@ 
 {{define "footer"}}
   </body>
   
-    <script src="/static/theme.js" type="text/javascript"></script>
+    <script src="/static/theme2.js" type="text/javascript"></script>
 </html>
 {{end}}

@@ -8,6 +8,7 @@ <meta name='viewport' content='width=device-width,initial-scale=1'>
     <link rel='stylesheet' type='text/css' href='/static/style.css'>
     <link rel='shortcut icon' href='/static/favicon.png'>
     
+    <script src="/static/theme.js" type="text/javascript"></script>
     <title>Nirvash &mdash; CMS</title>
   </head>
   <body>