static/theme.js (raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
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; } } rule.style.setProperty("background", `url('${saveData[screen + "Screen"]}`); rule.style.setProperty("background-size", "cover"); rule.style.setProperty("background-attachment", "fixed"); } 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"); |