TT Dark Mode

Dark grey mode
Ask a question, post a review, or report the script.
Wrap lines
// ==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);

})();