nirvash/static/theme.js

const defaultTheme = [ "#000000cc", "#ffffffff", "#1f9b92ff", "#00000000", "#DC143Cff" ];
const loginBgReader = new FileReader();
const mainBgReader = new FileReader();

const saveData = {
  theme: defaultTheme,
  loginScreen: null,
  mainScreen: null
}

function $(id) {
  return document.getElementById(id);
}
function loadStorage() {
  savedTheme =  JSON.parse(localStorage.getItem("theme"));
  saveData.theme = savedTheme || defaultTheme;
}

function hexToBytes(hex) {
  let bytes = [];
  for (let c = 0; c < hex.length; c += 2) {
    bytes.push(parseInt(hex.substr(c, 2), 16));
  }
  return bytes;
}

function toByte(v) {
  return ('0' + 
    Math.min(Math.max(parseInt(v), 0), 255).toString(16)
  ).slice(-2);
}

function resetTheme(theme, bg = false) {
  try{
    let bg_col = theme[0];
    let fg_col = theme[1];
    let main_col = theme[2];
    let sub_col = theme[3];
    let err_col = theme[4];
  
    let fg_opacity = hexToBytes(fg_col.substr(7));
    fg_col = fg_col.substr(0,7);
    let bg_opacity = hexToBytes(bg_col.substr(7));
    bg_col = bg_col.substr(0,7);
    let main_opacity = hexToBytes(main_col.substr(7));
    main_col = main_col.substr(0,7);
    let sub_opacity = hexToBytes(sub_col.substr(7));
    sub_col = sub_col.substr(0,7);
    let err_opacity = hexToBytes(err_col.substr(7));
    err_col = err_col.substr(0,7);
  
    $("bg_col_input").value = bg_col;
    $("bg_col_opacity").value = bg_opacity;
    $("fg_col_input").value = fg_col;
    $("fg_col_opacity").value = fg_opacity;
    $("main_col_input").value = main_col;
    $("main_col_opacity").value = main_opacity;
    $("sub_col_input").value = sub_col;
    $("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() {
  try {
    let bg_col = $("bg_col_input").value
    let bg_opacity = toByte($("bg_col_opacity").value);
    let fg_col = $("fg_col_input").value;
    let fg_opacity = (toByte($("fg_col_opacity").value));
    let main_col = $("main_col_input").value;
    let main_opacity = (toByte($("main_col_opacity").value));
    let sub_col = $("sub_col_input").value;
    let sub_opacity = (toByte($("sub_col_opacity").value));
    let err_col = $("err_col_input").value;
    let err_opacity = (toByte($("err_col_opacity").value));
  
    saveData.theme[0] = bg_col + bg_opacity;
    saveData.theme[1] = fg_col + fg_opacity;
    saveData.theme[2] = main_col + main_opacity;
    saveData.theme[3] = sub_col + sub_opacity;
    saveData.theme[4] = err_col + err_opacity;
  
    localStorage.setItem("theme", JSON.stringify(saveData.theme));
  } catch {} finally {
    document.body.style.setProperty("--bg_color", saveData.theme[0]);
    document.body.style.setProperty("--fg_color", saveData.theme[1]);
    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) {
  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;
    }
  }

  const dataUrl = saveData[screen + "Screen"];
  if (dataUrl) {
    rule.style.setProperty("background", `url('${dataUrl}')`);
    rule.style.setProperty("background-size", "cover");
    rule.style.setProperty("background-attachment", "fixed");
    rule.style.setProperty("background-position", "center");
  }
}

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");