https://chrome.google.com/webstore/detail/dark-reader/eimadp...
HN design has stayed mostly the same for years, I've been running this userstyle on it [1] for years without issue.
[1] https://github.com/Poorchop/userstyles/tree/master/HackerNew...
@-moz-document domain("news.ycombinator.com") {
* {
color: #93A1A1 !important;
background-color: #002b36 !important;
}
body > center > table > tbody > tr:first-child * {
background-color: #073642 !important;
}
body > center > table > tbody > tr:first-child * a:hover {
background: #002b36 !important;
}
code, pre, input, textarea {
background: #073642 !important;
}
a {
color: #2aa198 !important;
}
.subtext a {
color: #93A1A1 !important;
}
a:visited, a:visited span {
color: #b58900 !important;
}
a:hover, a:hover span {
background: #073642 !important;
}
}
Source: https://github.com/UserStyles/hacker-news-solarized-dark/blo...
@media (prefers-color-scheme: dark) { html { filter: invert(1) hue-rotate(180deg); } }
Just for an example, here is my userContent.css for highlighting the five languages that I use most frequently in Google Translate.
@-moz-document domain(translate.google.com) {
[data-language-code="ar"],[data-language-code="en"],[data-language-code="el"],[data-language-code="iw"],[data-language-code="ru"] {
background-color:#ddffdd !important;
}
}
Very good experience.
All the pages I open are in Night Mode, too, as opposed to Night Mode only on HN.
body, #hnmain {
background-color: #1f1f1f !important;
} .storylink, .commtext, .titlelink {
color: #d18741 !important;
font-size: 13pt;
} .storylink:hover {
text-decoration: underline;
} #hnmain > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) {
background-color: #363636;
border-radius: 3px;
padding: 3px;
} .spacer {
height: 30px !important;
} textarea {
background-color: #363636 !important;
border: 0;
border-radius: 3px;
} .togg {
font-size: 10pt;
color: white !important;
font-weight: bold;
} .subtext > span, .subtext > a, .subtext, .subtext > span > a, .sitebit, .sitebit > a {
color: #4d4d4d !important;
} .subtext > a:nth-child(7) {
color: white !important;
font-size: 11pt;
}
javascript:document.querySelectorAll('*').forEach(e=%3Ee.setAttribute('style','background-color:%23222;background-image:none;color:%23'+(/%5EA%7CBU/.test(e.tagName)?'36c;text-decoration:underline;':'eee;')+e.getAttribute('style')))