Greasy Fork is available in English.

Themes for Diep.io

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

// ==UserScript==
// @name         Themes for Diep.io
// @version      2.0.1
// @description  "Themes for diep.io" is amazing tool for your style :)
// @author       @jaja.morgan
// @match        https://diep.io/*
// @grant        GM_addStyle
// @license      MIT
// @namespace *://diep.io/
// ==/UserScript==

GM_addStyle(`* {
  outline: none;
  margin: 0;
}
#modo {
  font-family: "Montserrat", sans-serif !important;
  font-size: 16px;
}
#modo #themes,
#modo #dashboard {
  outline: none;
  padding: 10px 15px;
  border-radius: 6px;
  position: absolute;

  border: 2px #00ffff solid;
  box-shadow: 4px 3px 20px 1px black;
  background: #25282b;
  opacity: 0.9;

  color: white;
}
#modo .tool__header {
  cursor: move !important;
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}
.tool__header h2 {
  font-size: 250%;
}
.tool__header span {
  display: inline-block;
  font-size: 75%;
  bottom: -15px;
  position: absolute;
}

#themes {
  top: 25px;
  left: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 700px;
  padding: 150px 0px;
  border: 2px solid aqua;
}

.themes__content {
  margin: 20px 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 10px;
}
.themes__content::-webkit-scrollbar {
  width: 7.5px;
}
.themes__content::-webkit-scrollbar-track {
  background-color: aqua;
  border-radius: 5px;
}
.themes__content::-webkit-scrollbar-thumb {
  background-color: #070707;
  border-radius: 3px;
}
.theme {
  position: relative;
  box-sizing: border-box;
  display: flex;
  gap: 25px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  cursor: pointer;
}
.theme__name {
  word-wrap: break-word;
  word-break: normal;
  padding: 10px 0;
}

.theme.editing,
.theme.editing.activated {
  background-color: rgba(255, 166, 0, 0.5);
}
.theme.activated {
  background-color: rgba(0, 255, 0, 0.53);
}

.theme:hover:not(.activated, .editing) {
  transition-duration: 0.25s;
  background-color: rgba(255, 255, 255, 0.1);
}
.theme button {
  font-weight: bold;
  border: none;
  color: white;
  height: 25px;
  cursor: pointer;
}
.theme button:hover {
  filter: brightness(80%);
}
button.edit {
  margin-right: 25px;
  background: rgb(240, 204, 0);
}
button.delete {
  background: red;
}
.container-btns {
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.container-btns .green {
  padding: 10px 25px;
  cursor: pointer;
  font-size: 105%;
  outline: none;
  font-weight: bold;
  background: transparent;
  border: 1px solid rgb(0, 237, 0);
  color: rgb(0, 237, 0);
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container-btns .green:hover {
  color: #070707;
  background: rgb(0, 237, 0);
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container-btns .red {
  padding: 10px 25px;
  cursor: pointer;
  font-size: 105%;
  outline: none;
  font-weight: bold;
  background: transparent;
  border: 1px solid rgb(237, 0, 0);
  color: rgb(237, 0, 0);
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container-btns .red:hover {
  color: #070707;
  background: rgb(237, 0, 0);
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
/*
*
*
*/
#dashboard {
  right: 15%;
  top 25px;
  width: 444px;
  font-size: 20px;
}

#dashboard * {
  font-weight: 600;
}

#dashboard input {
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

#dashboard input[type="color"],
#dashboard input[type="checkbox"] {
  background: rgba(0, 0, 0, 0);
}
#dashboard ::-webkit-color-swatch {
  border-radius: 50%;
}
#dashboard input[type="checkbox"] {
  margin-top: 3px;
}

#dashboard input[type="number"] {
  text-align: center;
  width: 75px;
  height: 10px;
  border: rgba(0, 0, 0, 0) 2px solid;
  color: white;
  background: black;
  padding: 3px 0px 3px 10px;
  border-radius: 25px;
  transition: border-color 0.3s;
}

#dashboard input[type="number"]:hover,
#dashboard input[type="number"]:focus {
  border: #00ffffbf 2px solid;
}

#dashboard input::-webkit-color-swatch-wrapper {
  margin-top: 2px;
  outline: none;
  padding: 0;
}
.dashboard__content {
  max-height: 500px;
  margin-bottom: 15px;
  overflow-y: auto;
  overflow-x: hidden;
}
.dashboard__content::-webkit-scrollbar {
  width: 7.5px;
}

.dashboard__content::-webkit-scrollbar-track {
  background: #00ffff;
  border-radius: 5px;
}
.dashboard__content::-webkit-scrollbar-thumb {
  background: #070707;
  border-radius: 3px;
}

.content__section {
  margin: 5px 5px 10px 5px;
}
.section__options {
  margin-left: 20px;
  font-size: 75%;
}
.section__header {
  position: relative;
  cursor: pointer;
  user-select: none;
  font-size: 110%;
  display: inline-block;
  margin-left: 25px;
  margin-bottom: 5px;
  font-weight: bold;
}
.section__header::before {
  left: -20px;
  position: absolute;
  content: ">";
  transform: rotate(90deg);
}
.section__header.hidden::before {
  content: ">";
  transform: rotate(0deg);
}
.section__option {
  height: 25px;
  width: 300px;
  padding: 5px 300px 0px 15px;
  border-left: 3px #255cd8 solid;
  transition: 0.2s;
}
.section__option span {
  margin-right: 5px;
}

.section__option input[type="color"] {
  width: 15px;
  height: 15px;
  border: none;
  padding: 0;
}

.section__option:hover {
  background: #ffffff12;
}

.section__option:focus-within {
  background: #ffffff26;
  border-left: 3px orange solid;
}
.option__value {
  float: right;
  display: inline-block;
}
.option__label {
  user-select: none;
  display: inline-block;
}

#dashboard .ct {
  padding: 10px 100px;
}

.header__btn {
  outline: none;
  border: none;

  padding: 10px 20px;
  cursor: pointer;
  color: white;

  font-weight: bold;

  transition-property: background-color;
  transition-duration: 0.3s;
}

.header__btn:hover {
  background-color: rgba(0, 0, 0, 0.33) !important;
}

#db_switcher::after,
#db_switcher::before {
  content: " - ";
}
#db_switcher.hidden::after,
#db_switcher.hidden::before {
  content: " + ";
}
`);

const modo = document.createElement("div");
modo.id = "modo";
modo.style.display = "none";
modo.innerHTML = `
    <div id="themes">
    <div class="tool__header">
  <h2 class="">Themes menu</h2>
  </div>
  <div class="themes__content"></div>
  <div class="container-btns"><button class="green">Create theme</button></div>
</div>

<div id="dashboard">
  <div class="tool__header">
    <h2>Dashboard</h2>
    <span></span>
  </div>
  <div class="dashboard__content"></div>
  <div class="container-btns">
    <button class="green">Save</button>
    <button class="red">Close</button>
  </div>
</div>`;
document.body.append(modo);
let editing;
let selected;

let cache = {};
if (!JSON.parse(localStorage.getItem("zaxod"))) {
alert("Press 'r' to show or hide menu in game.");
  localStorage.setItem("zaxod", "1");
  localStorage.setItem(
    "users_themes",
    JSON.stringify({
      classic: [],
      dark: [
        "ren_border_color 0x858585",
        "ren_grid_color 0xffffff",
        "ren_background_color 0x101010",
      ],
      arras: [
        "ren_score_bar_fill_color 0x8abc3f",
        "ren_xp_bar_fill_color 0xefc74b",
        "net_replace_color 0 0x484848",
        "net_replace_color 1 0xa7a7af",
        "net_replace_color 2 0x3ca4cb",
        "net_replace_color 3 0x3ca4cb",
        "net_replace_color 4 0xe03e41",
        "net_replace_color 5 0xcc669c",
        "net_replace_color 6 0x8abc3f",
        "net_replace_color 8 0xefc74b",
        "net_replace_color 9 0xe7896d",
        "net_replace_color 10 0x8d6adf",
        "net_replace_color 11 0xef99c3",
        "net_replace_color 12 0xfdf380",
        "net_replace_color 14 0xa7a7af",
        "net_replace_color 15 0xe03e41",
        "net_replace_color 17 0x726f6f",
      ],
      neon: [
        "ren_stroke_soft_color_intensity -100",
        "ren_solid_background true",
        "ren_stroke_soft_color true",
        "ren_background_color 0x000000",
        "ren_border_color 0xFFFFFF",
        "ren_border_alpha 100",
        "net_replace_color 0 0xFFFFFF",
        "net_replace_color 1 0x010101",
        "net_replace_color 2 0x000102",
        "net_replace_color 3 0x000102",
        "net_replace_color 4 0x020000",
        "net_replace_color 5 0x020002",
        "net_replace_color 6 0x000200",
        "net_replace_color 7 0x000100",
        "net_replace_color 8 0x010101",
        "net_replace_color 9 0x010101",
        "net_replace_color 10 0x010101",
        "net_replace_color 11 0x0e0e0e",
        "net_replace_color 12 0x020200",
        "net_replace_color 13 0x010101",
        "net_replace_color 14 0x010101",
        "net_replace_color 15 0x020000",
        "net_replace_color 16 0x010200",
        "net_replace_color 17 0x000202",
      ],
    })
  );
}

const MENU_CONTENT = document.getElementsByClassName("themes__content")[0];

const DASHBOARD = document.getElementById("dashboard");
DASHBOARD.id = "dashboard";
DASHBOARD.style.display = "none";
DASHBOARD.setValues = (values, execute) => {
  [
    ...document
      .querySelector(".dashboard__content")
      .querySelectorAll(".option__value *"),
  ].map((el) => el.setValue(values, execute));
};
DASHBOARD.getValues = () => {
  return [
    ...document
      .querySelector(".dashboard__content")
      .querySelectorAll(".option__value *"),
  ].map((el) => el.getValue());
};
DASHBOARD.context = {
  type: null,
  theme: null,
};
modo.append(DASHBOARD);

function callDashboard(type, theme, execute = true) {
  DASHBOARD.style.display = "block";
  DASHBOARD.context.type = type;
  DASHBOARD.context.theme = theme;
  DASHBOARD.setValues(theme.data, execute);
  let header = DASHBOARD.querySelector("div span");
  header.innerText = `${theme.name}`;
  cache = getUserData();
  console.log(DASHBOARD.context);
}

class ThemeBtn {
  constructor(parentTheme, type, name, parent) {
    this.el = document.createElement("button");
    this.el.className = type;
    this.parentTheme = parentTheme;

    if (type == "edit") {
      this.el.innerText = "Edit";
      this.el.onclick = () => {
        if (editing) editing.classList.remove("editing");
        editing = this.parentTheme.el;
        let header = DASHBOARD.querySelector("div span");
        header.innerText = `Editing ${this.name}`;

        editing.classList.add("editing");
        callDashboard("edit", parentTheme, false);
        cache = getUserData();
      };
    } else {
      this.el.innerText = "Delete";
      this.el.onclick = () => {
        if (confirm("Are you sure? The theme will be deleted.")) {
          let db = getUserData();
          delete db[`${name}`];
          localStorage.setItem("users_themes", JSON.stringify(db));
          parentTheme.el.remove();
          cache = getUserData();
        }
      };
    }
    parent.append(this.el);
  }
}
class Theme {
  constructor(name, data) {
    this.el = document.createElement("div");
    this.el.className = "theme";
    this.data = data;
    this.name = name;

    this.label = document.createElement("div");
    this.label.className = "theme__name";
    this.label.innerText = name;

    this.label.onclick = () => {
      if (selected) selected.classList.remove("activated");

      DASHBOARD.setValues(this.data);
      selected = this.el;
      localStorage.setItem("selected_theme", JSON.stringify(this.name));
      selected.classList.add("activated");
    };

    this.el.append(this.label);
    let contBtn = document.createElement("div");
    contBtn.className = "container-btns";
    new ThemeBtn(this, "edit", this.name, contBtn);
    new ThemeBtn(this, "delete", this.name, contBtn);

    this.el.append(contBtn);
    MENU_CONTENT.append(this.el);
    cache = getUserData();
  }
  editData(values) {
    let db = getUserData();
    db[`${this.name}`] = values;
    localStorage.setItem("users_themes", JSON.stringify(db));
    this.data = values;
    cache = getUserData();
  }
}

class Input {
  constructor(default_, cmd, isLast = false) {
    this.default = default_;
    this.cmd = cmd;
    this.el = document.createElement("input");
    this.isLast = isLast;
  }
}

class ColorInput extends Input {
  constructor(default_, cmd, isLast) {
    super(default_, cmd, isLast);
    this.el.type = "color";
    this.el.value = this.default;

    this.el.oninput = () => {
      input.execute(`${this.cmd}${this.el.value.slice(1)}`);
    };
    this.el.getValue = () => {
      return `${this.cmd}${this.el.value.slice(1)}`;
    };
    this.el.setValue = (values, execute = true) => {
      let found = false;
      for (let value of values) {
        if (value.includes(this.cmd)) {
          found = true;
          const RE = new RegExp(this.cmd);
          const value_ = value.replace(RE, "");
          this.el.value = "#" + value_;
          break;
        }
      }
      if (!found) this.el.value = this.default;
      if (execute) this.el.oninput();
    };
  }
}

class CheckBoxInput extends Input {
  constructor(default_, cmd, isLast) {
    super(default_, cmd, isLast);
    this.el.type = "checkbox";
    this.el.checked = this.default;

    this.el.oninput = () => {
      input.execute(`${this.cmd}${this.el.checked}`);
    };
    this.el.getValue = () => {
      return `${this.cmd}${this.el.checked}`;
    };
    this.el.setValue = (values, execute = true) => {
      let found = false;
      for (let value of values) {
        if (value.includes(this.cmd)) {
          found = true;
          const RE = new RegExp(this.cmd);
          const value_ = value.replace(RE, "");
          if (value_ === "true") {
            this.el.checked = true;
          } else {
            this.el.checked = false;
          }
          break;
        }
      }
      if (!found) this.el.checked = this.default;
      if (execute) this.el.oninput();
    };
  }
}

class NumberInput extends Input {
  constructor(default_, cmd, step, min, max, isLast) {
    super(default_, cmd, isLast);
    this.el.type = "number";
    this.el.value = this.default;
    this.el.step = step;
    this.el.min = min;
    this.el.max = max;

    this.el.oninput = () => {
      input.execute(`${this.cmd}${this.el.value}`);
    };
    this.el.getValue = () => {
      return `${this.cmd}${this.el.value}`;
    };
    this.el.setValue = (values, execute = true) => {
      let found = false;
      for (let value of values) {
        if (value.includes(this.cmd)) {
          found = true;
          const RE = new RegExp(this.cmd);
          this.el.value = value.replace(RE, "");
          break;
        }
      }
      if (!found) this.el.value = this.default;
      if (execute) this.el.oninput();
    };
  }
}
function addSection(header, options) {
  const SECTION = document.createElement("div");
  SECTION.className = "content__section";

  SECTION.append(header, options);
  document.getElementsByClassName("dashboard__content")[0].append(SECTION);
}

function createHeader(text) {
  const HEADER = document.createElement("div");
  HEADER.className = "section__header";
  HEADER.innerText = text;

  HEADER.onclick = function () {
    const OPTIONS = HEADER.parentElement.querySelector(".section__options");
    if (OPTIONS) {
      if (OPTIONS.style.display != "none") {
        HEADER.classList.add("hidden");
        OPTIONS.style.display = "none";
      } else {
        HEADER.classList.remove("hidden");
        OPTIONS.style.display = "";
      }
    }
  };
  return HEADER;
}

function createOption(text, html, isLast = false) {
  const OPTION = document.createElement("div");
  OPTION.className = "section__option";

  const OPTION_LABEL = document.createElement("span");
  OPTION_LABEL.className = "option__label";
  OPTION_LABEL.innerText = text;

  const OPTION_VALUE = document.createElement("div");
  OPTION_VALUE.className = "option__value";
  OPTION_VALUE.append(html);

  OPTION.append(OPTION_LABEL, OPTION_VALUE);

  if (isLast) {
    OPTION.style.marginBottom = "10px";
  }

  return OPTION;
}
function saveTheme(type, theme) {
  var db = getUserData();
  var values = [];
  var name = "";
  if (!db) db = [];

  if (type == "create") {
    name = prompt("Enter the name of this theme.");
    if (!name) {
      alert("ERR: Invalid volume!");
      return false;
    }
    if (name.length > 25) {
      alert("ERR: Invalid length name (must be 25-)!");
      return false;
    }

    for (let t in db)
      if (t == name)
        return alert("ERR: There is already a theme with the same name!");

    values = DASHBOARD.getValues();
    db[`${name}`] = values;
    localStorage.setItem("users_themes", JSON.stringify(db));

    new Theme(name, values);
    return true;
  } else if (type == "edit") {
    if (confirm("Are you sure? The properties will be overwritten.")) {
      values = DASHBOARD.getValues();
      db[`${theme.name}`] = values;
      localStorage.setItem("users_themes", JSON.stringify(db));
      theme.editData(values);
      if (editing) editing.classList.remove("editing");
      return true;
    }
    return false;
  }
  let header = DASHBOARD.querySelector("div span");
  header.innerText = ``;
}

window.addEventListener("keydown", (event) => {
  if (["r", "к"].includes(event.key)) {
    hideEl(modo);
  }
});
document.getElementsByClassName("green")[0].onclick = () => {
  callDashboard("create", { name: "new theme", data: [] });
};
document.getElementsByClassName("green")[1].onclick = () => {
  if (saveTheme(DASHBOARD.context.type, DASHBOARD.context.theme)) {
    hideEl(DASHBOARD);
  }
};
document.getElementsByClassName("red")[0].onclick = () => {
  if (confirm("Are you sure? The changes are unsaved!")) {
    DASHBOARD.context.type;
    DASHBOARD.context.theme;
    hideEl(DASHBOARD);
    if (editing) editing.classList.remove("editing");
    let header = DASHBOARD.querySelector("div span");
    header.innerText = ``;
  }
};
setDrag(DASHBOARD, document.querySelector("#dashboard .tool__header"));
setDrag(
  document.querySelector("#themes"),
  document.querySelector("#themes .tool__header")
);

function hideEl(el) {
  if (el.style.display != "none") {
    el.style.display = "none";
  } else {
    el.style.display = "";
  }
}
function setDrag(el, el_child) {
  var newPosX = 0,
    newPosY = 0,
    MousePosX = 0,
    MousePosY = 0;
  if (el_child) {
    el_child.addEventListener("mousedown", MouseDown);
  } else el.addEventListener("mousedown", MouseDown);

  function MouseDown(mouseDown) {
    MousePosX = mouseDown.pageX;
    MousePosY = mouseDown.pageY;

    el.classList.add("dragableging");
    document.addEventListener("mousemove", elementMove);
    document.addEventListener("mouseup", stopElementMove);
  }

  function elementMove(mouseMove) {
    newPosX = MousePosX - mouseMove.pageX;
    newPosY = MousePosY - mouseMove.pageY;
    MousePosX = mouseMove.pageX;
    MousePosY = mouseMove.pageY;

    el.style.top = el.offsetTop - newPosY + "px";
    el.style.left = el.offsetLeft - newPosX + "px";
  }

  function stopElementMove() {
    el.classList.remove("dragableging");
    document.removeEventListener("mousemove", elementMove);
    document.removeEventListener("mouseup", stopElementMove);
  }
}

function init() {
  const DB = {
    "Global colors": {
      "Map background": new ColorInput("#cdcdcd", "ren_background_color 0x"),
      "Map border": new ColorInput("#000000", "ren_border_color 0x"),
      "Map border alpha": new NumberInput(
        0.1,
        "ren_border_color_alpha ",
        0.01,
        0,
        1
      ),
      "Map grid": new ColorInput("#000000", "ren_grid_color 0x"),
      "Map grid alpha": new NumberInput(
        0.1,
        "ren_grid_base_alpha ",
        0.01,
        0,
        1,
        true
      ),
      "Minimap background": new ColorInput(
        "#cdcdcd",
        "ren_minimap_background_color 0x"
      ),
      "Minimap border": new ColorInput(
        "#555555",
        "ren_minimap_border_color 0x",
        true
      ),
      "Soft colors": new CheckBoxInput(true, "ren_stroke_soft_color "),
      "Soft stroke intensity": new NumberInput(
        0.25,
        "ren_stroke_soft_color_intensity ",
        0.05,
        null,
        1,
        true
      ),

      Squares: new ColorInput("#ffe869", "net_replace_color 8 0x"),
      Triangles: new ColorInput("#fc7677", "net_replace_color 9 0x"),
      Pentagons: new ColorInput("#768dfc", "net_replace_color 10 0x"),
      "Shiny poligons": new ColorInput(
        "#89ff69",
        "net_replace_color 7 0x",
        true
      ),
      Crashers: new ColorInput("#ff77dc", "net_replace_color 11 0x"),
      "Neutral team": new ColorInput("#ffe869", "net_replace_color 12 0x"),
      "Fallen Bosses": new ColorInput(
        "#c0c0c0",
        "net_replace_color 17 0x",
        true
      ),
      "Health bar": new ColorInput("#85e37d", "ren_health_fill_color 0x"),
      "Health bar background": new ColorInput(
        "#555555",
        "ren_health_background_color 0x"
      ),
      "EXP bar": new ColorInput("#ffde43", "ren_xp_bar_fill_color 0x"),
      "Score bar": new ColorInput("#43ff91", "ren_score_bar_fill_color 0x"),
      "EXP/Score/Scoreboard backgrounds": new ColorInput(
        "#000000",
        "ren_bar_background_color 0x",
        true
      ),
      "Barrels & etc": new ColorInput("#999999", "net_replace_color 1 0x"),
      "Smasher & dominator bases": new ColorInput(
        "#555555",
        "net_replace_color 0 0x"
      ),
    },
    "TDM colors": {
      "Blue team": new ColorInput("#00b1de", "net_replace_color 3 0x"),
      "Red Team": new ColorInput("#f14e54", "net_replace_color 4 0x"),
      "Purple team": new ColorInput("#be7ff5", "net_replace_color 5 0x"),
      "Green team": new ColorInput("#00f46c", "net_replace_color 6 0x"),
    },
    "FFA colors": {
      "Your body": new ColorInput("#00b1de", "net_replace_color 2 0x"),
      "Enemies' bodies": new ColorInput("#f14e56", "net_replace_color 15 0x"),
      "Summoned squares": new ColorInput("#fbc477", "net_replace_color 16 0x"),
      "Maze walls": new ColorInput("#bbbbbb", "net_replace_color 14 0x"),
      "Scoreboard bar": new ColorInput("#44ffa0", "net_replace_color 13 0x"),
    },
    Other: {
      FPS: new CheckBoxInput(false, "ren_fps "),
      "Players' names": new CheckBoxInput(true, "ren_names "),
      "Health bar": new CheckBoxInput(true, "ren_health_bars "),
      "Show health bar values": new CheckBoxInput(
        false,
        "ren_raw_health_values "
      ),
      "Scoreboar names": new CheckBoxInput(true, "ren_scoreboard_names "),
      Scoreboard: new CheckBoxInput(true, "ren_scoreboard "),
      "Minimap viewport": new CheckBoxInput(false, "ren_minimap_viewport "),
      UI: new CheckBoxInput(true, "ren_ui "),
      //"UI scale": new NumberInput(1, "ren_ui_scale ", 0.01, 0, null, true),

      "Pattern grid": new CheckBoxInput(true, "ren_pattern_grid "),
      "Debug collisions": new CheckBoxInput(false, "ren_debug_collisions "),
    },
  };

  for (let category in DB) {
    const OPTIONS = document.createElement("div");
    OPTIONS.className = "section__options";
    const HEADER = createHeader(category);

    for (let opt in DB[category]) {
      const PLAN = DB[category][opt];
      OPTIONS.append(createOption(opt, PLAN.el, PLAN.isLast));
    }

    addSection(HEADER, OPTIONS);
  }

  let db = getUserData();
  const selected = JSON.parse(localStorage.getItem("selected_theme"));
  for (let t in db) {
    let theme = db[`${t}`];
    let stheme = new Theme(t, theme);
    if (!!selected) {
      if (stheme.name == selected) {
        stheme.label.onclick();
        DASHBOARD.setValues(cache[`${selected}`]);
      }
    }
  }
}

function getUserData() {
  return JSON.parse(localStorage.getItem("users_themes"));
}

const checking = setInterval(() => {
  try {
    if (input) {
      clearInterval(checking);
      init();
    }
  } catch (err) {}
}, 10);