Preview -
Version history for those that care -
Installation instructions -
Remember: remove each space after every '@' symbol so it looks like [Only registered and activated users can see links. Click Here To Register...].
Alternatively, you can copy and paste directly from the Pastebin -
[Only registered and activated users can see links. Click Here To Register...]
Each section is commented and scoped by page so you can quickly locate and modify anything you want without hunting through the code.
For example -
To do -
Known issues -
In theory, this should work on Firefox without any issues, but it has only been tested on Chrome.
__________________
*Fun extra elite*gold themed user bar text color (not needed)* -
Insert this code -
Anywhere below this -
Version history for those that care -
Installation instructions -
Remember: remove each space after every '@' symbol so it looks like [Only registered and activated users can see links. Click Here To Register...].
Alternatively, you can copy and paste directly from the Pastebin -
[Only registered and activated users can see links. Click Here To Register...]
Code:
// ==UserScript==
// @ name ElitePvpers Dark Mode
// @ namespace http://tampermonkey.net/
// @ version 1.56
// @ description elitepvpers dark mode
// @ author 0x41^4
// @ match *://*.elitepvpers.com/*
// @ run-at document-start
// @ grant none
// ==/UserScript==
(function () {
'use strict';
const DARK_BG = '#2d2d2d';
const DARK_BG_2 = '#262626';
const DARK_TEXT = '#e0e0e0';
const BORDER = '#404040';
const IS_TBM = location.pathname.startsWith('/theblackmarket/');
// Redirect pages are /link/?https://...
const IS_REDIRECT =
location.pathname === '/link/' ||
location.pathname.startsWith('/link') ||
location.pathname.includes('/redirect-to/');
// Private messages (PM pages)
const IS_PM = location.pathname.includes('private.php');
// Profile pages
const IS_PROFILE =
location.pathname.includes('member.php') ||
location.pathname.includes('profile.php') ||
location.pathname.includes('/members/');
// Edit post page (your white border repro)
const IS_EDITPOST =
location.pathname.includes('editpost.php') ||
location.search.includes('do=updatepost') ||
location.search.includes('do=editpost');
// Home page (https://www.elitepvpers.com/)
const IS_HOME =
location.pathname === '/' &&
!location.pathname.startsWith('/forum/') &&
!location.pathname.startsWith('/theblackmarket/');
/* =====================
EARLY ANTI-FOUC (FIRST PAINT)
===================== */
function injectAntiFlashCSS() {
if (document.getElementById('ep-darkmode-antiflash')) return;
const style = document.createElement('style');
style.id = 'ep-darkmode-antiflash';
style.textContent = `
html { background-color: #1e1e1e !important; }
body { background-color: ${DARK_BG_2} !important; color: ${DARK_TEXT} !important; }
/* Kill the bar that flashes white */
div[style="padding-top:8px"],
div[style^="padding-top:8px"],
div[style*="padding-top:8px"] {
background-color: ${DARK_BG_2} !important;
background-image: none !important;
}
/* Postbit/TBM user info bars flashing white (first paint)
Safe: only background/border, does not touch text colors */
.postbar {
background-color: ${DARK_BG} !important;
background-image: none !important;
border-color: ${BORDER} !important;
}
/* Remove the white content shadow strip early */
#contentshadowwhite {
background-image: none !important;
background-color: ${DARK_BG_2} !important;
height: 8px !important;
border-top: 1px solid #3a3a3a !important;
}
/* Redirect page title bars early */
.cwtitle1h, .cwtitlehead, .cwtitle1f {
background-color: ${DARK_BG} !important;
background-image: none !important;
border-color: ${BORDER} !important;
color: ${DARK_TEXT} !important;
}
`;
document.documentElement.prepend(style);
}
const baseCss = `
/* =====================
BASE
===================== */
html { background-color: #1e1e1e !important; }
body { background-color: ${DARK_BG_2} !important; color: ${DARK_TEXT} !important; }
/* =====================
CORE CONTENT (TARGETED)
===================== */
section, article, aside, main,
.alt1, .alt2, .alt3, .alt4,
.panel, .panelsurround,
.tcat, .thead, .tfoot,
.page, .vbmenu_control {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
}
table.tborder,
table.tborder tr,
table.tborder td,
table.tborder th {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
}
.forumbit_nopost, .forumbit_post,
.forumrow, .foruminfo, .forumdata,
.threadbit, .postbit, .posthead, .postcontent,
.blockrow, .blockbody, .blockhead {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
}
/* =====================
HEADER / NAV
===================== */
#header, #headerbg, .header {
background-color: #272727 !important;
border-bottom: 1px solid #3a3a3a !important;
}
#navbar, .navbar, #navtabs, .navtabs {
background-color: #2a2a2a !important;
border-top: 1px solid #3a3a3a !important;
border-bottom: 1px solid #3a3a3a !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.35) !important;
}
#subnavbar, .subnavbar, #navlinks, .navlinks {
background-color: ${DARK_BG_2} !important;
border-bottom: 1px solid #3a3a3a !important;
}
.navtab, .navtab a, .navtabs li a,
#navbar a, #navtabs a {
background-color: #2f2f2f !important;
border: 1px solid #3b3b3b !important;
border-bottom-color: #2a2a2a !important;
border-radius: 3px !important;
padding: 6px 10px !important;
margin: 0 4px !important;
}
.navtab a:hover, .navtabs li a:hover,
#navbar a:hover, #navtabs a:hover {
background-color: #343434 !important;
border-color: #4a4a4a !important;
}
.navtab.selected a, .navtab.active a, .navtab.current a,
.navtabs li.selected a, .navtabs li.active a, .navtabs li.current a {
background-color: #3a3a3a !important;
border-color: #5a5a5a !important;
}
/* Remove the white content shadow strip */
#contentshadowwhite {
background-image: none !important;
background-color: ${DARK_BG_2} !important;
height: 8px !important;
border-top: 1px solid #3a3a3a !important;
}
/* =====================
DROPDOWNS / POPUPS
===================== */
.vbmenu_popup,
.popupmenu,
.popupbody {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
border: 1px solid ${BORDER} !important;
}
.vbmenu_popup a,
.popupmenu a,
.popupbody a { color: #6eb5ff !important; }
.vbmenu_popup a:hover,
.popupmenu a:hover,
.popupbody a:hover { color: #8fc7ff !important; }
.vbmenu_option,
.vbmenu_option td { background-color: ${DARK_BG} !important; color: ${DARK_TEXT} !important; }
.vbmenu_hilite,
.vbmenu_hilite td { background-color: #343434 !important; color: ${DARK_TEXT} !important; }
/* Keep color palette working */
.ocolor div { border: 1px solid #ACA899 !important; }
/* =====================
LINKS
===================== */
a:not([style*="color"]) { color: #6eb5ff !important; }
a:not([style*="color"]):hover { color: #8fc7ff !important; }
a:not([style*="color"]):visited { color: #6eb5ff !important; }
a[href*="showthread.php"]:not([style*="color"]):visited { color: #bb86fc !important; }
/* Elite usergroup thread titles (inline BlueViolet -> dark-mode friendly) */
a[style*="BlueViolet" i],
a[style*="blueviolet" i] { color: #c79bff !important; }
/* Revert all other inline-colored links (prevents default #0000EE) */
a[style*="color"]:not([style*="BlueViolet" i]):not([style*="blueviolet" i]) {
color: revert !important;
}
/* =====================
INPUTS
IMPORTANT: do NOT style the search input/button at all
===================== */
input:not(.searchbtn):not(.searchinput),
textarea,
select {
background-color: #3a3a3a !important;
color: ${DARK_TEXT} !important;
border-color: ${BORDER} !important;
}
/* =====================
FIX: Editor toolbar hover turning white
===================== */
#vB_Editor_001_controls .imagebutton,
#vB_Editor_QR_controls .imagebutton,
.vBulletin_editor .controlbar .imagebutton,
.vBulletin_editor .editor_toolbar .imagebutton,
.editor_toolbar .imagebutton {
background: #2f2f2f !important;
background-color: #2f2f2f !important;
color: ${DARK_TEXT} !important;
border: none !important;
padding: 1px !important;
}
#vB_Editor_001_controls .imagebutton:hover,
#vB_Editor_QR_controls .imagebutton:hover,
.vBulletin_editor .controlbar .imagebutton:hover,
.vBulletin_editor .editor_toolbar .imagebutton:hover,
.editor_toolbar .imagebutton:hover,
#vB_Editor_001_controls .imagebutton:active,
#vB_Editor_QR_controls .imagebutton:active,
.vBulletin_editor .controlbar .imagebutton:active,
.vBulletin_editor .editor_toolbar .imagebutton:active,
.editor_toolbar .imagebutton:active,
#vB_Editor_001_controls .imagebutton:focus,
#vB_Editor_QR_controls .imagebutton:focus,
.vBulletin_editor .controlbar .imagebutton:focus,
.vBulletin_editor .editor_toolbar .imagebutton:focus,
.editor_toolbar .imagebutton:focus {
background: #343434 !important;
background-color: #343434 !important;
color: ${DARK_TEXT} !important;
outline: none !important;
}
/* Borders (only affects elements that already have borders) */
table, tr, th, td:not(.postbar td) { border-color: ${BORDER} !important; }
/* =====================
PATCH: white outer borders on Edit Post (tborder/panelsurround)
===================== */
table.tborder { border-color: ${BORDER} !important; }
td.panelsurround,
td.panelsurround > .panel,
td.panelsurround > table,
td.panelsurround table.tborder {
border-color: ${BORDER} !important;
outline: none !important;
box-shadow: none !important;
background-image: none !important;
}
table.tborder,
td.panelsurround,
.panel,
.panelsurround {
box-shadow: none !important;
}
#contentbg,
#footerbg,
#footerbgend {
background-image: none !important;
border-color: ${BORDER} !important;
}
fieldset,
fieldset legend {
border-color: ${BORDER} !important;
outline: none !important;
box-shadow: none !important;
}
${IS_EDITPOST ? `
form[action*="editpost.php"] table.tborder { border: 1px solid ${BORDER} !important; }
form[action*="editpost.php"] td.panelsurround { border: 1px solid ${BORDER} !important; }
` : ''}
/* Scrollbar (Chrome) */
::-webkit-scrollbar { background-color: #1e1e1e !important; }
::-webkit-scrollbar-thumb { background-color: ${BORDER} !important; }
/* =====================
elite*gold ticker banner
===================== */
.ticker {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
border: 1px solid ${BORDER} !important;
}
#tickermessages,
.tickermessages,
.tickermessages li,
.tickermessages li div,
#tickermessages > li,
#tickermessages > li > div {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
}
.tickermessages a { color: #6eb5ff !important; }
.tickermessages a:hover { color: #8fc7ff !important; }
/* =====================
Quick Reply / Reply Editor outline fix (scoped)
===================== */
#quickreply,
#quickreply .tborder,
#quickreply .panel,
#quickreply .panelsurround,
#quickreply fieldset,
#quickreply fieldset legend {
border-color: ${BORDER} !important;
background-image: none !important;
outline: none !important;
box-shadow: none !important;
}
form[action*="newreply.php"] .tborder,
form[action*="newreply.php"] .panel,
form[action*="newreply.php"] .panelsurround,
form[action*="newreply.php"] fieldset,
form[action*="newreply.php"] fieldset legend {
border-color: ${BORDER} !important;
background-image: none !important;
outline: none !important;
box-shadow: none !important;
}
/* =====================
New Reply editor border
===================== */
#vB_Editor_001,
#vB_Editor_001 .controlbar,
#vB_Editor_001_controls,
#vB_Editor_001 table,
#vB_Editor_001 td,
#vB_Editor_001 fieldset {
border-color: ${BORDER} !important;
background-image: none !important;
}
#vB_Editor_001 {
border: 1px solid ${BORDER} !important;
background-color: ${DARK_BG} !important;
color: ${DARK_TEXT} !important;
}
/* =====================
PATCH: remove extra outlines around Quick Reply + PM delete message box
===================== */
#quickreply, #quickreply *,
.quick_reply, .quick_reply *,
.quick_reply_controls, .quick_reply_controls *,
#vB_Editor_QR, #vB_Editor_QR *,
#vB_Editor_001, #vB_Editor_001 * {
outline: none !important;
box-shadow: none !important;
}
#quickreply,
.quick_reply,
.quick_reply_controls,
.floatcontainer.quick_reply_controls { border: none !important; }
#vB_Editor_QR,
#vB_Editor_001 {
border: 1px solid ${BORDER} !important;
background-color: ${DARK_BG} !important;
background-image: none !important;
}
#vB_Editor_QR .controlbar,
#vB_Editor_QR table,
#vB_Editor_QR td,
#vB_Editor_QR fieldset,
#vB_Editor_QR textarea,
#vB_Editor_001 .controlbar,
#vB_Editor_001 table,
#vB_Editor_001 td,
#vB_Editor_001 fieldset,
#vB_Editor_001 textarea {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
td.panelsurround,
td.panelsurround > .panel,
td.panelsurround .panel {
outline: none !important;
box-shadow: none !important;
}
`;
const tbmCss = `
.cwalt {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
border-color: ${BORDER} !important;
}
.cwalt * { border-color: ${BORDER} !important; }
.cwalt table,
.cwalt tr,
.cwalt td,
.cwalt th {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
}
`;
const redirectCss = `
.cwalt,
.cw1h,
.cwhead,
.cwtitle1h,
.cwtitlehead,
.cwtitle1f,
.cbtitle1h,
.cbtitlehead,
.cbtitle1f {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
border-color: ${BORDER} !important;
}
.cwalt table,
.cwalt tr,
.cwalt td,
.cwalt th {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
border-color: ${BORDER} !important;
}
input[type="text"],
input[type="url"] {
background-color: #3a3a3a !important;
color: ${DARK_TEXT} !important;
border: 1px solid ${BORDER} !important;
}
`;
const pmCss = `
fieldset.fieldset,
fieldset.fieldset legend,
fieldset.fieldset table,
fieldset.fieldset td,
fieldset.fieldset th,
fieldset.fieldset .tborder,
fieldset.fieldset table[style*="groove"],
fieldset.fieldset table[style*="border:2px groove"],
fieldset.fieldset table[style*="border: 2px groove"] {
border-color: ${BORDER} !important;
}
td.panelsurround,
td.panelsurround > table,
td.panelsurround table,
td.panelsurround .panel,
td.panelsurround .panelsurround,
td.panelsurround .tborder,
td.panelsurround td,
td.panelsurround th {
border-color: ${BORDER} !important;
outline: none !important;
box-shadow: none !important;
}
td.panelsurround .tborder,
td.panelsurround table.tborder {
border: 1px solid ${BORDER} !important;
}
`;
const profileCss = `
.block_row,
.block_footer,
.block_head,
.blockbody,
.blocksubhead,
.blocktitle,
.block,
.block_container,
.member_block {
border-color: ${BORDER} !important;
}
.block_row.alt1,
.block_row.alt2,
.block_footer.alt1,
.block_footer.alt2 {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
}
.memberinfo_tiny {
border-color: ${BORDER} !important;
box-shadow: none !important;
outline: none !important;
}
.block_row *:not(img):not(svg):not(canvas),
.block_footer *:not(img):not(svg):not(canvas),
.memberinfo_tiny *:not(img):not(svg):not(canvas) {
border-color: ${BORDER} !important;
}
`;
const homeCss = `
/* =====================
HOME PAGE ONLY ( / )
===================== */
/* Main news wrapper is cwalt and is basically the whole white page */
.cwalt {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
border-color: ${BORDER} !important;
}
/* News item tables */
table.cwnewsitem,
table.cwnewsitem tr,
table.cwnewsitem td {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
border-color: ${BORDER} !important;
}
/* Some parts use a slightly different background */
.cwnewsimg,
.cwnewsdate,
.cwtaglist {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
}
/* Headlines / text */
table.cwnewsitem h3,
table.cwnewsitem p {
color: ${DARK_TEXT} !important;
}
/* If the homepage uses separators/lines via background images, kill them */
table.cwnewsitem,
table.cwnewsitem td {
box-shadow: none !important;
outline: none !important;
}
/* Make sure any "white cell" inside cwalt gets darkened */
.cwalt td,
.cwalt th,
.cwalt div,
.cwalt p,
.cwalt h1,
.cwalt h2,
.cwalt h3,
.cwalt h4,
.cwalt ul,
.cwalt li {
background-image: none !important;
color: ${DARK_TEXT} !important;
border-color: ${BORDER} !important;
}
`;
function injectCSS() {
const old = document.getElementById('ep-darkmode-style');
if (old) old.remove();
const style = document.createElement('style');
style.id = 'ep-darkmode-style';
style.textContent =
baseCss +
(IS_TBM ? tbmCss : '') +
(IS_REDIRECT ? redirectCss : '') +
(IS_PM ? pmCss : '') +
(IS_PROFILE ? profileCss : '') +
(IS_HOME ? homeCss : '');
(document.head || document.documentElement).appendChild(style);
}
// --- Smart “light background” fixer ---
function parseRGB(str) {
const m = str.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([0-9.]+))?\)/i);
if (!m) return null;
return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
}
function luminance({ r, g, b }) {
return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
}
function hasVisibleBorder(cs) {
if (!cs) return false;
const styles = [cs.borderTopStyle, cs.borderRightStyle, cs.borderBottomStyle, cs.borderLeftStyle];
const widths = [
parseFloat(cs.borderTopWidth) || 0,
parseFloat(cs.borderRightWidth) || 0,
parseFloat(cs.borderBottomWidth) || 0,
parseFloat(cs.borderLeftWidth) || 0
];
for (let i = 0; i < 4; i++) {
const st = (styles[i] || '').toLowerCase();
if (widths[i] > 0 && st !== 'none' && st !== 'hidden') return true;
}
return false;
}
function shouldExclude(el) {
if (!el || el.nodeType !== 1) return true;
if (el.closest('.ocolor')) return true;
if (el.closest('#header') || el.closest('#headerbg') || el.closest('.headerbg')) return true;
if (el.closest('#userbarbg')) return true;
if (el.closest('form#searchform') || el.closest('.searchbox')) return true;
if (el.classList && el.classList.contains('imagebutton')) return true;
if (el.closest && el.closest('.imagebutton')) return true;
if (el.tagName === 'IMG' || el.tagName === 'SVG' || el.tagName === 'CANVAS') return true;
return false;
}
function darkenIfLight(el) {
if (shouldExclude(el)) return;
const cs = getComputedStyle(el);
if (!cs) return;
if (cs.backgroundImage && cs.backgroundImage !== 'none') return;
const bg = parseRGB(cs.backgroundColor);
if (!bg || bg.a < 0.1) return;
if (luminance(bg) < 0.85) return;
el.style.setProperty('background-color', DARK_BG, 'important');
el.style.setProperty('background-image', 'none', 'important');
const fg = parseRGB(cs.color);
if (fg && luminance(fg) < 0.4) {
el.style.setProperty('color', DARK_TEXT, 'important');
}
if (hasVisibleBorder(cs)) {
el.style.setProperty('border-color', BORDER, 'important');
}
}
function scanAndFix(root) {
const scope = root && root.querySelectorAll ? root : document;
const candidates = scope.querySelectorAll('div, td, th, table, fieldset, dl, dd, dt, ul, li, p, section, article');
for (const el of candidates) darkenIfLight(el);
}
function startObserver() {
const obs = new MutationObserver((mutations) => {
for (const m of mutations) {
for (const node of m.addedNodes) {
if (node && node.nodeType === 1) scanAndFix(node);
}
}
});
obs.observe(document.documentElement, { childList: true, subtree: true });
}
// boot
injectAntiFlashCSS();
injectCSS();
if (!document.head) document.addEventListener('DOMContentLoaded', injectCSS, { once: true });
document.addEventListener(
'DOMContentLoaded',
() => {
scanAndFix(document);
startObserver();
},
{ once: true }
);
})();
For example -
Code:
/* =====================
DROPDOWNS / POPUPS
===================== */
- Choose a suitable non-premium username color (currently #6eb5ff) that doesn’t visually conflict with the premium color (#0099ff). It doesn’t bother me personally, but if a lot of users use it, it likely will bother some. Possibly an off-white.
- Redesign the Quote, Quote+, Edit and New Reply images to better match the dark theme.
- Apply theming to the Games page (does anyone even use this?).
Known issues -
- Trade values conflict with userbars and usergroups, so they’ve been assigned fixed colors: green for positive, white for neutral, and red for negative. This will be addressed when I have time.
In theory, this should work on Firefox without any issues, but it has only been tested on Chrome.
__________________
*Fun extra elite*gold themed user bar text color (not needed)* -
Insert this code -
Code:
/* =====================
elite*gold + Black Market (userbar)
===================== */
/* elite*gold text only (number stays default) */
.postbar a[href*="/theblackmarket/sendeg/"] {
color: #F1BB04 !important;
text-decoration-color: ${DARK_TEXT} !important;
}
/* Black Market label to match normal text */
.postbar a[href*="/theblackmarket/profile/"] {
color: ${DARK_TEXT} !important;
text-decoration-color: ${DARK_TEXT} !important;
}
/* Keep underline neutral on hover */
.postbar a[href*="/theblackmarket/sendeg/"]:hover,
.postbar a[href*="/theblackmarket/profile/"]:hover {
text-decoration-color: ${DARK_TEXT} !important;
}
/* =====================
Black Market ratings underline fix
(49 / 0 / 0 underline should be white)
===================== */
.postbar a[href*="/theblackmarket/ratings/"] {
text-decoration-color: ${DARK_TEXT} !important;
}
.postbar a[href*="/theblackmarket/ratings/"]:hover {
text-decoration-color: ${DARK_TEXT} !important;
}
Code:
/* =====================
LINKS
===================== */
a:not([style*="color"]) { color: #6eb5ff !important; }
a:not([style*="color"]):hover { color: #8fc7ff !important; }
a:not([style*="color"]):visited { color: #6eb5ff !important; }
a[href*="showthread.php"]:not([style*="color"]):visited { color: #bb86fc !important; }
/* Elite usergroup thread titles (inline BlueViolet -> dark-mode friendly) */
a[style*="BlueViolet" i],
a[style*="blueviolet" i] { color: #c79bff !important; }
/* Revert all other inline-colored links (prevents default #0000EE) */
a[style*="color"]:not([style*="BlueViolet" i]):not([style*="blueviolet" i]) {
color: revert !important;
}