Change Torn's background with predefined themes and custom colors
// ==UserScript==
// @name Torn.com Background Theme Editor
// @namespace http://tampermonkey.net/
// @version 1.5
// @description Change Torn's background with predefined themes and custom colors
// @author TR0LL [2561502]
// @match https://www.torn.com/*
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @license Proprietary
// ==/UserScript==
(function() {
"use strict";
const CONFIG = {
defaultBgColor: "#191919",
darkModeBgColor: "#242424",
selectorContentContainer: ".content.responsive-sidebar-container.logged-in",
themes: {
pureBlack: { name: "Pure Black", color: "#000000" },
midnightBlue: { name: "Midnight Blue", color: "#1a2a42" },
princess: { name: "Princess", color: "#c80e71" },
custom: { name: "Custom", color: null }
}
};
const state = {
bgColor: GM_getValue("bgColor", "#191919"),
currentTheme: GM_getValue("currentTheme", null),
isObserving: false,
isPanelVisible: false
};
const domCache = { contentContainer: null, bodyElement: null };
function getContentContainer() {
return domCache.contentContainer || (domCache.contentContainer = document.querySelector(CONFIG.selectorContentContainer));
}
function getBodyElement() {
return domCache.bodyElement || (domCache.bodyElement = document.getElementById('body') || document.body);
}
function throttle(func, delay) {
let lastCall = 0;
return function(...args) {
const now = Date.now();
if (now - lastCall >= delay) {
lastCall = now;
func.apply(this, args);
}
};
}
function isDarkModeActive() {
const bodyElement = getBodyElement();
return bodyElement && bodyElement.classList.contains('dark-mode');
}
function getAutoDetectedColor() {
return isDarkModeActive() ? CONFIG.darkModeBgColor : CONFIG.defaultBgColor;
}
function applyBackgroundColor(color) {
const contentContainer = getContentContainer();
if (contentContainer) {
contentContainer.style.backgroundColor = color;
return true;
}
return false;
}
function saveBackgroundColor(color, themeName = null) {
if (!/^#[0-9A-F]{6}$/i.test(color)) return false;
state.bgColor = color;
GM_setValue("bgColor", color);
if (themeName !== undefined) {
state.currentTheme = themeName;
GM_setValue("currentTheme", themeName);
}
return applyBackgroundColor(color);
}
function getCurrentThemeColor() {
if (state.currentTheme === "custom") {
return state.bgColor;
} else if (state.currentTheme && CONFIG.themes[state.currentTheme]) {
return CONFIG.themes[state.currentTheme].color;
} else {
return getAutoDetectedColor();
}
}
const observer = new MutationObserver((mutations) => {
const shouldReapply = mutations.some(mutation =>
(mutation.type === 'childList' && mutation.addedNodes.length > 0) ||
(mutation.type === 'attributes' &&
(mutation.attributeName === 'style' ||
mutation.attributeName === 'class'))
);
if (shouldReapply && state.currentTheme) {
applyBackgroundColor(getCurrentThemeColor());
}
});
function startObserving() {
if (state.isObserving) return;
const contentContainer = getContentContainer();
if (contentContainer) {
observer.observe(contentContainer, {
attributes: true,
attributeFilter: ['style', 'class'],
childList: true,
subtree: false
});
const bodyElement = getBodyElement();
if (bodyElement) {
observer.observe(bodyElement, {
attributes: true,
attributeFilter: ['class'],
subtree: false
});
}
state.isObserving = true;
}
}
function createUI() {
addStyles();
const toggleButton = document.createElement("div");
toggleButton.className = "bg-theme-toggle";
toggleButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`;
document.body.appendChild(toggleButton);
const panel = document.createElement("div");
panel.id = "bg-theme-panel";
panel.className = "bg-theme-panel";
let panelHTML = `
<div class="bg-theme-header">
<span>Background Theme</span>
<span class="bg-theme-close">×</span>
</div>
<div class="bg-theme-content">
<div class="bg-theme-group">
<label for="bg-theme-select">Theme:</label>
<select id="bg-theme-select" class="bg-theme-select">`;
Object.keys(CONFIG.themes).forEach(themeKey => {
const selected = themeKey === state.currentTheme ? 'selected' : '';
panelHTML += `<option value="${themeKey}" ${selected}>${CONFIG.themes[themeKey].name}</option>`;
});
panelHTML += `
</select>
</div>
<div id="custom-color-group" class="bg-theme-group" style="display: ${state.currentTheme === 'custom' ? 'block' : 'none'}">
<label for="bg-theme-color">Custom Color:</label>
<div class="bg-theme-color-preview" id="color-preview"></div>
<div class="bg-theme-color-inputs">
<input type="color" id="bg-theme-color-picker" value="${state.bgColor}">
<input type="text" id="bg-theme-hex" value="${state.bgColor}" placeholder="#RRGGBB">
</div>
</div>
<div class="bg-theme-buttons">
<button id="bg-theme-reset" class="bg-theme-button">Reset to Default</button>
<button id="bg-theme-save" class="bg-theme-button bg-theme-save">Save</button>
</div>
<div id="bg-theme-save-indicator" class="bg-theme-save-indicator">Saved!</div>
<div class="bg-theme-credit">TR0LL [2561502]</div>
</div>
`;
panel.innerHTML = panelHTML;
document.body.appendChild(panel);
const themeSelect = document.getElementById('bg-theme-select');
const colorGroup = document.getElementById('custom-color-group');
const colorPreview = document.getElementById('color-preview');
const colorPicker = document.getElementById('bg-theme-color-picker');
const hexInput = document.getElementById('bg-theme-hex');
const resetButton = document.getElementById('bg-theme-reset');
const saveButton = document.getElementById('bg-theme-save');
const saveIndicator = document.getElementById('bg-theme-save-indicator');
colorPreview.style.backgroundColor = state.bgColor;
toggleButton.addEventListener('click', () => {
state.isPanelVisible = !state.isPanelVisible;
panel.classList.toggle('visible', state.isPanelVisible);
});
panel.querySelector('.bg-theme-close').addEventListener('click', () => {
state.isPanelVisible = false;
panel.classList.remove('visible');
});
themeSelect.addEventListener('change', function() {
const selectedTheme = this.value;
state.currentTheme = selectedTheme;
colorGroup.style.display = selectedTheme === 'custom' ? 'block' : 'none';
if (selectedTheme === 'custom') {
colorPicker.value = state.bgColor;
hexInput.value = state.bgColor;
colorPreview.style.backgroundColor = state.bgColor;
applyBackgroundColor(state.bgColor);
} else if (selectedTheme && CONFIG.themes[selectedTheme]) {
const themeColor = CONFIG.themes[selectedTheme].color;
colorPicker.value = themeColor;
hexInput.value = themeColor;
colorPreview.style.backgroundColor = themeColor;
applyBackgroundColor(themeColor);
}
});
const throttledColorApply = throttle((newColor) => {
state.bgColor = newColor;
hexInput.value = newColor;
colorPreview.style.backgroundColor = newColor;
applyBackgroundColor(newColor);
}, 50);
colorPicker.addEventListener('input', function() {
throttledColorApply(this.value);
});
colorPicker.addEventListener('change', function() {
const newColor = this.value;
state.bgColor = newColor;
hexInput.value = newColor;
colorPreview.style.backgroundColor = newColor;
applyBackgroundColor(newColor);
});
hexInput.addEventListener('input', function() {
let value = this.value;
if (!value.startsWith('#') && value.length > 0) {
value = '#' + value;
this.value = value;
}
if (/^#[0-9A-Fa-f]{6}$/i.test(value)) {
colorPicker.value = value;
colorPreview.style.backgroundColor = value;
state.bgColor = value;
applyBackgroundColor(value);
}
});
resetButton.addEventListener('click', () => {
applyBackgroundColor('');
state.currentTheme = null;
GM_setValue("currentTheme", null);
const themeSelect = document.getElementById('bg-theme-select');
if (themeSelect) {
themeSelect.selectedIndex = -1;
}
const colorGroup = document.getElementById('custom-color-group');
if (colorGroup) {
colorGroup.style.display = 'none';
}
const saveIndicator = document.getElementById('bg-theme-save-indicator');
if (saveIndicator) {
saveIndicator.textContent = "Reset! Using default background.";
saveIndicator.classList.add('visible');
setTimeout(() => {
saveIndicator.textContent = "Saved!";
saveIndicator.classList.remove('visible');
}, 2000);
}
});
saveButton.addEventListener('click', () => {
if (state.currentTheme === 'custom') {
saveBackgroundColor(colorPicker.value, 'custom');
} else if (state.currentTheme && CONFIG.themes[state.currentTheme]) {
saveBackgroundColor(CONFIG.themes[state.currentTheme].color, state.currentTheme);
}
saveIndicator.classList.add('visible');
setTimeout(() => {
saveIndicator.classList.remove('visible');
}, 2000);
state.isPanelVisible = false;
panel.classList.remove('visible');
});
return panel;
}
function addStyles() {
const styleElement = document.createElement('style');
styleElement.textContent = `.bg-theme-toggle{position:fixed;right:10px;top:100px;width:32px;height:32px;background-color:#333;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9998;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .2s}.bg-theme-toggle:hover{transform:scale(1.1)}.bg-theme-panel{position:fixed;right:-250px;top:100px;width:220px;background-color:#222;border-radius:5px;z-index:9999;box-shadow:0 4px 10px rgba(0,0,0,.3);color:#eee;font-family:Arial,sans-serif;font-size:13px;transition:right .3s ease}.bg-theme-panel.visible{right:10px}.bg-theme-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-bottom:1px solid #444;font-weight:700}.bg-theme-close{cursor:pointer;font-size:20px;width:20px;height:20px;line-height:20px;text-align:center}.bg-theme-close:hover{color:#f44}.bg-theme-content{padding:15px}.bg-theme-group{margin-bottom:15px}.bg-theme-group label{display:block;margin-bottom:5px;font-weight:700;color:#ccc}.bg-theme-select{width:100%;padding:7px;background-color:#333;border:1px solid #444;color:#eee;border-radius:3px}.bg-theme-color-preview{height:25px;width:100%;margin-bottom:8px;border:1px solid #444;border-radius:3px}.bg-theme-color-inputs{display:flex;gap:8px}#bg-theme-color-picker{width:40px;height:30px;padding:0;border:1px solid #444;cursor:pointer}#bg-theme-hex{flex:1;padding:6px 8px;background-color:#333;border:1px solid #444;color:#eee;border-radius:3px;font-family:monospace}.bg-theme-buttons{display:flex;gap:10px;margin-top:15px}.bg-theme-button{flex:1;padding:8px 0;background-color:#444;border:none;border-radius:3px;color:#eee;font-weight:700;cursor:pointer;transition:background-color .2s}.bg-theme-button:hover{background-color:#555}.bg-theme-save{background-color:#4caf50}.bg-theme-save:hover{background-color:#3e8e41}.bg-theme-save-indicator{text-align:center;margin-top:10px;color:#4caf50;opacity:0;transition:opacity .3s;font-weight:700}.bg-theme-save-indicator.visible{opacity:1}.bg-theme-credit{margin-top:10px;text-align:center;font-size:11px;color:#777}@media (max-width:768px){.bg-theme-toggle{width:28px;height:28px;right:5px;top:70px}.bg-theme-panel{width:190px}.bg-theme-panel.visible{right:5px}}`;
document.head.appendChild(styleElement);
}
function init() {
if (state.currentTheme) {
const currentColor = getCurrentThemeColor();
if (!applyBackgroundColor(currentColor)) {
window.addEventListener("DOMContentLoaded", () => {
applyBackgroundColor(getCurrentThemeColor());
startObserving();
});
} else {
startObserving();
}
} else {
startObserving();
}
const currentUrl = window.location.href;
if (currentUrl.includes("/preferences.php") || currentUrl.includes("/profiles.php?XID=")) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", createUI);
} else {
createUI();
}
}
}
init();
})();