|
You last visited: Today at 08:00
Advertisement
[Release] ElitePvpers Dark Mode
Discussion on [Release] ElitePvpers Dark Mode within the Main forum part of the General category.
01/13/2026, 02:55
|
#1
|
elite*gold: 151 
Join Date: Jul 2009
Posts: 5,178
Received Thanks: 2,602
|
[Release] ElitePvpers Dark Mode
Preview -
Version history for those that care -
v0.0 - Initial dark mode implementation
- Base background and text color overrides
- No universal selector used
v0.1 - Scoped dark mode to vBulletin content containers
- Preserved custom username colors and inline styles
- Fixed basic readability issues
v0.2 - Added proper link coloring
- Preserved green/red semantic colors (ratings, BM indicators)
- Prevented inline-colored links from being overridden
v0.3 - Corrected visited-link behavior
- Ensured category/forum links do not change color
- Applied visited color only to thread titles
v0.4 - Fixed postbar borders and spacing
- Prevnted border color conflicts
- Improved visual separation in posts
v0.5 - Removed global table/td background overrides
- Restored layout depth and structural separation
- Prevented header flattening
v0.6 - Fixed white content boxes caused by vBulletin default styles
- Themed tborder, alt*, and forum row containers
v0.7 - Removed hardcoded white separator (#contentshadowwhite)
- Replaced with dark-mode-appropriate separator
v0.8 - Added layered header and navigation styling
- Restored button-like appearance to nav tabs
- Improved hover and active states
v0.9 - Preserved original .headerbg styling
- Restored native depth next to ElitePvpers logo
- Prevented header/search area from blending
v1.0 - Themed all vBulletin dropdown and popup menus
- Removed white/grey dropdown artifacts
- Unified hover and highlight states in menus
v1.1 - Reverted top user bar (#userbar) to stock styling (looks better)
- Preserved original gradient and visual hierarchy
- Improved contrast between header layers
v1.2 - Switched to manual <style> injection for reliability
- Hopefully ensured full compatibility with Chrome, Firefox, and Violentmonkey
- Eliminated dependency on GM_* APIs
v1.30 - Established stable dark mode baseline
- Darkened core forum containers, threads, posts, and tables
- Preserved native header, logo, and search styling
- Implemented consistent dark borders and readable text contrast
v1.31 - Improved navbar depth with subtle borders and shadowing
- Fixed category and forum list contrast issues
- Refined hover states for navigation tabs
v1.32 - Added visited-thread coloring (purple) while keeping categories blue
- Ensured unread threads remain bold until visited
- Prevented link color overrides on inline-styled elements
v1.33 - Fixed dropdown menus and context popups rendering white
- Standardized popup backgrounds and hover highlights
- Improved menu readability across forum sections
v1.34 - Restored proper user info panels (posts, thanks, join date)
- Removed unintended white outlines from post metadata boxes
- Normalized borders in postbit layouts
v1.35 - Added “light background fixer” for dynamically loaded elements
- Automatically darkened stray white boxes without breaking layouts
- Excluded images, icons, and known widgets from auto-darkening
v1.36 - Fixed color picker / text color palette inside post editor
- Preserved inline color previews and palette swatches
- Prevented dark mode overrides from masking selected colors
v1.37 - Resolved white content shadow artifacts (#contentshadowwhite)
- Replaced gradient strip with seamless dark divider
v1.38 - Improved header and sub-navigation visual depth
- Matched original ElitePvpers contrast while remaining dark
- Prevented header elements from blending together
v1.39 - Fixed dropdown menus inheriting incorrect background colors
- Improved hover feedback and selection visibility
v1.40 - Added dark styling for elite*gold ticker banner
- Removed legacy gradient background from ticker
- Ensured ticker links remain readable and consistent
v1.41 - Fixed search input text visibility
- Prevented global input styles from affecting header widgets
- Improved exclusion rules for header UI components
v1.42 - Restored native ElitePvpers search button
- Fully excluded .searchbtn and .searchinput from dark mode styling
- Preserved original searchbutton.gif behavior across all pages
v1.43 - Stability pass and regression fixes
- Ensured no unintended overrides of native forum UI
- Finalized search + elite gold banner behavior
- Confirmed compatibility with dynamic page loads and mutations
v1.44 - Fixed WYSIWYG editor toolbar buttons (Bold, Italic, etc.) flashing white when hovered or activated
- Scoped editor button styling strictly to editor controls to prevent site-wide UI regressions
- Preserved native button icons and behavior while enforcing dark-mode consistency
- Prevented editor interaction states from triggering the “light background fixer”
v1.45 - Fixed white outline borders around Quick Reply and Reply to Thread editor containers
- Removed light background gradients applied to editor wrapper elements
- Scoped editor border cleanup to reply-related components only to prevent UI regressions
- Preserved all existing dark mode styling, color palette behavior, and header elements
v1.46 and v1.47 – TBM Support Added - Added dedicated dark mode support for the TBM page
- Darkened TBM content panels
- Removed TBM-specific white background images
- Darkened TBM tables without affecting forum tables
- Ensured TBM fixes so forum styles remain unchanged
- Prevented TBM fixes from interfering with editor, search, or header UI
v1.48 - Added dark mode support for redirect pages (/link/)
- Fixed multiple redirect page elements rendering white
- Improved early-load styling to reduce light flashes
v1.49 - Fixed an issue where editor toolbar buttons (bold, italic, etc.) would turn white on hover
- Resolved permanent white borders around new reply / quick reply editors
- Improved consistency across Quick Reply vs New Reply editors
v1.50 - Fixed PM quick reply showing white outlines
- Scoped PM fixes to avoid affecting forum or TBM pages
- Reduced unintended side effects from global border overrides
v1.51 - Fixed an issue where .postbar would briefly flash white on page reload
- Added early anti-FOUC styling for postbit sidebars
- Improved first-paint dark mode consistency without breaking trade colors
v1.52-v1.54 - Fixed a bunch of random white borders (PMs, profile pages, and some vB panels).
- Fixed Elite usergroup thread titles (BlueViolet) being way too harsh on dark mode.
1.55 - Fixed extra outlines/box borders showing up around Quick Reply and some PM editor boxes.
- Tweaked border handling so I can only recolor borders that already exist (pretty much less random boxes).
1.56 - Added dark mode for the homepage (elitepvpers.com) including the news feed (.cwalt, .cwnewsitem).
- Cleaned up leftover white lines / separators on the home / news layout.
Installation instructions -
Step 1 – Install Tampermonkey - Open Chrome
- Go to the Chrome Web Store
- Search for Tampermonkey
- Click Add to Chrome
- Confirm by clicking Add extension
Step 2 – Enable Chrome Developer Mode - Open Chrome
- Copy Paste: chrome://extensions
- In the top-right corner, toggle Developer mode to ON
Step 3 – Set Tampermonkey to Beginner Mode - Beginner mode avoids advanced settings interfering with script execution.
- Click the Tampermonkey icon
- Click Dashboard
- Go to the Settings tab
- Find Config mode
- Set it to Beginner
- Click Save
Step 4 – Install the Script - Click the Tampermonkey icon
- Select Create a new script
- Delete everything in the editor
- Paste the ElitePvpers Dark Mode script in full
- Press Ctrl + S or click File then Save
- Refresh ElitePvpers
Remember: remove each space after every '@' symbol so it looks like  .
Alternatively, you can copy and paste directly from the Pastebin -
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 }
);
})();
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 -
Code:
/* =====================
DROPDOWNS / POPUPS
===================== */
To do - - 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;
}
Anywhere below this -
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;
}
|
|
|
|
01/13/2026, 10:02
|
#2
|
Administrator
elite*gold: 50901
Join Date: Jun 2011
Posts: 25,341
Received Thanks: 15,595
|
Very nice, #stickied
|
|
|
|
|
01/13/2026, 10:12
|
#3
|
elite*gold: 1245
Join Date: Jan 2021
Posts: 781
Received Thanks: 164
|
0x41^4 MVP 
Thank you for sharing!
|
|
|
|
|
01/15/2026, 02:14
|
#4
|
elite*gold: 151
Join Date: Jul 2009
Posts: 5,178
Received Thanks: 2,602
|
v1.46 – TBM Support Added - Added dedicated dark mode support for the page
- Darkened TBM content panels
- Removed TBM-specific white background images
- Darkened TBM tables without affecting forum tables
- Ensured TBM fixes so forum styles remain unchanged
- Prevented TBM fixes from interfering with editor, search, or header UI
Image preview -
Remember: remove each space after every @ so it looks like . Alternatively, you can copy and paste directly from the Pastebin -
Code:
// ==UserScript==
// @ name ElitePvpers Dark Mode
// @ namespace http://tampermonkey.net/
// @ version 1.46
// @ 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/');
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; }
a[style*="color"] { 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 highlight turning white
===================== */
#vB_Editor_001_controls .imagebutton,
#vB_Editor_QR_controls .imagebutton,
.vBulletin_editor .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 .imagebutton:hover,
.editor_toolbar .imagebutton:hover,
#vB_Editor_001_controls .imagebutton:active,
#vB_Editor_QR_controls .imagebutton:active,
.vBulletin_editor .imagebutton:active,
.editor_toolbar .imagebutton:active,
#vB_Editor_001_controls .imagebutton:focus,
#vB_Editor_QR_controls .imagebutton:focus,
.vBulletin_editor .imagebutton:focus,
.editor_toolbar .imagebutton:focus {
background: #343434 !important;
background-color: #343434 !important;
color: ${DARK_TEXT} !important;
outline: none !important;
}
/* Borders */
table, tr, th, td:not(.postbar td) { border-color: ${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 {
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;
}
`;
const tbmCss = `
/* =====================
TBM ONLY: /theblackmarket/
Fix white panels using cwaltbgfull.gif
===================== */
.cwalt {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !important;
border-color: ${BORDER} !important;
}
/* Some TBM blocks use related wrappers - keep it scoped + safe */
.cwalt * {
border-color: ${BORDER} !important;
}
/* TBM tables often inherit light backgrounds from cell styling */
.cwalt table,
.cwalt tr,
.cwalt td,
.cwalt th {
background-color: ${DARK_BG} !important;
background-image: none !important;
color: ${DARK_TEXT} !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 : '');
(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 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.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');
}
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 });
}
injectCSS();
if (!document.head) document.addEventListener('DOMContentLoaded', injectCSS, { once: true });
document.addEventListener('DOMContentLoaded', () => {
scanAndFix(document);
startObserver();
}, { once: true });
})();
Let me know if you encounter any issues.
To do - - Homepage
Redirect page- Dark interact button image(s); new reply, edit, etc.
|
|
|
|
|
01/15/2026, 11:24
|
#5
|
elite*gold: 0
Join Date: Jan 2026
Posts: 7
Received Thanks: 1
|
its cool. good work)
|
|
|
|
|
01/16/2026, 03:36
|
#6
|
elite*gold: 151
Join Date: Jul 2009
Posts: 5,178
Received Thanks: 2,602
|
Patch notes v1.51 -
v1.48 - Added dark mode support for redirect pages (/link/)
- Fixed multiple redirect page elements rendering white
- Improved early-load styling to reduce light flashes
v1.49 - Fixed an issue where editor toolbar buttons (bold, italic, etc.) would turn white on hover
- Resolved permanent white borders around new reply / quick reply editors
- Improved consistency across Quick Reply vs New Reply editors
v1.50 - Fixed PM quick reply showing white outlines
- Scoped PM fixes to avoid affecting forum or TBM pages
- Reduced unintended side effects from global border overrides
v1.51 - Fixed an issue where .postbar would briefly flash white on page reload
- Added early anti-FOUC styling for postbit sidebars
- Improved first-paint dark mode consistency without breaking trade colors
Remember: remove each space after every '@' symbol so it looks like .
Alternatively, you can copy and paste directly from the Pastebin -
Code:
// ==UserScript==
// @ name ElitePvpers Dark Mode
// @ namespace http://tampermonkey.net/
// @ version 1.53
// @ 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');
/* =====================
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; }
a[style*="color"] { 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
(QR + New Reply)
===================== */
#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; }
/* 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 (permanent white outline fix)
===================== */
#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 the 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;
}
/* Quick Reply containers should not get an extra border box */
#quickreply,
.quick_reply,
.quick_reply_controls,
.floatcontainer.quick_reply_controls {
border: none !important;
}
/* Keep only the intended editor border (single clean border) */
#vB_Editor_QR,
#vB_Editor_001 {
border: 1px solid ${BORDER} !important;
background-color: ${DARK_BG} !important;
background-image: none !important;
}
/* Prevent borders being applied to editor internals (these create the "outlined boxes") */
#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;
}
/* Delete/confirm boxes sometimes sit in panelsurround/panel: keep them flat */
td.panelsurround,
td.panelsurround > .panel,
td.panelsurround .panel {
outline: none !important;
box-shadow: none !important;
}
`;
const tbmCss = `
/* =====================
TBM ONLY: /theblackmarket/
Fix white panels using cwaltbgfull.gif
===================== */
.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 = `
/* =====================
REDIRECT ONLY: /link/ OR /redirect-to/
===================== */
.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 = `
/* =====================
PM PAGES (private.php)
Fix white borders on fieldsets and "groove" tables
===================== */
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;
}
/* Keep PM quick reply/editor wrapper from picking up outlines */
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;
}
`;
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 : '');
(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;
// keep color palette working
if (el.closest('.ocolor')) return true;
// avoid header/userbar/search UI
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;
// never touch editor buttons (they’re stateful and vB toggles inline styles)
if (el.classList && el.classList.contains('imagebutton')) return true;
if (el.closest && el.closest('.imagebutton')) return true;
// media elements
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 it has an explicit background image, leave it alone
if (cs.backgroundImage && cs.backgroundImage !== 'none') return;
const bg = parseRGB(cs.backgroundColor);
if (!bg || bg.a < 0.1) return;
// only darken truly light backgrounds
if (luminance(bg) < 0.85) return;
el.style.setProperty('background-color', DARK_BG, 'important');
el.style.setProperty('background-image', 'none', 'important');
// Do NOT kill trade/inline colors
const fg = parseRGB(cs.color);
if (fg && luminance(fg) < 0.4) {
el.style.setProperty('color', DARK_TEXT, 'important');
}
// IMPORTANT: do not "create" borders. Only recolor borders that already exist.
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 }
);
})();
|
|
|
|
|
01/17/2026, 10:09
|
#7
|
elite*gold: 151
Join Date: Jul 2009
Posts: 5,178
Received Thanks: 2,602
|
Patch notes v1.56 -
1.54 - Fixed a bunch of random white borders (PMs, profile pages, and some vB panels).
- Fixed Elite usergroup thread titles (BlueViolet) being way too harsh on dark mode.
1.55 - Fixed extra outlines/box borders showing up around Quick Reply and some PM editor boxes.
- Tweaked border handling so we only recolor borders that already exist (pretty much less random boxes).
1.56 - Added dark mode for the homepage (elitepvpers.com/) including the news feed (.cwalt, .cwnewsitem).
- Cleaned up leftover white lines / separators on the home / news layout.
__________________
Notes: Every section should now have dark mode support, except /games/, which I skipped because I’m not even sure anyone uses it. If you do, comment and I’ll add support for it as well.
As always, if you notice any issues anywhere, let me know and I’ll get them fixed.
__________________
Remember: remove each space after every '@' symbol so it looks like .
Alternatively, you can copy and paste directly from the Pastebin -
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 }
);
})();
To do - - Dark interact button image(s); new reply, edit, etc.
__________________
*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;
}
Anywhere below this -
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;
}
|
|
|
|
 |
Similar Threads
|
Dark Mode for Elitepvpers
12/29/2025 - Main - 35 Replies
Hello, my eyes was hurting from ePvp's light theme. Normally I'm using an extension called Dark Reader but it messing up ePvp so I decided to make my own. I just learn javascript so pretty sure you can loop every item by their color, but it's still a thing tho. I know, the style is the worst, everything is black, I can improve the design if you guys want.
Download any kind of userscript manager from your favorite browser extension market.
var div = document.querySelectorAll("div");...
|
Shadowgun Deadzone Trainer 1.0 - (Only for PC Mode )Ghost Mode - Fly Mode
07/26/2014 - Browsergames - 5 Replies
http://i61.tinypic.com/wlpw6e.jpg
Open Shadowgun Trainer and open game .
Easy to use.
This trainer doesnt work very well on some maps .But its usefull :D
|
Shadowgun Deadzone Trainer 2.0 *Ghost Mode*Fly Mode* Walk and Shoot Through Wall Mode
07/24/2014 - Facebook - 18 Replies
http://www.hizliresimyukle.com/images/2014/07/03/2 0rqwjo.jpg
http://www.hizliresimyukle.com/images/2014/07/03/ 25r12qw.jpg
Ghost Mode
You can use Ghoost Mode in every map. You cant shoot in ghost mode. Only you can kick players.
|
All times are GMT +1. The time now is 08:00.
|
|
![[Release] ElitePvpers Dark Mode](https://www.elitepvpers.com/forum/iconimages/main/release-elitepvpers-dark-mode_ltr.gif){kind=small}
