Hacker News Dark Theme Mode CSS code

hacker-news.css

/**
 * HackerNews better readability
 * Use any Browser extension that lets you add CSS code.
 * © XaviEsteve.com
 * https://gist.github.com/luckyshot/af6687f8ac3b0dc458818753dccbd412/
 * Last updated: 18 Dec 22
 */

/* Home */
html, body {
	background: #1C1917;
}
table {
	background: #1C1917 !important;
}
/*#hnmain > tbody > tr > td > table:first-child {*/
/*	background: #ff6600 !important;*/
/*}*/
tr.spacer {
	margin-top: 10px;
	display: block;
}

a:link,
a.storylink,
a.titlelink {
	color: #ff6600;
}
a.storylink:visited,
a.titlelink:visited  {
	color: #a75016 !important;
}
.c00, .c00 a:link{
	color: white !important;
}

textarea,
input,
button {
	background: #7C2D12 !important;
	border: none;
	color: #FFF7ED !important;
	font-family: sans-serif;
}
textarea {
	background: #12100f !important;
	padding: 2em 3em;
	width: 100%;
	height: 20em;
	line-height: 1.6;
	outline: none;
}
input[type=submit] {
	border-radius: 4px;
	padding: .5em 1em;
	background: #482417 !important;
}

/* Top navigation */
#hnmain > tbody > tr:nth-child(1) > td > table > tbody > tr > td:nth-child(1) > a > img,
.pagetop {
	padding-bottom: 10px;
	display: inline-block;
	border: none !important;
}
.pagetop,
.pagetop a,
.pagetop a:visited {
	color: #6d3510;
}

/* More link */
.morelink {
	background: #482417;
	color: #12100f;
	width: 100%;
	display: block;
	padding: 2em;
	text-align: center;
}

/* Post */
.fatitem .athing a.storylink {
	font-size: 32px;
}
.subtext {
	font-size: 12px;
	opacity: .5;
}
.fatitemtbody tr td {
	font-size: 16px;
	color: #fff;
	line-height: 1.6;
	max-width: 60em;
}
.titleline {
	font-size: 1.2rem;
}
.titleline,
.toptext,
.commtext {
	line-height: 1.6;
	font-size: 16px;
	color: orange !important;
}

/* Comments */
.comment-tree {
	max-width: 960px;
}
.comhead .hnuser {
	opacity: .8;
}
.commtext a:link {
	color: brown;
}
.commtext .reply a:link {
	color: #828282 !important;
}

.default {
	position: relative;
}
.togg {
	position: absolute;
	left: -40px;
	height: 100%;
	background: #222222;
	border-radius: 50px;
	color: transparent !important;
	font-size: 0;
	width: 16px;
}
.coll .togg {
	background: #444;
}
.hnuser {
	/*color: #ff6600 !important;*/
	font-size: 120%;
}


.quote {
	border-left: 3px solid orange;
	padding: 6px 6px 6px 9px;
	font-style: italic;
	background-color: rgba(125,125,125, 0.5);
}

hacker-news.js

/**
 * HackerNews better readability
 * Use any Browser extension that lets you add CSS code.
 * © XaviEsteve.com
 * https://gist.github.com/luckyshot/af6687f8ac3b0dc458818753dccbd412/
 * Last updated: 18 Dec 22
 */
 
 var stringToColour = function(str) {
  var hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  var colour = '#';
  for (var i = 0; i < 3; i++) {
    var value = (hash >> (i * 8)) & 0xFF;
    colour += ('00' + value.toString(16)).substr(-2);
  }
  return colour;
}

const opName = document.querySelector('.fatitem .hnuser').innerText;


document.querySelectorAll('.hnuser').forEach(function(e){
	if (e.innerText === opName){
		e.style.backgroundColor = 'white';
	}
	e.style.color = stringToColour(e.innerText);
});


// Quotes
// Credit: https://news.ycombinator.com/item?id=34037462
let node = null;
let nodes = [];
const ps = document.evaluate("//p[starts-with(., '>')]", document.body)
while (node = ps.iterateNext()) {
    nodes.push(node);
}
const spans = document.evaluate("//span[starts-with(., '>')]", document.body)
while (node = spans.iterateNext()) {
    nodes.push(node);
}
nodes.forEach((n) => {
    const textNode = Array.from(n.childNodes).find((n) => n.nodeType === Node.TEXT_NODE);
    if (textNode) {
        const p = document.createElement('p');
        p.classList.add('quote');
        p.innerText = textNode.data.replace(">", "");
        n.firstChild.replaceWith(p);
    } else {
        n.classList.add('quote');
        n.innerText = n.innerText.replace(">", "");
    }
});