深夜带娃刷 HN，如何开启护眼暗色模式？
Ask HN: How can I browse HN in dark mode?
我的孩子正睡在我怀里，屏幕的强光让我睁不开眼。作为一个新手父母，我急需知道如何在浏览 Hacker News 时开启暗色模式，以保护视力并避免吵醒宝宝。
在 Android 上，Vivaldi 浏览器原生支持暗色模式。其实这是所有 Chromium 内核浏览器的内置功能，只需在 chrome://flags/#enable-force-dark 中全局开启即可。相比常被推荐的 Dark Reader，这种原生模式效率更高，尤其在老旧设备上表现更好。
推荐访问 hcker.news，这个第三方站点提供了多种暗色主题，可以直接切换使用。
Chrome 浏览器用户可以直接安装 Dark Reader 扩展程序来实现暗色模式。
Firefox 用户同样可以使用 Darkreader 扩展来开启暗色模式。
我在 Firefox 中使用 HN Enhance 扩展，它也能很好地解决暗色模式的需求。
HN 评论区
35- Bender
在 uBlock Origin -> My Filters 中：
# HN 暗色模式：
news.ycombinator.com##body:style(background: black)
news.ycombinator.com##td:style(color: #fafafa !important)
news.ycombinator.com##table:style(background-color: #24273a)
news.ycombinator.com##div.toptext:style(color: #fafafa)
news.ycombinator.com##div.c00:style(color: #fafafa !important)
news.ycombinator.com##a:style(color: #ffa000 !important)
news.ycombinator.com##span#karma:style(color: #faa000 !important)
news.ycombinator.com##span.pagetop:style(color: #fafafa !important)
news.ycombinator.com##textarea:style(color: #696969 !important; background: inherit; )
news.ycombinator.com###hnmain:style(background: #24273a !important)
- farlight
在 Android 上，Vivaldi 原生支持暗色模式。这实际上只是 Chromium 内核浏览器通用的暗色模式开关，你可以在任何基于 Chromium 的浏览器中通过 chrome://flags/#enable-force-dark 全局启用它。
Dark Reader 经常被推荐，但它非常慢，尤其是在老旧硬件上。这个内置模式效率高得多，在绝大多数页面上都能正常工作。
- WithinReason
将此内容保存为书签，点击即可让任何网站变暗：
javascript:(function(){const id='_dark_mode_bm';const el=document.getElementById(id);if(el){el.remove();}else{const s=document.createElement('style');s.id=id;s.textContent='html{filter:invert(1) hue-rotate(180deg)!important;background:#fff!important;}img,video,canvas,picture,svg{filter:invert(1) hue-rotate(180deg)!important;}';document.head.appendChild(s);}})();
更快的版本：
javascript:(function(){const id='_dark_perf_bm';const el=document.getElementById(id);if(el){el.remove();}else{const s=document.createElement('style');s.id=id;s.textContent=':root{color-scheme:dark!important;}html,body{background-color:#141414!important;color:#dcdcdc!important;}div,section,article,nav,header,footer,aside,main,table,tr,td,th,ul,ol,li{background-color:#18191a!important;color:#dcdcdc!important;border-color:#383838!important;}p,span,h1,h2,h3,h4,h5,h6,b,strong,i,em{color:inherit!important;}a,a%20*{color:#58a6ff!important;}pre,code,kbd{background-color:#202224!important;color:#ff9857!important;}input,textarea,select,button{background-color:#262626!important;color:#fff!important;border:1px%20solid%20#444!important;}img,video,canvas,picture{background-color:transparent!important;}';document.head.appendChild(s);}})();
- accrual
我正在使用 Stylus 和这个主题：
body {
background-color: #262626 !important;
}
body > center > table, input, textarea {
background-color: #222 !important;
}
body > center > table > tbody > tr:first-child > td {
background-color: #ff6600 !important;
}
/* 亮色文字 */
td.title a:link, span.comment font, span.comment font a:link, u a:link, span.yclinks a:link, body:not([id]),
td:nth-child(2):not(.subtext) > a:link, input, textarea, p > a, a > u, .c00, .c00 a:link,
a[href="http://www.ycombinator.com/apply/"], a[href="https://www.ycombinator.com/apply/"] {
color: #ccc !important;
}
.admin td {
color: #aaa !important;
}
/* 搜索框和评论框 */
input, textarea {
border: 1px solid #828282 !important;
}
- Meneth
我在 设置 -> 辅助功能 下使用了“覆盖颜色”来设置漂亮的暗色。
然后我使用了来自 https://github.com/AlexVallat/firefox-scripts/ 的 userChrome.js 添加了一个按钮，用于切换浏览器偏好设置 "browser.display.use_system_colors" 和 "browser.display.document_color_use"，这样如果需要的我仍然可以访问亮色模式。