How do I get themes on diep.io?
Hmm, good question!
Install tampermonkey on any browser not including opera GX cuz it won't work.
Once installed, turn on developer mode to work
Once on tampermonkey website extension, press plus to make a code.
Paste this code into the tampermonkey.
// ==UserScript==
// @name 
Better Style Redux
// @namespace 
http://tampermonkey.net/
// @version 
2026-02-18
// @description 
try to take over the world!
// @author 
darkforce
// @match 
https://*.diep.io/
// @icon 
https://image2url.com/r2/default/images/1771394161131-f1ca2c6e-ead4-49d7-b884-6dfe8dd2a801.png
// @grant 
none
// @require 
https://cdn.jsdelivr.net/gh/mobilepanel/betterstyle@main/index.js
// ==/UserScript==
(function () {
"use strict";
const jsColorPackage = `https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js`;
const ICON_SAVE_DARK = "https://image2url.com/r2/default/images/1771393483164-dca147c3-1b53-436f-83bd-1595441d059a.png";
const ICON_SAVE_LIGHT = ICON_SAVE_DARK
const ICON_IMPORT_DARK = "https://image2url.com/r2/default/images/1771393536379-02a075e0-8347-482a-972b-5ef12d2f01d3.png";
const ICON_IMPORT_LIGHT = "https://image2url.com/r2/default/images/1771430038800-a515edfa-bded-4434-a759-5e7d81577ee4.png";
const ICON_EXPORT_DARK = "https://image2url.com/r2/default/images/1771393507955-9bd65498-c59d-47a7-b61d-eb0158c9f367.png";
const ICON_EXPORT_LIGHT = "https://image2url.com/r2/default/images/1771430075200-068bd3c2-d62a-4fa3-bf3e-4e955a3c7c57.png";
const ICON_MARKET_DARK = "https://image2url.com/r2/default/images/1771393536379-02a075e0-8347-482a-972b-5ef12d2f01d3.png";
const ICON_MARKET_LIGHT = "https://image2url.com/r2/default/images/1771430038800-a515edfa-bded-4434-a759-5e7d81577ee4.png";
var localStorage;
var nowSetting;
var isLocal;
var clone;
var customThemes = [];
const STORAGE_KEY = "betterstyle_v3_settings";
const THEME_KEY = "betterstyle_Themes_v3_local";
const SELECTED_THEME_KEY = "betterstyle_selected_theme_id";
const MARKET_ENDPOINT = "https://actual-wasp-57164.upstash.io";
const MARKET_TOKEN = "Ad9MAAIncDI1MjJlMzFkNzVmMTk0YjBmYmE0YjMyNDdmMWJkMmNhOXAyNTcxNjQ";
const MARKET_KEY = "diep_marketplace_themes";
jsInit();
setTimeout(pluginInit, 2000);
function jsInit() {
Storage.prototype.setObject = function (key, value) {
this.setItem(key, JSON.stringify(value));
};
Storage.prototype.getObject = function (key) {
var value = this.getItem(key);
return value && JSON.parse(value);
};
clone = function (obj) {
return JSON.parse(JSON.stringify(obj));
};
window.diepStyle = {};
localStorage = window.localStorage;
window.diepStyle.currentThemeId = localStorage.getItem(SELECTED_THEME_KEY) || null;
if (location.href.indexOf("file://") >= 0) {
isLocal = true;
}
var storedThemes = localStorage.getObject(THEME_KEY);
if (storedThemes && Array.isArray(storedThemes)) {
customThemes = storedThemes.map(t => t.id ? t : { ...t, id: Date.now() + Math.random().toString() });
}
const link = document.createElement('link');
link.rel = "stylesheet";
document.head.appendChild(link);
}
function escapeHtml(text) {
if (!text) return "";
return text
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
};
function resizeImage(file, maxWidth, maxHeight, callback) {
const img = new Image();
const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => {
const canvas = document.createElement('canvas');
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
const dataUrl = canvas.toDataURL('image/jpeg', 0.7);
callback(dataUrl);
URL.revokeObjectURL(url);
};
img.onerror = () => {
URL.revokeObjectURL(url);
console.error("Failed to load image for resizing");
};
}
function pluginInit() {
storageInit();
keyListen();
tempInit();
styleInit();
diepStyle.onColor = onColor;
diepStyle.storageInit = storageInit;
(function initFontHook() {
const domStyle = document.createElement('style');
domStyle.id = "diep-font-style-hook";
document.head.appendChild(domStyle);
function updateDOMFont(fontName) {
if (!fontName) return;
domStyle.innerHTML = `
body, * { font-family: '${fontName}', Ubuntu, sans-serif !important; }
`;
}
if (nowSetting && nowSetting.font) updateDOMFont(nowSetting.font);
const originalFn = diepStyle.command.fn;
diepStyle.command.fn = function(cmd, value) {
originalFn(cmd, value);
if(cmd === 'custom_font') {
updateDOMFont(value);
}
};
try {
const fontDesc = Object.getOwnPropertyDescriptor(CanvasRenderingContext2D.prototype, "font");
if (!fontDesc) return;
const originalSetter = fontDesc.set;
const originalGetter = fontDesc.get;
Object.defineProperty(CanvasRenderingContext2D.prototype, "font", {
set(value) {
if (nowSetting && nowSetting.font) {
value = value.replace(/Ubuntu|sans-serif/gi, nowSetting.font);
}
originalSetter.call(this, value);
},
get() {
return originalGetter.call(this);
},
configurable: true
});
} catch (e) {
console.error("Better Style: Font hook failed", e);
}
})();
function storageInit(cmd) {
var th = 50,
netTH = 110;
var colors = [
{ id: 2, name: "You FFA", color: "00b1de" },
{ id: 15, name: "Other FFA", color: "f14e54" },
{ id: 3, name: "Blue Team", color: "00b1de" },
{ id: 4, name: "Red Team", color: "f14e54" },
{ id: 5, name: "Purple Team", color: "bf7ff5" },
{ id: 6, name: "Green Team", color: "00e16e" },
{ id: 17, name: "Fallen Team", color: "c6c6c6" },
{ id: 12, name: "Arena Closer", color: "ffe869" },
{ id: 8, name: "Square", color: "ffe869" },
{ id: 7, name: "Green Square", color: "89ff69" },
{ id: 16, name: "Necro Square", color: "fcc376" },
{ id: 9, name: "Triangle", color: "fc7677" },
{ id: 10, name: "Pentagon", color: "768dfc" },
{ id: 18, name: "Hexagon", color: "32c5db" },
{ id: 11, name: "Crasher", color: "f177dd" },
{ id: 14, name: "Maze Wall", color: "bbbbbb" },
{ id: 1, name: "Turret", color: "999999" },
{ id: 0, name: "Smasher", color: "4f4f4f" },
{ id: th++, name: "All Bars", color: "000000", cmd: "ren_bar_background_color" },
{ id: th++, name: "Outline", color: "555555", cmd: "ren_stroke_solid_color" },
{ id: 13, name: "Leader Board", color: "64ff8c" },
{ id: th++, name: "Xp Bar", color: "ffde43", cmd: "ren_xp_bar_fill_color" },
{ id: th++, name: "Score Bar", color: "43ff91", cmd: "ren_score_bar_fill_color" },
{ id: th++, name: "Health Bar1", color: "85e37d", cmd: "ren_health_fill_color" },
{ id: th++, name: "Health Bar2", color: "555555", cmd: "ren_health_background_color" },
{ id: th++, name: "Grid Color", color: "000000", cmd: "ren_grid_color" },
{ id: th++, name: "Minimap 1", color: "CDCDCD", cmd: "ren_minimap_background_color" },
{ id: th++, name: "Minimap 2", color: "797979", cmd: "ren_minimap_border_color" },
{ id: th++, name: "Background 1", color: "CDCDCD", cmd: "ren_background_color" },
{ id: th++, name: "Background 2", color: "797979", cmd: "ren_border_color" },
{ id: netTH++, name: "UI Color1", color: "e69f6c", cmd: "ui_replace_colors" },
{ id: netTH++, name: "UI Color2", color: "ff73ff", cmd: "ui_replace_colors" },
{ id: netTH++, name: "UI Color3", color: "c980ff", cmd: "ui_replace_colors" },
{ id: netTH++, name: "UI Color4", color: "71b4ff", cmd: "ui_replace_colors" },
{ id: netTH++, name: "UI Color5", color: "ffed3f", cmd: "ui_replace_colors" },
{ id: netTH++, name: "UI Color6", color: "ff7979", cmd: "ui_replace_colors" },
{ id: netTH++, name: "UI Color7", color: "88ff41", cmd: "ui_replace_colors" },
{ id: netTH++, name: "UI Color8", color: "41ffff", cmd: "ui_replace_colors" },
];
diepStyle.colorMap = new Map(
colors.map(function (elem) {
return [
{
color: elem.color,
cmd: elem.cmd || "no cmd",
},
];
})
);
diepStyle.uiColorMap = function (cmd) {
var uiTH = nowSetting.colors.findIndex(
(elem) => elem.name == "UI Color1"
);
var colorBunch = "";
var arr = [];
if (cmd == "0x") {
for (var i = 0; i < 8; i++) {
colorBunch = " 0x" + nowSetting.colors[uiTH + i].color + colorBunch;
}
return colorBunch;
}
if (cmd == "array") {
for (var i = 0; i < 8; i++) {
arr.push(nowSetting.colors[uiTH + i].color);
}
return arr;
}
};
var renders = [
{ name: "Grid Alpha", value: 0.1, cmd: "grid_base_alpha" },
{ name: "Outline Intensity", value: 0.25, cmd: "stroke_soft_color_intensity" },
{ name: "Show Outline", value: false, cmd: "stroke_soft_color", reverse: true },
{ name: "Border Alpha", value: 0.1, cmd: "border_color_alpha" },
{ name: "UI Scale", value: 1, cmd: "ui_scale" },
{ name: "Clear UI", value: false, cmd: "ui", reverse: true },
{ name: "Show FPS", value: false, cmd: "fps" },
{ name: "Show Ping", value: false, cmd: "latency" },
{ name: "Show Health", value: false, cmd: "raw_health_values" },
{ name: "Hide Name", value: false, cmd: "names", reverse: true },
{ name: "Font Face", value: "Ubuntu", cmd: "custom_font", type: "select" }
];
(function checkHasStorage() {
var _localStorage = localStorage.getObject(STORAGE_KEY);
if (_localStorage && _localStorage.nowSetting) {
nowSetting = _localStorage.nowSetting;
}
if (!nowSetting || cmd == "reset") {
nowSetting = getBlankSetting();
}
var plain = getBlankSetting();
plain.renders.forEach((elem, th) => {
var index = nowSetting.renders.findIndex(
(now) => elem.cmd == now.cmd
);
if (index < 0) {
nowSetting.renders.splice(th, 0, elem);
}
});
plain.colors.forEach((elem, th) => {
var index = nowSetting.colors.findIndex((now) => {
if (elem.cmd && elem.cmd == now.cmd) return true;
if ((elem.id || elem.id == 0) && elem.id == now.id) return true;
});
if (index < 0) {
nowSetting.colors.splice(th, 0, elem);
}
});
if(!nowSetting.font) nowSetting.font = "Ubuntu";
})();
(function command() {
diepStyle.command = {};
renders.forEach((elem) => {
diepStyle.command[elem.cmd] = {};
if (elem.reverse) diepStyle.command[elem.cmd].reverse = true;
});
diepStyle.command.fn = function (cmd, value) {
nowSetting.renders = nowSetting.renders.map((elem) => {
if (elem.cmd == cmd) elem.value = value;
return elem;
});
if (cmd === "custom_font") {
nowSetting.font = value;
return;
}
if (diepStyle.command[cmd].reverse) value = !value;
if (window.input) {
window.input.set_convar("ren_" + cmd, value);
}
};
})();
function getBlankSetting() {
return {
version: 3.1,
lock: false,
colors: clone(colors),
renders: clone(renders),
uiMode: 'light',
font: 'Ubuntu'
};
}
diepStyle.getBlankSetting = getBlankSetting;
Storage.prototype.pluginSave = function () {
var _storageObj = {
nowSetting: clone(nowSetting),
};
localStorage.setObject(STORAGE_KEY, _storageObj);
};
localStorage.pluginSave();
}
function keyListen() {
var panelOn = false;
var lastEscTime = 0;
const performToggle = () => {
panelOn = !panelOn;
togglePanel(panelOn);
if (!panelOn) {
localStorage.pluginSave();
}
};
document.addEventListener("keyup", function (evt) {
var e = window.event || evt;
var key = e.which || e.keyCode;
if (key === 27) {
const now = Date.now();
if (now - lastEscTime < 500) {
performToggle();
lastEscTime = 0;
} else {
lastEscTime = now;
}
}
});
let tapCount = 0;
let tapTimer = null;
const handleAreaTrigger = (e) => {
const x = e.clientX || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);
const y = e.clientY || (e.touches && e.touches[0] ? e.touches[0].clientY : 0);
const screenW = window.innerWidth;
const screenH = window.innerHeight;
if (x < screenW * 0.15 && y > screenH * 0.85) {
tapCount++;
clearTimeout(tapTimer);
if (tapCount === 4) {
tapCount = 0;
performToggle();
}
tapTimer = setTimeout(() => { tapCount = 0; }, 600);
} else {
tapCount = 0;
}
};
document.addEventListener("mousedown", handleAreaTrigger);
document.addEventListener("touchstart", handleAreaTrigger, { passive: true });
}
function tempInit() {
diepStyle.exportJSON = exportJSON;
diepStyle.importJSON = importJSON;
init1();
loadColor();
setTimeout(diepStyle.resetRender, 1500);
diepStyle.resetColor = loadColor;
function init1() {
diepStyle.resetRender = resetRender;
var title = `
<div class="header-container">
<div class="title">Better Style <small>v4.4</small></div>
<div class="toggle-container">
<label class="switch">
<input type="checkbox" id="darkModeToggle">
<span class="slider round"></span>
</label>
<span class="toggle-label">Dark UI</span>
</div>
</div>
<div class="subtitle">Press Esc twice to toggle</div>`;
var colorPlane = function (id) {
return `{position:'left',width:300, height:200,onFineChange:'diepStyle.onColor(${id},this)'}`;
};
window.updateOverwriteBtn = function() {
const btn = document.getElementById('overwriteThemeBtn');
if(btn) {
const theme = getCombinedThemes().find(t => t.id === diepStyle.currentThemeId);
const isReadOnly = theme && theme.readOnly;
btn.disabled = !diepStyle.currentThemeId || !theme || isReadOnly;
}
}
function getCombinedThemes() {
const defaultObj = {
id: "default_theme_readonly",
name: "Default",
data: diepStyle.exportJSON("object", diepStyle.getBlankSetting()),
readOnly: true
};
return [defaultObj, ...customThemes];
}
window.customAlert = function(msg) {
const m = document.getElementById('ds-msg-modal');
const t = document.getElementById('ds-msg-text');
const ok = document.getElementById('ds-msg-ok');
const cancel = document.getElementById('ds-msg-cancel');
const title = document.getElementById('ds-msg-title');
title.innerText = "Notice";
t.innerText = msg;
m.classList.remove('hide');
cancel.style.display = 'none';
ok.onclick = function() {
m.classList.add('hide');
}
}
window.customConfirm = function(msg, onYes) {
const m = document.getElementById('ds-msg-modal');
const t = document.getElementById('ds-msg-text');
const ok = document.getElementById('ds-msg-ok');
const cancel = document.getElementById('ds-msg-cancel');
const title = document.getElementById('ds-msg-title');
title.innerText = "Confirm";
t.innerText = msg;
m.classList.remove('hide');
cancel.style.display = 'inline-block';
ok.onclick = function() {
m.classList.add('hide');
if(onYes) onYes();
}
cancel.onclick = function() {
m.classList.add('hide');
}
}
function resetRender(cmd) {
document.querySelectorAll("#styleSetting .render").forEach(function (elem) {
elem.outerHTML = ``;
});
var it = document.querySelector(".renderBegin");
if(!it) return;
it.insertAdjacentHTML("afterend", getRenderBody());
nowSetting.renders.forEach(function (elem) {
diepStyle.command.fn(elem.cmd, elem.value);
});
bindRenderListeners();
const toggle = document.getElementById('darkModeToggle');
if (nowSetting.uiMode === 'dark') {
document.getElementById('styleSetting').classList.add('dark-mode');
if (toggle) toggle.checked = true;
} else {
document.getElementById('styleSetting').classList.remove('dark-mode');
if (toggle) toggle.checked = false;
}
updateIcons(nowSetting.uiMode === 'dark');
updateOverwriteBtn();
}
var bodyTheme = getThemeBody();
var bodyRender = getRenderBody();
var bodyColor = getColorBody();
function getThemeBody() {
const allThemes = getCombinedThemes();
const isDark = nowSetting.uiMode === 'dark';
const iconSrc = isDark ? ICON_SAVE_DARK : ICON_SAVE_LIGHT;
let themeListHTML = allThemes.map((t) => {
const isSelected = diepStyle.currentThemeId === t.id;
const activeClass = isSelected ? "selected-theme" : "";
const deleteBtn = t.readOnly
? `<button class="delete-theme-btn" disabled style="opacity:0.3; cursor:default;">×</button>`
: `<button class="delete-theme-btn" data-id="${t.id}">×</button>`;
return `
<div class="theme-card ${activeClass}" data-id="${t.id}">
<div class="theme-name" title="${escapeHtml(t.name)}">${escapeHtml(t.name)}</div>
<div class="theme-actions">
<button class="load-theme-btn" data-id="${t.id}" ${isSelected ? 'disabled' : ''}>${isSelected ? 'Active' : 'Select'}</button>
${deleteBtn}
</div>
</div>`;
}).join('');
var html = `
<div class="themeBody">
Once done, press Ctrl + s to make it done
If you have diep.io website on, reload it to make it work
Press esc two times to open the panel
Done.
It doesn't work
Probably cuz your on opera GX or a big happened
1 comment