How can I browse HN in dark mode?

Join the discussion

• Hacker News
• https://uso.kkx.one/style/92693

  Use it with Stylus

  by viccis
• The suggestion has been brought up and dang has commented on it over the years. He doesn't seem opposed to it per se. It's possible your descendants may live to see dark-mode HN:

  https://news.ycombinator.com/item?id=23199062

  See also:

  dang + "dark mode": https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...

  dang + "on the list" (lol): https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...

  by Rendello
• I used "Override colors" under Settings -> Accessibility to set nice dark colors.

  Then I used userChrome.js from https://github.com/AlexVallat/firefox-scripts/ to add a button which toggles the browser preferences "browser.display.use_system_colors" and "browser.display.document_color_use", so I can still access bright mode if needed.

  by Meneth
• Save this in a bookmarklet and click it to turn any website dark:

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

  faster version:

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

  by WithinReason
• If you're on one of the betas for about-to-be-released apple OS’s, there's a new describe an extension functionality and building a dark mode for HN is exactly what I just used it to do. Super easy, and synced across all my devices.

  I know this sounds like an ad, but I was pretty impressed with it

  by robgough
• I am using Stylus and this theme:

      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;
      }

  by accrual
• On Android, Vivaldi supports dark more out of the box. It's actually just a toggle for the dark mode present on any chromium-based browser, and you can enable it globally in any of them in chrome://flags/#enable-force-dark

  Dark Reader, often recommended, is very slow, especially on old hardware. This built-in mode is much more efficient and works well on vast majority of pages.

  by farlight
• In uBlock Origin -> My Filters:

      # HN dark Mode:
      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)

  by Bender