Ask HN: HNをダークモードで閲覧するには？

Ask HN: How can I browse HN in dark mode?

▲ 24herodoturtle35 HNでの議論

私は幼児が寝ている間にHacker Newsを閲覧したいのですが、画面の明るさがまぶしくて困っています。ダークモードでHNを閲覧する方法を教えてください。

Androidでは、Vivaldiがダークモードを標準でサポートしています。実際にはchromiumベースのブラウザにあるダークモードのトグルにすぎず、chrome://flags/#enable-force-darkでグローバルに有効にできます。よく推奨されるDark Readerは非常に遅く、特に古いハードウェアではそうです。この組み込みモードははるかに効率的で、大多数のページでうまく機能します。
https://hcker.news には複数のダークモードテーマがあります。
Chrome用のDark Reader拡張機能。
FirefoxのDarkreader拡張機能
私はFFでHN Enhance拡張機能を使っています。
原文を読む →RSS

HNでの議論

35
  1. Bender

    uBlock Origin -> マイフィルターに:

    # 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)

  2. farlight

    Androidでは、Vivaldiがダークモードを標準でサポートしています。実際には、Chromiumベースのブラウザに存在するダークモードのトグルにすぎませんが、どのブラウザでもchrome://flags/#enable-force-darkでグローバルに有効にできます。

    よく推奨されるDark Readerは非常に遅く、特に古いハードウェアでは顕著です。この組み込みモードははるかに効率的で、大多数のページでうまく機能します。

  3. 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);}})();

  4. 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;

    }

    /* Bright text */

    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;

    }

    /* search box and comment box */

    input, textarea {

    border: 1px solid #828282 !important;

    }

  5. Meneth

    設定 -> アクセシビリティの「色の上書き」を使って、いい感じのダークカラーを設定しました。

    次に、https://github.com/AlexVallat/firefox-scripts/ の userChrome.js を使って、ブラウザの設定「browser.display.use_system_colors」と「browser.display.document_color_use」を切り替えるボタンを追加しました。これで必要に応じて明るいモードにもアクセスできます。

この日のほかの記事

2026-09-13