☰

Themes for Diep.io

Themes for diep.io is amazing tool for your style :)

  1. // ==UserScript==
  2. // @name         Themes for Diep.io
  3. // @version      2.1.2
  4. // @description  Themes for diep.io is amazing tool for your style :)
  5. // @author       @jaja.morgan
  6. // @match        https://diep.io/*
  7. // @grant        GM_addStyle
  8. // @license      MIT
  9. // @namespace    *://diep.io/
  10. // ==/UserScript==
  11.  
  12. let editing;
  13. let selected;
  14. let cache = {};
  15.  
  16. const modo = document.createElement("div");
  17. modo.id = "modo";
  18. modo.style.display = "none";
  19. modo.innerHTML = `
  20.   <div id="themes">
  21.     <div class="tool__header">
  22.       <h2 class="">Themes menu</h2>
  23.     </div>
  24.     <div class="themes__content"></div>
  25.     <div class="container-btns"><button class="green">Create theme</button>
  26.     <span>or</span>
  27.     <button class="purple">Import</button></div>
  28.   </div>
  29.  
  30.   <div id="dashboard">
  31.     <div class="tool__header">
  32.       <h2>Dashboard</h2>
  33.       <span></span>
  34.     </div>
  35.     <div class="dashboard__content"></div>
  36.     <div class="container-btns">
  37.       <button class="green">Save</button>
  38.       <button class="red">Close</button>
  39.   </div>
  40.   </div>
  41. `;
  42. document.body.append(modo);
  43.  
  44. const logo = document.createElement("span");
  45. logo.style =
  46.   "z-index:100;position: absolute; top:0; left: 75px; color: #ffffff69; font-size:15px";
  47. logo.innerText = "Themes for diep.io :)";
  48. document.body.append(logo);
  49.  
  50. const MENU_CONTENT = document.getElementsByClassName("themes__content")[0];
  51. const THEMES = document.getElementById("themes");
  52. const DASHBOARD = document.getElementById("dashboard");
  53. DASHBOARD.style.display = "none";
  54. DASHBOARD.setValues = (values) => {
  55.   [
  56.     ...document
  57.       .querySelector(".dashboard__content")
  58.       .querySelectorAll(".option__value *"),
  59.   ].map((el) => el.setValue(values));
  60. };
  61. DASHBOARD.getValues = () => {
  62.   return [
  63.     ...document
  64.       .querySelector(".dashboard__content")
  65.       .querySelectorAll(".option__value *"),
  66.   ].map((el) => el.getValue());
  67. };
  68. DASHBOARD.context = {
  69.   type: null,
  70.   theme: null,
  71. };
  72.  
  73. class ThemeBtn {
  74.   constructor(parentTheme, type, name, parent) {
  75.     this.el = document.createElement("button");
  76.     this.el.className = type;
  77.     this.parentTheme = parentTheme;
  78.  
  79.     if (type == "edit") {
  80.       this.el.innerText = "Edit";
  81.       this.el.onclick = () => {
  82.         if (editing) editing.classList.remove("editing");
  83.         editing = this.parentTheme.el;
  84.         editing.classList.add("editing");
  85.         callDashboard("edit", parentTheme);
  86.         cache = getUserData();
  87.       };
  88.     } else if (type == "export") {
  89.       this.el.innerText = "Export";
  90.       this.el.onclick = () => {
  91.         navigator.clipboard.writeText(
  92.           JSON.stringify({ [`${name}`]: getUserData()[`${name}`] })
  93.         );
  94.       };
  95.     } else {
  96.       this.el.innerText = "Delete";
  97.       this.el.onclick = () => {
  98.         if (confirm("Are you sure? The theme will be deleted.")) {
  99.           let db = getUserData();
  100.           delete db[`${name}`];
  101.           localStorage.setItem("users_themes", JSON.stringify(db));
  102.           parentTheme.el.remove();
  103.           cache = getUserData();
  104.         }
  105.       };
  106.     }
  107.     parent.append(this.el);
  108.   }
  109. }
  110. class Theme {
  111.   constructor(name, data) {
  112.     this.el = document.createElement("div");
  113.     this.el.className = "theme";
  114.     this.data = data;
  115.     this.name = name;
  116.  
  117.     this.label = document.createElement("div");
  118.     this.label.className = "theme__name";
  119.     this.label.innerText = name;
  120.  
  121.     this.label.onclick = () => {
  122.       if (selected) selected.classList.remove("activated");
  123.  
  124.       DASHBOARD.setValues(this.data);
  125.       selected = this.el;
  126.       localStorage.setItem("selected_theme", JSON.stringify(this.name));
  127.       selected.classList.add("activated");
  128.     };
  129.  
  130.     this.el.append(this.label);
  131.     let contBtn = document.createElement("div");
  132.     contBtn.className = "container-btns";
  133.     new ThemeBtn(this, "export", this.name, contBtn);
  134.     new ThemeBtn(this, "edit", this.name, contBtn);
  135.     new ThemeBtn(this, "delete", this.name, contBtn);
  136.  
  137.     this.el.append(contBtn);
  138.     MENU_CONTENT.append(this.el);
  139.     cache = getUserData();
  140.   }
  141.   editData(values) {
  142.     let db = getUserData();
  143.     db[`${this.name}`] = values;
  144.     localStorage.setItem("users_themes", JSON.stringify(db));
  145.     this.data = values;
  146.     cache = getUserData();
  147.   }
  148. }
  149.  
  150. class Input {
  151.   constructor(default_, cmd, isLast = false) {
  152.     this.default = default_;
  153.     this.cmd = cmd;
  154.     //this.cEl = document.createElement("div");
  155.     //this.vEl = document.createElement("div");
  156.     this.el = document.createElement("input");
  157.     this.isLast = isLast;
  158.   }
  159. }
  160.  
  161. class ColorInput extends Input {
  162.   constructor(default_, cmd, isLast) {
  163.     super(default_, cmd, isLast);
  164.     this.el.type = "color";
  165.     this.el.value = this.default;
  166.  
  167.     this.el.oninput = () => {
  168.       input.execute(`${this.cmd}${this.el.value.slice(1)}`);
  169.     };
  170.     this.el.getValue = () => {
  171.       return `${this.cmd}${this.el.value.slice(1)}`;
  172.     };
  173.     this.el.setValue = (values) => {
  174.       let found = false;
  175.       for (let value of values) {
  176.         if (value.includes(this.cmd)) {
  177.           found = true;
  178.           const RE = new RegExp(this.cmd);
  179.           const value_ = value.replace(RE, "");
  180.           this.el.value = "#" + value_;
  181.           break;
  182.         }
  183.       }
  184.       if (!found) this.el.value = this.default;
  185.       this.el.oninput();
  186.     };
  187.   }
  188. }
  189.  
  190. class CheckBoxInput extends Input {
  191.   constructor(default_, cmd, isLast) {
  192.     super(default_, cmd, isLast);
  193.     this.el.type = "checkbox";
  194.     this.el.checked = this.default;
  195.  
  196.     this.el.oninput = () => {
  197.       input.execute(`${this.cmd}${this.el.checked}`);
  198.     };
  199.     this.el.getValue = () => {
  200.       return `${this.cmd}${this.el.checked}`;
  201.     };
  202.     this.el.setValue = (values) => {
  203.       let found = false;
  204.       for (let value of values) {
  205.         if (value.includes(this.cmd)) {
  206.           found = true;
  207.           const RE = new RegExp(this.cmd);
  208.           const value_ = value.replace(RE, "");
  209.           if (value_ === "true") {
  210.             this.el.checked = true;
  211.           } else {
  212.             this.el.checked = false;
  213.           }
  214.           break;
  215.         }
  216.       }
  217.       if (!found) this.el.checked = this.default;
  218.       this.el.oninput();
  219.     };
  220.   }
  221. }
  222.  
  223. class RangeInput extends Input {
  224.   constructor(default_, cmd, step, min, max, isLast) {
  225.     super(default_, cmd, isLast);
  226.     this.el.type = "range";
  227.     this.el.value = this.default;
  228.     this.el.step = step;
  229.     this.el.min = min;
  230.     this.el.max = max;
  231.     this.el.addEventListener("mousedown", (event) => {
  232.       event.stopImmediatePropagation();
  233.     });
  234.  
  235.     this.el.oninput = () => {
  236.       input.execute(`${this.cmd}${this.el.value}`);
  237.       this.el.parentElement.parentElement
  238.         .querySelector(".option__label")
  239.         .onlabel(this.el.value);
  240.     };
  241.     this.el.getValue = () => {
  242.       return `${this.cmd}${this.el.value}`;
  243.     };
  244.     this.el.setValue = (values) => {
  245.       let found = false;
  246.       for (let value of values) {
  247.         if (value.includes(this.cmd)) {
  248.           found = true;
  249.           const RE = new RegExp(this.cmd);
  250.           this.el.value = value.replace(RE, "");
  251.           break;
  252.         }
  253.       }
  254.       if (!found) this.el.value = this.default;
  255.       this.el.oninput();
  256.     };
  257.   }
  258. }
  259.  
  260. function callDashboard(type, theme) {
  261.   DASHBOARD.style.display = "block";
  262.   DASHBOARD.context.type = type;
  263.   DASHBOARD.context.theme = theme;
  264.   DASHBOARD.setValues(theme.data);
  265.  
  266.   let header = DASHBOARD.querySelector("div span");
  267.   header.innerText = `editing "${theme.name}"`;
  268.  
  269.   console.log(DASHBOARD.context);
  270. }
  271. function saveTheme(type, theme) {
  272.   var db = getUserData();
  273.   var values = [];
  274.   var name = "";
  275.   if (!db) db = [];
  276.  
  277.   if (type == "create") {
  278.     name = prompt("Enter the name of this theme.");
  279.     if (!name) {
  280.       alert("ERR: Invalid volume!");
  281.       return false;
  282.     }
  283.     if (name.length > 25) {
  284.       alert("ERR: Invalid length name (must be 25-)!");
  285.       return false;
  286.     }
  287.  
  288.     for (let t in db)
  289.       if (t == name)
  290.         return alert("ERR: There is already a theme with the same name!");
  291.  
  292.     values = DASHBOARD.getValues();
  293.     db[`${name}`] = values;
  294.     localStorage.setItem("users_themes", JSON.stringify(db));
  295.  
  296.     new Theme(name, values);
  297.     hideEl(DASHBOARD);
  298.   } else if (type == "edit") {
  299.     if (confirm("Are you sure? The theme will be overwritten.")) {
  300.       values = DASHBOARD.getValues();
  301.       theme.editData(values);
  302.       if (editing) editing.classList.remove("editing");
  303.       hideEl(DASHBOARD);
  304.     }
  305.   }
  306.   backToSTheme();
  307.   cache = getUserData();
  308. }
  309.  
  310. function hideEl(el) {
  311.   if (el.style.display != "none") {
  312.     el.style.display = "none";
  313.   } else {
  314.     el.style.display = "";
  315.   }
  316. }
  317. function setDrag(el, el_child, lsName) {
  318.   var newPosX = 0,
  319.     newPosY = 0,
  320.     MousePosX = 0,
  321.     MousePosY = 0;
  322.   if (el_child) {
  323.     el_child.forEach((e) => e.addEventListener("mousedown", MouseDown));
  324.   } else el.addEventListener("mousedown", MouseDown);
  325.  
  326.   function MouseDown(mouseDown) {
  327.     MousePosX = mouseDown.pageX;
  328.     MousePosY = mouseDown.pageY;
  329.  
  330.     el.classList.add("dragableging");
  331.     document.addEventListener("mousemove", elementMove);
  332.     document.addEventListener("mouseup", stopElementMove);
  333.   }
  334.  
  335.   function elementMove(mouseMove) {
  336.     newPosX = MousePosX - mouseMove.pageX;
  337.     newPosY = MousePosY - mouseMove.pageY;
  338.     MousePosX = mouseMove.pageX;
  339.     MousePosY = mouseMove.pageY;
  340.  
  341.     el.style.top = el.offsetTop - newPosY + "px";
  342.     el.style.left = el.offsetLeft - newPosX + "px";
  343.   }
  344.  
  345.   function stopElementMove() {
  346.     localStorage.setItem(
  347.       lsName,
  348.       JSON.stringify({
  349.         x: el.offsetLeft - newPosX + "px",
  350.         y: el.offsetTop - newPosY + "px",
  351.       })
  352.     );
  353.     el.classList.remove("dragableging");
  354.  
  355.     document.removeEventListener("mousemove", elementMove);
  356.     document.removeEventListener("mouseup", stopElementMove);
  357.   }
  358. }
  359. function importJSON(text) {
  360.   let data;
  361.   let uDb = getUserData();
  362.  
  363.   try {
  364.     console.log(text);
  365.     data = JSON.parse(text);
  366.  
  367.     for (let theme in data) {
  368.       if (theme.length > 25) new Error("Incorrect name.");
  369.       for (let el of [...THEMES.getElementsByClassName("theme__name")]) {
  370.         if (el.innerText === theme) {
  371.           if (confirm(`${theme} will be overwrriten, are you sure?`)) {
  372.             el.parentElement.remove();
  373.           } else return;
  374.         }
  375.       }
  376.  
  377.       new Theme(theme, data[`${theme}`]);
  378.       uDb[`${theme}`] = data[`${theme}`];
  379.     }
  380.   } catch (err) {
  381.     return alert("Something went wrong...");
  382.   }
  383.   localStorage.setItem("users_themes", JSON.stringify(uDb));
  384. }
  385.  
  386. function init() {
  387.   if (!JSON.parse(localStorage.getItem("cho"))) {
  388.     alert("Press 'r' to show or hide menu in game.");
  389.     setTimeout(() => alert("Please dont forget to send feedback :v"), 30000);
  390.     localStorage.setItem("cho", "1");
  391.     localStorage.setItem(
  392.       "users_themes",
  393.       JSON.stringify({
  394.         classic: [],
  395.         dark: [
  396.           "ren_border_color 0x858585",
  397.           "ren_grid_color 0xffffff",
  398.           "ren_background_color 0x101010",
  399.         ],
  400.         arras: [
  401.           "ren_score_bar_fill_color 0x8abc3f",
  402.           "ren_xp_bar_fill_color 0xefc74b",
  403.           "net_replace_color 0 0x484848",
  404.           "net_replace_color 1 0xa7a7af",
  405.           "net_replace_color 2 0x3ca4cb",
  406.           "net_replace_color 3 0x3ca4cb",
  407.           "net_replace_color 4 0xe03e41",
  408.           "net_replace_color 5 0xcc669c",
  409.           "net_replace_color 6 0x8abc3f",
  410.           "net_replace_color 8 0xefc74b",
  411.           "net_replace_color 9 0xe7896d",
  412.           "net_replace_color 10 0x8d6adf",
  413.           "net_replace_color 11 0xef99c3",
  414.           "net_replace_color 12 0xfdf380",
  415.           "net_replace_color 14 0xa7a7af",
  416.           "net_replace_color 15 0xe03e41",
  417.           "net_replace_color 17 0x726f6f",
  418.         ],
  419.         neon: [
  420.           "ren_stroke_soft_color_intensity -100",
  421.           "ren_solid_background true",
  422.           "ren_stroke_soft_color true",
  423.           "ren_background_color 0x000000",
  424.           "ren_border_color 0xFFFFFF",
  425.           "ren_border_alpha 100",
  426.           "net_replace_color 0 0xFFFFFF",
  427.           "net_replace_color 1 0x010101",
  428.           "net_replace_color 2 0x000102",
  429.           "net_replace_color 3 0x000102",
  430.           "net_replace_color 4 0x020000",
  431.           "net_replace_color 5 0x020002",
  432.           "net_replace_color 6 0x000200",
  433.           "net_replace_color 7 0x000100",
  434.           "net_replace_color 8 0x010101",
  435.           "net_replace_color 9 0x010101",
  436.           "net_replace_color 10 0x010101",
  437.           "net_replace_color 11 0x0e0e0e",
  438.           "net_replace_color 12 0x020200",
  439.           "net_replace_color 13 0x010101",
  440.           "net_replace_color 14 0x010101",
  441.           "net_replace_color 15 0x020000",
  442.           "net_replace_color 16 0x010200",
  443.           "net_replace_color 17 0x000202",
  444.         ],
  445.       })
  446.     );
  447.   }
  448.   window.addEventListener("keydown", (event) => {
  449.     if (["r", "R", "к", "К"].includes(event.key)) {
  450.       hideEl(modo);
  451.     }
  452.   });
  453.   document.getElementsByClassName("green")[0].onclick = () => {
  454.     callDashboard("create", { name: "new theme", data: [] });
  455.   };
  456.   document.getElementsByClassName("green")[1].onclick = () => {
  457.     saveTheme(DASHBOARD.context.type, DASHBOARD.context.theme);
  458.   };
  459.   document.getElementsByClassName("purple")[0].onclick = () => {
  460.     importJSON(prompt("Please paste here copied theme."));
  461.   };
  462.   document.getElementsByClassName("red")[0].onclick = () => {
  463.     if (confirm("Are you sure? The changes are unsaved!")) {
  464.       hideEl(DASHBOARD);
  465.       backToSTheme();
  466.       if (editing) editing.classList.remove("editing");
  467.       let header = DASHBOARD.querySelector("div span");
  468.       header.innerText = ``;
  469.     }
  470.   };
  471.  
  472.   setDrag(
  473.     document.querySelector("#dashboard"),
  474.     [
  475.       document.querySelector("#dashboard .tool__header"),
  476.       document.querySelector("#dashboard > .container-btns"),
  477.     ],
  478.     "dashboardPos"
  479.   );
  480.   setDrag(
  481.     document.querySelector("#themes"),
  482.     [
  483.       document.querySelector("#themes .tool__header"),
  484.       document.querySelector("#themes > .container-btns"),
  485.     ],
  486.     "themesPos"
  487.   );
  488.  
  489.   function addSection(header, options) {
  490.     const SECTION = document.createElement("div");
  491.     SECTION.className = "content__section";
  492.  
  493.     SECTION.append(header, options);
  494.     document.getElementsByClassName("dashboard__content")[0].append(SECTION);
  495.   }
  496.  
  497.   function createHeader(text) {
  498.     const HEADER = document.createElement("div");
  499.     HEADER.className = "section__header";
  500.     HEADER.innerText = text;
  501.  
  502.     HEADER.onclick = function () {
  503.       const OPTIONS = HEADER.parentElement.querySelector(".section__options");
  504.       if (OPTIONS) {
  505.         if (OPTIONS.style.display != "none") {
  506.           HEADER.classList.add("hidden");
  507.           OPTIONS.style.display = "none";
  508.         } else {
  509.           HEADER.classList.remove("hidden");
  510.           OPTIONS.style.display = "";
  511.         }
  512.       }
  513.     };
  514.     return HEADER;
  515.   }
  516.  
  517.   function createOption(text, html, isLast = false) {
  518.     const OPTION = document.createElement("div");
  519.     OPTION.className = "section__option";
  520.  
  521.     const OPTION_LABEL = document.createElement("span");
  522.     OPTION_LABEL.className = "option__label";
  523.     OPTION_LABEL.innerText = text;
  524.     OPTION_LABEL.onlabel = (value) => {
  525.       OPTION_LABEL.innerText = `${text}: ${value}`;
  526.     };
  527.  
  528.     const OPTION_VALUE = document.createElement("div");
  529.     OPTION_VALUE.className = "option__value";
  530.     OPTION_VALUE.append(html);
  531.  
  532.     OPTION.append(OPTION_LABEL, OPTION_VALUE);
  533.  
  534.     if (isLast) {
  535.       OPTION.style.marginBottom = "10px";
  536.     }
  537.  
  538.     return OPTION;
  539.   }
  540.  
  541.   const DB_OBJECT = {
  542.     "Global colors": {
  543.       "Map background": new ColorInput("#cdcdcd", "ren_background_color 0x"),
  544.       "Map border": new ColorInput("#000000", "ren_border_color 0x"),
  545.       "Map border alpha": new RangeInput(
  546.         0.1,
  547.         "ren_border_color_alpha ",
  548.         0.01,
  549.         0,
  550.         1
  551.       ),
  552.       "Map grid": new ColorInput("#000000", "ren_grid_color 0x"),
  553.       "Map grid alpha": new RangeInput(
  554.         0.1,
  555.         "ren_grid_base_alpha ",
  556.         0.01,
  557.         0,
  558.         1,
  559.         true
  560.       ),
  561.       "Minimap background": new ColorInput(
  562.         "#cdcdcd",
  563.         "ren_minimap_background_color 0x"
  564.       ),
  565.       "Minimap border": new ColorInput(
  566.         "#555555",
  567.         "ren_minimap_border_color 0x",
  568.         true
  569.       ),
  570.       "Soft colors": new CheckBoxInput(true, "ren_stroke_soft_color "),
  571.       "Soft stroke intensity": new RangeInput(
  572.         0.25,
  573.         "ren_stroke_soft_color_intensity ",
  574.         0.05,
  575.         null,
  576.         1,
  577.         true
  578.       ),
  579.  
  580.       Squares: new ColorInput("#ffe869", "net_replace_color 8 0x"),
  581.       Triangles: new ColorInput("#fc7677", "net_replace_color 9 0x"),
  582.       Pentagons: new ColorInput("#768dfc", "net_replace_color 10 0x"),
  583.       "Shiny poligons": new ColorInput(
  584.         "#89ff69",
  585.         "net_replace_color 7 0x",
  586.         true
  587.       ),
  588.       Crashers: new ColorInput("#ff77dc", "net_replace_color 11 0x"),
  589.       "Neutral team": new ColorInput("#ffe869", "net_replace_color 12 0x"),
  590.       "Fallen Bosses": new ColorInput(
  591.         "#c0c0c0",
  592.         "net_replace_color 17 0x",
  593.         true
  594.       ),
  595.       "Health bar": new ColorInput("#85e37d", "ren_health_fill_color 0x"),
  596.       "Health bar background": new ColorInput(
  597.         "#555555",
  598.         "ren_health_background_color 0x"
  599.       ),
  600.       "EXP bar": new ColorInput("#ffde43", "ren_xp_bar_fill_color 0x"),
  601.       "Score bar": new ColorInput("#43ff91", "ren_score_bar_fill_color 0x"),
  602.       "EXP/Score/Scoreboard backgrounds": new ColorInput(
  603.         "#000000",
  604.         "ren_bar_background_color 0x",
  605.         true
  606.       ),
  607.       "Barrels & etc": new ColorInput("#999999", "net_replace_color 1 0x"),
  608.       "Smasher & dominator bases": new ColorInput(
  609.         "#555555",
  610.         "net_replace_color 0 0x"
  611.       ),
  612.     },
  613.     "TDM colors": {
  614.       "Blue team": new ColorInput("#00b1de", "net_replace_color 3 0x"),
  615.       "Red Team": new ColorInput("#f14e54", "net_replace_color 4 0x"),
  616.       "Purple team": new ColorInput("#be7ff5", "net_replace_color 5 0x"),
  617.       "Green team": new ColorInput("#00f46c", "net_replace_color 6 0x"),
  618.     },
  619.     "FFA colors": {
  620.       "Your body": new ColorInput("#00b1de", "net_replace_color 2 0x"),
  621.       "Enemies' bodies": new ColorInput("#f14e56", "net_replace_color 15 0x"),
  622.       "Summoned squares": new ColorInput("#fbc477", "net_replace_color 16 0x"),
  623.       "Maze walls": new ColorInput("#bbbbbb", "net_replace_color 14 0x"),
  624.       "Scoreboard bar": new ColorInput("#44ffa0", "net_replace_color 13 0x"),
  625.     },
  626.     Other: {
  627.       FPS: new CheckBoxInput(false, "ren_fps "),
  628.       "Players' names": new CheckBoxInput(true, "ren_names "),
  629.       "Health bar": new CheckBoxInput(true, "ren_health_bars "),
  630.       "Show health bar values": new CheckBoxInput(
  631.         false,
  632.         "ren_raw_health_values "
  633.       ),
  634.       "Scoreboar names": new CheckBoxInput(true, "ren_scoreboard_names "),
  635.       Scoreboard: new CheckBoxInput(true, "ren_scoreboard "),
  636.       "Minimap viewport": new CheckBoxInput(false, "ren_minimap_viewport "),
  637.       UI: new CheckBoxInput(true, "ren_ui "),
  638.       //"UI scale": new RangeInput(1, "ren_ui_scale ", 0.01, 0, null, true),
  639.  
  640.       "Pattern grid": new CheckBoxInput(true, "ren_pattern_grid "),
  641.       "Debug collisions": new CheckBoxInput(false, "ren_debug_collisions "),
  642.     },
  643.   };
  644.  
  645.   for (let ctg in DB_OBJECT) {
  646.     const HEADER = createHeader(ctg);
  647.     const OPTIONS = document.createElement("div");
  648.     OPTIONS.className = "section__options";
  649.  
  650.     for (let opt in DB_OBJECT[ctg]) {
  651.       const OPT_OBJECT = DB_OBJECT[ctg][opt];
  652.       OPTIONS.append(createOption(opt, OPT_OBJECT.el, OPT_OBJECT.isLast));
  653.     }
  654.  
  655.     addSection(HEADER, OPTIONS);
  656.   }
  657.  
  658.   let uDb = getUserData();
  659.   const selected = JSON.parse(localStorage.getItem("selected_theme"));
  660.   for (let t in uDb) {
  661.     let theme = uDb[`${t}`];
  662.     let sTheme = new Theme(t, theme);
  663.     if (!!selected) {
  664.       if (sTheme.name == selected) {
  665.         sTheme.label.onclick();
  666.         DASHBOARD.setValues(cache[`${selected}`]);
  667.       }
  668.     }
  669.   }
  670.  
  671.   const dashboardPos = JSON.parse(localStorage.getItem("dashboardPos"));
  672.   const themesPos = JSON.parse(localStorage.getItem("themesPos"));
  673.   if (!!dashboardPos) {
  674.     DASHBOARD.style.left = dashboardPos.x;
  675.     DASHBOARD.style.top = dashboardPos.y;
  676.   }
  677.   if (!!themesPos) {
  678.     THEMES.style.left = themesPos.x;
  679.     THEMES.style.top = themesPos.y;
  680.   }
  681. }
  682.  
  683. function backToSTheme() {
  684.   DASHBOARD.setValues(
  685.     cache[`${JSON.parse(localStorage.getItem("selected_theme"))}`]
  686.   );
  687. }
  688. function getUserData() {
  689.   return JSON.parse(localStorage.getItem("users_themes"));
  690. }
  691.  
  692. const checking = setInterval(() => {
  693.   try {
  694.     if (input) {
  695.       clearInterval(checking);
  696.       init();
  697.     }
  698.   } catch (err) {}
  699. }, 10);
  700.  
  701. GM_addStyle(`* {
  702.   outline: none;
  703.   margin: 0;
  704. }
  705. #modo {
  706.   font-family: "Montserrat", sans-serif !important;
  707.   font-size: 16px;
  708.   position: relative;
  709.   z-index: 777;
  710. }
  711. #modo #themes,
  712. #modo #dashboard {
  713.   outline: none;
  714.   padding: 10px 15px;
  715.   border-radius: 6px;
  716.   position: absolute;
  717.  
  718.   border: 2px #00ffff solid;
  719.   box-shadow: 4px 3px 20px 1px black;
  720.   background: #25282b;
  721.   opacity: 0.9;
  722.  
  723.   color: white;
  724. }
  725. #modo .tool__header {
  726.   cursor: move !important;
  727.   display: flex;
  728.   justify-content: center;
  729.   position: relative;
  730.   margin-bottom: 20px;
  731.   text-align: center;
  732.   font-weight: bold;
  733. }
  734. .tool__header h2 {
  735.   font-size: 250%;
  736. }
  737. .tool__header span {
  738.   display: inline-block;
  739.   font-size: 75%;
  740.   bottom: -15px;
  741.   position: absolute;
  742. }
  743. /*
  744. *
  745. * THEMES MENU
  746. *
  747. */
  748. #themes {
  749.   top: 25px;
  750.   left: 10px;
  751.   overflow-y: auto;
  752.   overflow-x: hidden;
  753.   max-width: 700px;
  754.   padding: 150px 0px;
  755.   border: 2px solid aqua;
  756. }
  757.  
  758. .themes__content {
  759.   margin: 20px 0;
  760.   width: 100%;
  761.   max-height: 200px;
  762.   overflow-y: auto;
  763.   padding-right: 10px;
  764. }
  765. .themes__content::-webkit-scrollbar {
  766.   width: 7.5px;
  767. }
  768. .themes__content::-webkit-scrollbar-track {
  769.   background-color: aqua;
  770.   border-radius: 5px;
  771. }
  772. .themes__content::-webkit-scrollbar-thumb {
  773.   background-color: #070707;
  774.   border-radius: 3px;
  775. }
  776. .theme {
  777.   position: relative;
  778.   box-sizing: border-box;
  779.   display: flex;
  780.   justify-content: space-between;
  781.   align-items: center;
  782.   padding: 0px 10px;
  783. }
  784. .theme .theme__name {
  785.   cursor: pointer;
  786.   word-wrap: break-word;
  787.   word-break: normal;
  788.   padding: 10px 0;
  789.   width: 150px;
  790. }
  791.  
  792. .theme.editing,
  793. .theme.editing.activated {
  794.   background-color: rgba(255, 166, 0, 0.5);
  795. }
  796. .theme.activated {
  797.   background-color: rgba(0, 255, 0, 0.53);
  798. }
  799.  
  800. .theme:hover:not(.activated, .editing) {
  801.   transition-duration: 0.25s;
  802.   background-color: rgba(255, 255, 255, 0.1);
  803. }
  804. .theme button {
  805.   padding: 0px 10px;
  806.   font-weight: bold;
  807.   border: none;
  808.   color: white;
  809.   height: 25px;
  810.   cursor: pointer;
  811. }
  812. .theme button:hover {
  813.   filter: brightness(80%);
  814. }
  815. button.export {
  816.   margin-right: 10px;
  817.   background: purple;
  818. }
  819. button.edit {
  820.   margin-right: 10px;
  821.   background: rgb(240, 204, 0);
  822. }
  823. button.delete {
  824.   background: red;
  825. }
  826. .container-btns {
  827.   text-align: center;
  828.   display: flex;
  829.   justify-content: space-around;
  830.   align-items: center;
  831. }
  832. #themes > .container-btns {
  833.   cursor: move;
  834.   padding: 0 25px;
  835. }
  836. #dashboard > .container-btns {
  837.   cursor: move;
  838. }
  839. .container-btns .green {
  840.   padding: 10px 15px;
  841.   cursor: pointer;
  842.   font-size: 105%;
  843.   outline: none;
  844.   font-weight: bold;
  845.   background: transparent;
  846.   border: 1px solid rgb(0, 237, 0);
  847.   color: rgb(0, 237, 0);
  848.   transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  849. }
  850. .container-btns .green:hover {
  851.   color: #070707;
  852.   background: rgb(0, 237, 0);
  853.   transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  854. }
  855. .container-btns .purple {
  856.   padding: 10px 25px;
  857.   cursor: pointer;
  858.   font-size: 105%;
  859.   outline: none;
  860.   font-weight: bold;
  861.   background: transparent;
  862.   border: 1px solid purple;
  863.   color: purple;
  864.   transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  865. }
  866. .container-btns .purple:hover {
  867.   color: #070707;
  868.   background: purple;
  869.   transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  870. }
  871. .container-btns .red {
  872.   padding: 10px 25px;
  873.   cursor: pointer;
  874.   font-size: 105%;
  875.   outline: none;
  876.   font-weight: bold;
  877.   background: transparent;
  878.   border: 1px solid rgb(237, 0, 0);
  879.   color: rgb(237, 0, 0);
  880.   transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  881. }
  882. .container-btns .red:hover {
  883.   color: #070707;
  884.   background: rgb(237, 0, 0);
  885.   transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  886. }
  887. /*
  888. *
  889. * DASHBOARD
  890. *
  891. */
  892. #dashboard {
  893.   top: 25px;
  894.   right: 25px;
  895.   width: 444px;
  896.   font-size: 20px;
  897. }
  898.  
  899. #dashboard * {
  900.   font-weight: 600;
  901. }
  902.  
  903. #dashboard input {
  904.   outline: none;
  905.   border: none;
  906.   margin: 0;
  907.   padding: 0;
  908.   cursor: pointer;
  909. }
  910.  
  911. #dashboard input[type="color"],
  912. #dashboard input[type="checkbox"] {
  913.   background: rgba(0, 0, 0, 0);
  914. }
  915. #dashboard ::-webkit-color-swatch {
  916.   border-radius: 50%;
  917. }
  918. #dashboard input[type="checkbox"] {
  919.   margin-top: 3px;
  920. }
  921.  
  922. #dashboard input[type="number"] {
  923.   text-align: center;
  924.   width: 75px;
  925.   height: 10px;
  926.   border: rgba(0, 0, 0, 0) 2px solid;
  927.   color: white;
  928.   background: black;
  929.   padding: 3px 0px 3px 10px;
  930.   border-radius: 25px;
  931.   transition: border-color 0.3s;
  932. }
  933.  
  934. #dashboard input[type="number"]:hover,
  935. #dashboard input[type="number"]:focus {
  936.   border: #00ffffbf 2px solid;
  937. }
  938.  
  939. #dashboard input::-webkit-color-swatch-wrapper {
  940.   margin-top: 2px;
  941.   outline: none;
  942.   padding: 0;
  943. }
  944. .dashboard__content {
  945.   max-height: 500px;
  946.   margin-bottom: 15px;
  947.   overflow-y: auto;
  948.   overflow-x: hidden;
  949. }
  950. .dashboard__content::-webkit-scrollbar {
  951.   width: 7.5px;
  952. }
  953.  
  954. .dashboard__content::-webkit-scrollbar-track {
  955.   background: #00ffff;
  956.   border-radius: 5px;
  957. }
  958. .dashboard__content::-webkit-scrollbar-thumb {
  959.   background: #070707;
  960.   border-radius: 3px;
  961. }
  962.  
  963. .content__section {
  964.   margin: 5px 5px 10px 5px;
  965. }
  966. .section__options {
  967.   margin-left: 20px;
  968.   font-size: 75%;
  969. }
  970. .section__header {
  971.   position: relative;
  972.   cursor: pointer;
  973.   user-select: none;
  974.   font-size: 110%;
  975.   display: inline-block;
  976.   margin-left: 25px;
  977.   margin-bottom: 5px;
  978.   font-weight: bold;
  979. }
  980. .section__header::before {
  981.   left: -20px;
  982.   position: absolute;
  983.   content: ">";
  984.   transform: rotate(90deg);
  985. }
  986. .section__header.hidden::before {
  987.   content: ">";
  988.   transform: rotate(0deg);
  989. }
  990. .section__option {
  991.   height: 25px;
  992.   width: 300px;
  993.   padding: 5px 300px 0px 15px;
  994.   border-left: 3px #255cd8 solid;
  995.   transition: 0.2s;
  996. }
  997. .section__option span {
  998.   margin-right: 5px;
  999. }
  1000.  
  1001. .section__option input[type="color"] {
  1002.   width: 15px;
  1003.   height: 15px;
  1004.   border: none;
  1005.   padding: 0;
  1006. }
  1007. .section__option input[type="range"] {
  1008.   width: 100px;
  1009. }
  1010.  
  1011. .section__option:hover {
  1012.   background: #ffffff12;
  1013. }
  1014.  
  1015. .section__option:focus-within {
  1016.   background: #ffffff26;
  1017.   border-left: 3px orange solid;
  1018. }
  1019. .option__value {
  1020.   float: right;
  1021.   display: inline-block;
  1022. }
  1023. .option__label {
  1024.   user-select: none;
  1025.   display: inline-block;
  1026. }
  1027.  
  1028. #dashboard .ct {
  1029.   padding: 10px 100px;
  1030. }
  1031.  
  1032. .header__btn {
  1033.   outline: none;
  1034.   border: none;
  1035.  
  1036.   padding: 10px 20px;
  1037.   cursor: pointer;
  1038.   color: white;
  1039.  
  1040.   font-weight: bold;
  1041.  
  1042.   transition-property: background-color;
  1043.   transition-duration: 0.3s;
  1044. }
  1045.  
  1046. .header__btn:hover {
  1047.   background-color: rgba(0, 0, 0, 0.33) !important;
  1048. }
  1049.  
  1050. #db_switcher::after,
  1051. #db_switcher::before {
  1052.   content: " - ";
  1053. }
  1054. #db_switcher.hidden::after,
  1055. #db_switcher.hidden::before {
  1056.   content: " + ";
  1057. }
  1058. `);