Dark grey mode
// ==UserScript==
// @name TT Dark Mode
// @namespace http://tampermonkey.net/
// @version 2.0.0
// @description Dark grey mode
// @author Aurelion-X9
// @match https://tanktrouble.com/*
// @match https://*.tanktrouble.com/*
// @run-at document-body
// @grant none
// ==/UserScript==
(function() {
'use strict';
let enabled = true;
// Dark grey theme
const DARK_CSS = `
/* Main backgrounds - dark grey not black */
html, body, #background {
background: #1a1a1a !important;
}
/* All elements - dark grey backgrounds */
body * {
background-color: transparent !important;
}
/* Panels and boxes */
.box, .panel, .popup, .modal, .dropdown, .tooltip, .window,
.content, .container, .wrapper, .section, .main, #main,
#settings, #tankinfo, #playerpanel, #header, #footer,
[class*="panel"], [class*="box"], [class*="popup"], [class*="modal"] {
background: #222222 !important;
}
/* Inputs */
input, textarea, select, .input {
background: #2a2a2a !important;
color: #e0e0e0 !important;
border-color: #444 !important;
}
/* Buttons */
button, .btn, .button {
background: #333333 !important;
color: #e0e0e0 !important;
border-color: #444 !important;
}
button:hover, .btn:hover, .button:hover {
background: #3a3a3a !important;
}
/* Text colors - light grey not white */
body, body *:not(a):not(.link) {
color: #c0c0c0 !important;
}
/* Headings slightly brighter */
h1, h2, h3, h4, h5, h6, .title, .heading {
color: #e0e0e0 !important;
}
/* Links */
a, .link {
color: #6a9fd4 !important;
}
a:hover, .link:hover {
color: #8ab8e8 !important;
}
/* Tables */
table, td, th {
background: transparent !important;
border-color: #333 !important;
}
/* Chat */
#chat, .chat, .chat-container, .chat-box {
background: #1a1a1a !important;
}
.chat-message, .message, .chat-line {
color: #c0c0c0 !important;
background: transparent !important;
}
/* Game list / lobby */
#games, .games-container, .game-list {
background: #1a1a1a !important;
}
/* Borders - subtle */
* {
border-color: #333 !important;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background: #444;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Remove any white backgrounds */
[style*="background: white"], [style*="background: #fff"],
[style*="background-color: white"], [style*="background-color: #fff"],
[style*="background: rgb(255"], [style*="background-color: rgb(255"] {
background: #222222 !important;
}
`;
let styleEl = null;
function apply() {
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.id = 'tt-dark-css';
(document.head || document.documentElement).appendChild(styleEl);
}
styleEl.textContent = enabled ? DARK_CSS : '';
}
function createToggle() {
if (!document.body || document.getElementById('tt-dark-toggle-btn')) return;
const btn = document.createElement('button');
btn.id = 'tt-dark-toggle-btn';
btn.textContent = enabled ? '☀️' : '🌙';
btn.title = 'Toggle Dark Mode';
btn.style.cssText = 'position:fixed !important; bottom:50px !important; right:8px !important; z-index:2147483647 !important; width:36px !important; height:36px !important; border-radius:50% !important; border:2px solid #444 !important; background:#333 !important; color:#fff !important; font-size:16px !important; cursor:pointer !important; display:block !important;';
btn.onclick = () => {
enabled = !enabled;
btn.textContent = enabled ? '☀️' : '🌙';
apply();
localStorage.setItem('tt-dark-mode', enabled);
};
document.body.appendChild(btn);
}
apply();
const checkBody = () => {
if (document.body) {
createToggle();
} else {
setTimeout(checkBody, 50);
}
};
checkBody();
setTimeout(createToggle, 100);
setTimeout(createToggle, 500);
setTimeout(createToggle, 1000);
setTimeout(createToggle, 2000);
setInterval(() => { if (enabled) apply(); }, 2000);
})();