TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Ask HN: My annual plea for dark mode

115 pointsby omotabout 3 years ago
Please HN, please add a dark mode setting tied to my profile.

18 comments

halotropeabout 3 years ago
Did you try &quot;Dark Reader&quot;? It solved these issues for me on Linux&#x2F;Chrome and iOS. Apart from having a rather smart automatic dark mode you can also do a &quot;black&quot; mode which is great for Oled displays as it replaces tinted or dark gray backgrounds with true black.<p><a href="https:&#x2F;&#x2F;chrome.google.com&#x2F;webstore&#x2F;detail&#x2F;dark-reader&#x2F;eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en" rel="nofollow">https:&#x2F;&#x2F;chrome.google.com&#x2F;webstore&#x2F;detail&#x2F;dark-reader&#x2F;eimadp...</a>
评论 #31153772 未加载
评论 #31154056 未加载
评论 #31154709 未加载
评论 #31156656 未加载
评论 #31153470 未加载
评论 #31156851 未加载
评论 #31157275 未加载
NKosmatosabout 3 years ago
Please add a dark mode under user settings. We read HN on different devices, with different browsers and under different OSes, having a central&#x2F;official way to do this would be highly appreciated. There is a user setting for topcolor in our profile, why not another one for bgcolor?
djhworldabout 3 years ago
I think this is a solved problem with user styles.<p>HN design has stayed mostly the same for years, I&#x27;ve been running this userstyle on it [1] for years without issue.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;Poorchop&#x2F;userstyles&#x2F;tree&#x2F;master&#x2F;HackerNews-Dark" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Poorchop&#x2F;userstyles&#x2F;tree&#x2F;master&#x2F;HackerNew...</a>
评论 #31154363 未加载
评论 #31169148 未加载
phoe-krkabout 3 years ago
<p><pre><code> @-moz-document domain(&quot;news.ycombinator.com&quot;) { * { color: #93A1A1 !important; background-color: #002b36 !important; } body &gt; center &gt; table &gt; tbody &gt; tr:first-child * { background-color: #073642 !important; } body &gt; center &gt; table &gt; tbody &gt; 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; } } </code></pre> Source: <a href="https:&#x2F;&#x2F;github.com&#x2F;UserStyles&#x2F;hacker-news-solarized-dark&#x2F;blob&#x2F;master&#x2F;user-style.css" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;UserStyles&#x2F;hacker-news-solarized-dark&#x2F;blo...</a>
ghoulishlyabout 3 years ago
I see others are offering reasonable user style solutions and I raise you my irresponsible, over-the-top solution:<p>@media (prefers-color-scheme: dark) { html { filter: invert(1) hue-rotate(180deg); } }
评论 #31153631 未加载
评论 #31153570 未加载
dotancohenabout 3 years ago
HN has terrifically simply markup, your user agent should be able to display it however you would like with relatively little configuration. What user agent are you using? All the popular ones that I&#x27;m familiar with (Firefox, Chrome derivatives) have addons or plugins for changing the appearance of websites. In Firefox you can even add rules to userContent.css without an addon.<p>Just for an example, here is my userContent.css for highlighting the five languages that I use most frequently in Google Translate.<p><pre><code> @-moz-document domain(translate.google.com) { [data-language-code=&quot;ar&quot;],[data-language-code=&quot;en&quot;],[data-language-code=&quot;el&quot;],[data-language-code=&quot;iw&quot;],[data-language-code=&quot;ru&quot;] { background-color:#ddffdd !important; } }</code></pre>
rg111about 3 years ago
I just use forced Night Mode offered by browsers like Brave and Bromite on Android and Dark Reader on Firefox.<p>Very good experience.<p>All the pages I open are in Night Mode, too, as opposed to Night Mode only on HN.
cpachabout 3 years ago
Please consider sending an email to the admins, hn@ycombinator.com
user3939382about 3 years ago
Here&#x27;s my stylesheet for HN which gives you this <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;GePXPMC.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;GePXPMC.png</a><p><pre><code> body, #hnmain { background-color: #1f1f1f !important;</code></pre> }<p><pre><code> .storylink, .commtext, .titlelink { color: #d18741 !important; font-size: 13pt;</code></pre> }<p><pre><code> .storylink:hover { text-decoration: underline;</code></pre> }<p><pre><code> #hnmain &gt; tbody:nth-child(1) &gt; tr:nth-child(1) &gt; td:nth-child(1) { background-color: #363636; border-radius: 3px; padding: 3px;</code></pre> }<p><pre><code> .spacer { height: 30px !important;</code></pre> }<p><pre><code> textarea { background-color: #363636 !important; border: 0; border-radius: 3px;</code></pre> }<p><pre><code> .togg { font-size: 10pt; color: white !important; font-weight: bold;</code></pre> }<p><pre><code> .subtext &gt; span, .subtext &gt; a, .subtext, .subtext &gt; span &gt; a, .sitebit, .sitebit &gt; a { color: #4d4d4d !important;</code></pre> }<p><pre><code> .subtext &gt; a:nth-child(7) { color: white !important; font-size: 11pt; }</code></pre>
carrolldunhamabout 3 years ago
On windows 10 I turned on the invert colors shortcut key (in the &#x27;color filters&#x27; setting page) which is ctrl+Win+c, for a quick fix for anything blowing out the my eyes. That it&#x27;s instantaneously, one-handedly on or off makes the short term inversion of the tab bar etc feel ok. Most fonts surprisingly look just as good flipped but... the hn one is not a good example
评论 #31154762 未加载
andrekandreabout 3 years ago
i use a bookmarklet for darkmode<p><pre><code> javascript:document.querySelectorAll(&#x27;*&#x27;).forEach(e=%3Ee.setAttribute(&#x27;style&#x27;,&#x27;background-color:%23222;background-image:none;color:%23&#x27;+(&#x2F;%5EA%7CBU&#x2F;.test(e.tagName)?&#x27;36c;text-decoration:underline;&#x27;:&#x27;eee;&#x27;)+e.getAttribute(&#x27;style&#x27;)))</code></pre>
Gravitylossabout 3 years ago
It used to be possible to invert OSX colors with a keyboard shortcut like cmd-ctrl-8 but it&#x27;s not on by default anymore (still possible to enable it from the keyboard shortcut settings).
评论 #31153402 未加载
thinkpad13about 3 years ago
while you waiting what did you use currently? have you tried darkreader?
评论 #31153299 未加载
评论 #31153374 未加载
steve_taylorabout 3 years ago
Every major browser supports the prefers-color-scheme media query and has done so for a number of years. It really isn’t acceptable anymore to present a style that disrespects this setting.
lm28469about 3 years ago
There are already many ways to get that: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=27329809" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=27329809</a>
评论 #31152491 未加载
mdp2021about 3 years ago
Don&#x27;t you use in general a `xcalib -a -i` (invert colours) shortcut, or equivalent?
JoeyBananasabout 3 years ago
You could accomplish this yourself with a browser add-on.
ybbondabout 3 years ago
an alternative, using third party application (Hack on iOS and macOS) is my ninja way