Quote from: coinlary on July 27, 2025, 08:56:53 PM

I will suggest turning it off when the user is outside the forum or trying to enter any sensitive info. i use darkmode too but my browser allows dark mode and i don't trust extensions because of the exact permission i have to give it

I sometimes use a userscript with Tampermonkey because I'm not a big fan of the extension mentioned, as it simply doesn't work as it should in some ways, or the Darkmode isn't set up properly.

I'm sharing the userscript for anyone who might be interested.

Code:

// ==UserScript==
// @name Bitcointalk Dark
// @namespace bitcointalk-dark
// @version 3.17
// @description Dark theme for Bitcointalk
// @author mcdouglasx
// @match https://bitcointalk.org/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==

(function() {
const cssVariables = `
:root {
--dark-background: #1A1A1A;
--medium-background: #252525;
--light-background: #2f2f2f;
--border-color: #404040;
--text-color: #e0e0e0;
--secondary-text-color: #bbbbbb;
--link-color: #6A97D9;
--link-hover-color: #8CB0E6;
--button-color: #3E6F9F;
--button-hover-color: #5A8ABA;
--input-background: #333333;
--input-text-color: #eeeeee;
--avatar-background: #ffffff;
--avatar-border: #dddddd;
--post-background: #181818;
--post-alternate-background: #2C2C2C;
--banner-background: #181818;
--banner-text-color: #f0f0f0;
--tab-background: #2a2a2a;
--active-tab: #004488;
--dark-text-background: #3a3a3a;
--moderator-color: #FFCCCC;
--trust-good: #66CC66;
--trust-neutral: #DDDD99;
--trust-bad: #FF6666;
}
`;

const mainStyles = `
html, body, .tborder {
background-color: var(--dark-background) !important;
color: var(--text-color) !important;
border-color: var(--border-color) !important;
}
tbody {
background-color: var(--dark-background) !important;
color: var(--text-color) !important;
}
.tborder {
border: 1px solid var(--border-color) !important;
}
.tborder table, .tborder tr, .tborder td {
background-color: var(--dark-background) !important;
border-color: var(--border-color) !important;
}
.catbg, .catbg2, .catbg3 {
background: none !important;
background-color: var(--light-background) !important;
color: #ffffff !important;
border-color: var(--border-color) !important;
background-image: none !important;
}
tr.catbg td {
background: none !important;
background-color: var(--light-background) !important;
color: #ffffff !important;
}
div.bordercolor table tr.catbg td {
background: none !important;
background-color: var(--light-background) !important;
color: #ffffff !important;
}
tr.catbg3 td {
background: none !important;
background-color: var(--light-background) !important;
color: #ffffff !important;
border-color: var(--border-color) !important;
}

table.tborder tr.windowbg {
background-color: var(--post-background) !important;
color: var(--text-color) !important;
}
table.tborder tr.windowbg2 {
background-color: var(--post-alternate-background) !important;
color: var(--text-color) !important;
}

table.tborder tr.windowbg td.td_headerandpost {
background-color: var(--post-background) !important;
}
table.tborder tr.windowbg2 td.td_headerandpost {
background-color: var(--post-alternate-background) !important;
}

table.tborder tr.windowbg td.poster_info {
background-color: var(--post-background) !important;
}
table.tborder tr.windowbg2 td.poster_info {
background-color: var(--post-alternate-background) !important;
}

td.windowbg {
background-color: var(--post-background) !important;
color: var(--text-color) !important;
border-color: var(--border-color) !important;
}
td.windowbg2 {
background-color: var(--post-alternate-background) !important;
color: var(--text-color) !important;
border-color: var(--border-color) !important;
}

.tborder .titlebg, .tborder .titlebg2 {
background-color: var(--light-background) !important;
color: #ffffff !important;
border-color: var(--border-color) !important;
background-image: none !important;
}
.moderator {
color: var(--moderator-color) !important;
font-weight: bold !important;
background-color: transparent !important;
}
.catbg a[href*="action=moderate"], .catbg b {
color: var(--text-color) !important;
font-weight: normal !important;
}
.nav, .nav b {
color: var(--text-color) !important;
}
.nav a.nav {
color: var(--link-color) !important;
}
.nav a.nav:hover {
color: var(--link-hover-color) !important;
}
.nav span {
color: var(--text-color) !important;
}
.windowbg3 {
background-color: var(--dark-background) !important;
color: var(--text-color) !important;
}
.catbg3 #top_subject {
color: var(--text-color) !important;
font-weight: bold !important;
font-size: 1.1em !important;
}
#bodyarea {
background-color: var(--dark-background) !important;
}
#bodyarea table.bordercolor {
background-color: var(--medium-background) !important;
border-color: var(--border-color) !important;
}
.titlebg, .titlebg2,
tr.titlebg td, tr.titlebg2 td,
td.titlebg, td.titlebg2 {
background-color: var(--light-background) !important;
color: #ffffff !important;
border-color: var(--border-color) !important;
background-image: none !important;
background: none !important;
}
#bodyarea td[width="180"] table.bordercolor {
background-color: var(--medium-background) !important;
border-color: var(--border-color) !important;
}
#bodyarea td[width="180"] table.bordercolor td.catbg {
background-color: var(--light-background) !important;
color: #ffffff !important;
border-color: var(--border-color) !important;
background-image: none !important;
background: none !important;
}
#bodyarea td[width="180"] table.bordercolor tr.windowbg2 td.smalltext {
background-color: var(--post-alternate-background) !important;
color: var(--text-color) !important;
}
#bodyarea td[width="180"] table.bordercolor tr.windowbg2 td.smalltext a {
color: var(--link-color) !important;
}
#bodyarea td[width="180"] table.bordercolor tr.windowbg2 td.smalltext a:hover {
color: var(--link-hover-color) !important;
}
table.bordercolor td.catbg {
background-color: var(--light-background) !important;
color: #ffffff !important;
border-color: var(--border-color) !important;
}
#smfheader {
background-color: var(--banner-background) !important;
border-bottom: 1px solid var(--border-color) !important;
background-image: none !important;
}
#smfheader td.catbg {
background: none !important;
background-color: var(--banner-background) !important;
color: var(--banner-text-color) !important;
}
#smfheader img {
filter: brightness(0.7) contrast(1.2) grayscale(0.2) !important;
opacity: 0.9 !important;
}
#upshrinkHeader, #upshrinkHeaderIC {
background-color: var(--medium-background) !important;
}
#upshrinkHeader2 {
background-color: var(--medium-background) !important;
color: var(--banner-text-color) !important;
border-color: var(--border-color) !important;
}
#upshrinkHeader2 td.titlebg2 {
background-color: var(--medium-background) !important;
color: var(--banner-text-color) !important;
background-image: none !important;
background: none !important;
border-color: var(--border-color) !important;
}
#footerarea {
background-color: var(--dark-background) !important;
color: var(--secondary-text-color) !important;
border-top: 1px solid var(--border-color) !important;
}
.maintab_back, .maintab_first, .maintab_last, .mirrortab_back, .mirrortab_first, .mirrortab_last {
background-color: var(--tab-background) !important;
background-image: none !important;
border-color: var(--border-color) !important;
color: var(--text-color) !important;
}
.maintab_active_back, .maintab_active_first, .maintab_active_last {
background-color: var(--active-tab) !important;
background-image: none !important;
border-color: var(--border-color) !important;
color: #ffffff !important;
}
.maintab_back a, .maintab_active_back a, .mirrortab_back a, .mirrortab_first a, .mirrortab_last a, .maintab_active_first a, .maintab_active_last a {
color: inherit !important;
}
.maintab_back a:hover, .mirrortab_back a:hover {
color: var(--link-hover-color) !important;
}
a, a:visited, .smalltext, .middletext, .normaltext, .largetext {
color: var(--link-color) !important;
}
a:hover {
color: var(--link-hover-color) !important;
}
body, .smalltext, .middletext, .normaltext, .largetext, td {
color: var(--text-color) !important;
}
.subject a {
color: var(--link-color) !important;
font-weight: bold !important;
}
.subject a:hover {
color: var(--link-hover-color) !important;
}
.bordercolor, table, tr, td, .tborder table, .tborder tr, .tborder td {
border-color: var(--border-color) !important;
}
hr, .hrcolor {
border-top: 1px solid var(--border-color) !important;
background-color: transparent !important;
height: 1px !important;
}
input, select, textarea {
background-color: var(--input-background) !important;
color: var(--input-text-color) !important;
border: 1px solid var(--border-color) !important;
border-radius: 4px;
}
input[type="submit"], input[type="button"], .button_submit {
background-color: var(--button-color) !important;
color: #ffffff !important;
border: 1px solid var(--button-color) !important;
cursor: pointer;
padding: 6px 12px;
border-radius: 4px;
transition: background-color 0.2s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, .button_submit:hover {
background-color: var(--button-hover-color) !important;
border-color: var(--button-hover-color) !important;
}
img {
opacity: 0.9;
filter: brightness(0.9);
}
img:hover {
opacity: 1;
filter: brightness(1);
}
.messageicon {
filter: invert(0.9) brightness(0.9);
}
img.avatar {
background-color: var(--avatar-background) !important;
border: 1px solid var(--avatar-border) !important;
padding: 2px !important;
border-radius: 4px !important;
filter: none !important;
opacity: 1 !important;
}
table.tborder {
border-collapse: separate !important;
border-spacing: 0 !important;
table-layout: fixed !important;
width: 100% !important;
}
table.tborder td.poster_info {
border-right: 1px solid var(--border-color) !important;
border-bottom-color: var(--avatar-border) !important;
box-sizing: border-box;
width: 16% !important;
vertical-align: top;
min-width: 100px !important;
color: var(--secondary-text-color) !important;
}
.poster_info .smalltext,
.poster_info span.membergroup,
.poster_info .profile_text,
.poster_info > font,
.poster_info > span,
.poster_info > b,
.poster_info > i {
color: var(--text-color) !important;
}
#profile_content .normaltext,
#profile_content .smalltext,
#profile_content table.tborder td,
#profile_content td.profilebg,
#profile_content td.profilebg .normaltext,
#profile_content td.profilebg .smalltext {
color: var(--text-color) !important;
}
#profile_content td span.trustscore {
color: #FFFFFF !important;
background-color: transparent !important;
}
#profile_content td span.trustscore b {
color: #FFFFFF !important;
}

.poster_info .smalltext span,
.poster_info .smalltext font,
#profile_content .smalltext span,
#profile_content .smalltext font {
color: var(--text-color) !important;
}
.trust_good {
color: var(--trust-good) !important;
}
.trust_neutral {
color: var(--trust-neutral) !important;
}
.trust_bad {
color: var(--trust-bad) !important;
}
#profile_content .trust_good {
color: var(--trust-good) !important;
}
#profile_content .trust_neutral {
color: var(--trust-neutral) !important;
}
#profile_content .trust_bad {
color: var(--trust-bad) !important;
}
td.td_headerandpost {
border-bottom-color: var(--avatar-border) !important;
border-right-color: var(--avatar-border) !important;
border-left: none !important;
width: auto !important;
min-width: 1px !important;
box-sizing: border-box;
overflow-x: hidden !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: normal !important;
white-space: normal !important;
padding: 15px 8px 15px 8px !important;
vertical-align: top !important;
}
table.tborder td.poster_info img {
filter: none !important;
opacity: 1 !important;
}
.quoteheader {
background-color: var(--light-background) !important;
color: var(--secondary-text-color) !important;
border-bottom: 1px solid var(--border-color) !important;
padding: 4px 8px !important;
font-weight: bold;
}
.quote {
background-color: var(--medium-background) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-color) !important;
padding: 8px !important;
margin: 0px !important;
margin-bottom: 10px !important;
border-radius: 0px !important;
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: normal !important;
white-space: normal !important;
overflow-x: hidden !important;
line-height: 1.5 !important;
}
.codeheader {
background-color: var(--light-background) !important;
color: var(--secondary-text-color) !important;
border-bottom: 1px solid var(--border-color) !important;
padding: 4px 8px !important;
font-weight: bold;
}
.code {
background-color: #2b2b2b !important;
border: 1px solid var(--border-color) !important;
color: #a9b7c6 !important;
padding: 8px !important;
margin-bottom: 10px !important;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
overflow-x: auto !important;
word-wrap: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
white-space: pre !important;
border-radius: 4px;
}
.poster_info {
color: var(--secondary-text-color) !important;
}
.poster_info a {
color: var(--link-color) !important;
}
.post {
color: var(--text-color) !important;
background-color: transparent !important;
padding: 0px !important;
border-radius: 4px;
box-sizing: border-box !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: normal !important;
white-space: normal !important;
}
.td_headerandpost {
color: var(--text-color) !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: normal !important;
white-space: normal !important;
overflow-x: hidden !important;
min-width: 1px !important;
box-sizing: border-box !important;
padding: 15px 8px 15px 8px !important;
vertical-align: top !important;
}
table.tborder tr.windowbg td, table.tborder tr.windowbg2 td, table.tborder tr.windowbg3 td {
border-color: var(--border-color) !important;
}
.pagelinks {
background-color: var(--medium-background) !important;
border: 1px solid var(--border-color) !important;
padding: 5px 10px !important;
margin-top: 10px !important;
border-radius: 4px;
color: var(--text-color) !important;
}
.pagelinks a {
color: var(--link-color) !important;
padding: 2px 5px;
text-decoration: none;
}
.pagelinks a:hover {
background-color: var(--light-background) !important;
color: var(--link-hover-color) !important;
border-radius: 3px;
}
.pagelinks strong {
background-color: var(--button-color) !important;
color: #ffffff !important;
padding: 2px 5px;
border-radius: 3px;
}
.error, .success, .warning {
background-color: #3d2d2d !important;
color: #ff9999 !important;
border: 1px solid #663333 !important;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
}
.success {
background-color: #2d3d2d !important;
color: #99ff99 !important;
border-color: #336633 !important;
}
.warning {
background-color: #3d3d2d !important;
color: #ffff99 !important;
border-color: #666633 !important;
}
.dropmenu {
background-color: var(--light-background) !important;
border: 1px solid var(--border-color) !important;
border-radius: 4px;
}
.dropmenu ul li a {
color: var(--text-color) !important;
}
.dropmenu ul li a:hover {
background-color: var(--medium-background) !important;
color: var(--link-hover-color) !important;
}
#footerarea span.smalltext {
color: var(--secondary-text-color) !important;
}
.img_normal, .img_new, .img_locked, .img_sticky, .img_announcement {
filter: invert(0.8) brightness(0.9);
}
td.windowbg[width="20"][valign="middle"][align="center"] {
background-color: var(--post-background) !important;
}
td.windowbg2[width="100%"][colspan="2"] {
background-color: var(--post-alternate-background) !important;
}
table.bordercolor tr.windowbg td[width="48%"],
table.bordercolor tr.windowbg2 td[width="14%"],
table.bordercolor tr.windowbg2 td[width="5%"] {
background-color: inherit !important;
}

body.profile #bodyarea table.tborder > tbody > tr > td[width]:not([width="180"]) {
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
padding: 0 !important;
}
body.profile #profile_content {
width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
body.profile #profile_content table {
width: 100% !important;
table-layout: auto !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.profile td.windowbg[colspan="2"] {
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
padding: 8px !important;
overflow-x: hidden !important;
}
body.profile .signature {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
body.profile .signature-wrapper {
border: 1px dashed var(--border-color) !important;
padding: 5px !important;
margin: 10px auto !important;
box-sizing: border-box !important;
max-width: calc(100% - 20px) !important;
display: block !important;
}
body.profile .signature-wrapper > div[style*="inline-block"] {
max-width: 100% !important;
overflow-x: hidden !important;
}
`;

GM_addStyle(cssVariables + mainStyles);

function isolateSignatures() {
const signatures = document.querySelectorAll('.signature');

signatures.forEach(signature => {
if (signature.classList.contains('processed')) return;
signature.classList.add('processed');

const parentTd = signature.closest('td');
if (parentTd) {
parentTd.style.padding = '0';
parentTd.style.margin = '0';
}

const container = document.createElement('div');
container.style.display = 'inline-block';
container.style.marginTop = '0px';
container.style.maxWidth = '100%';
container.style.overflowX = 'hidden';

const clone = signature.cloneNode(true);

const shadow = container.attachShadow({ mode: 'open' });

const style = document.createElement('style');
style.textContent = `
:host {
display: block !important;
text-align: center !important;
max-width: 100% !important;
overflow-x: hidden !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
img {
max-width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
}
a {
text-decoration: none !important;
}
a:hover {
text-decoration: underline !important;
}
table {
border-collapse: collapse !important;
width: auto !important;
max-width: 100% !important;
margin: 0 auto !important;
table-layout: auto !important;
}
td {
padding: 3px !important;
vertical-align: top !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
span, font, div {
display: inline-block;
max-width: 100%;
box-sizing: border-box;
}
p {
margin: 0 !important;
padding: 0 !important;
}
`;

shadow.appendChild(style);
shadow.appendChild(clone);

const wrapperForCentering = document.createElement('div');
wrapperForCentering.classList.add('signature-wrapper');
wrapperForCentering.style.textAlign = 'center';
wrapperForCentering.style.width = '100%';
wrapperForCentering.appendChild(container);

signature.parentNode.replaceChild(wrapperForCentering, signature);
});
}

function applyTrustColorFix() {
const profileContent = document.getElementById('profile_content');
if (profileContent) {
const trustSpan = profileContent.querySelector('span.trustscore');
if (trustSpan) {
trustSpan.style.setProperty('color', '#FFFFFF', 'important');
trustSpan.style.backgroundColor = 'transparent';
const boldElement = trustSpan.querySelector('b');
if (boldElement) {
boldElement.style.setProperty('color', '#FFFFFF', 'important');
}
}

const trustTd = profileContent.querySelector('td[width="50%"][valign="middle"][align="left"]');
if (trustTd && trustTd.firstChild && trustTd.firstChild.nodeType === Node.TEXT_NODE && trustTd.firstChild.nodeValue.includes('Trust:')) {
trustTd.style.setProperty('color', '#FFFFFF', 'important');
}
}
}

function setupProfileContentObserver() {
const profileContent = document.getElementById('profile_content');
if (profileContent) {
const observer = new MutationObserver(mutations => {
let signatureMutated = false;
let trustScoreMutated = false;

for (const mutation of mutations) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
for (const node of mutation.addedNodes) {
if (node.nodeType === 1) {
if (node.classList.contains('signature') || node.querySelector('.signature')) {
signatureMutated = true;
}
if (node.matches('span.trustscore') || node.querySelector('span.trustscore')) {
trustScoreMutated = true;
}
}
}
} else if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
if (mutation.target.matches('span.trustscore')) {
trustScoreMutated = true;
}
}
}

if (signatureMutated) {
isolateSignatures();
}
if (trustScoreMutated) {
applyTrustColorFix();
}
});

observer.observe(profileContent, {
attributes: true,
childList: true,
subtree: true
});
}
}

function setupBodyObserver() {
const bodyObserver = new MutationObserver((mutations, observer) => {
const profileContent = document.getElementById('profile_content');
if (profileContent) {
applyTrustColorFix();
isolateSignatures();
setupProfileContentObserver();
observer.disconnect();
}
});

bodyObserver.observe(document.body, { childList: true, subtree: true });
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
applyTrustColorFix();
isolateSignatures();
setupProfileContentObserver();
});
} else {
applyTrustColorFix();
isolateSignatures();
setupProfileContentObserver();
}

setupBodyObserver();
})();