Settings

Theme

When Dark Mode for HN?

9 points by sm001 3 years ago · 18 comments · 1 min read


When is Hacker News going to have an option for a dark mode. The bright screen is hurting my eyes today.

LinuxBender 3 years ago

I don't have an answer for your specific question but if you use Firefox and have the addon uBlock Origin [1] installed then you can adjust the colors

about:addons -> uBlock -> Preferences -> My Filters, then add

    ## HN Color
    news.ycombinator.com##html:style(background-color: #080808 !important)
    news.ycombinator.com###hnmain:style(background-color: #121216 !important)
    news.ycombinator.com##.age:style(color: #ccc !important)
    news.ycombinator.com##.c00:style(color: #ccc !important)
    news.ycombinator.com##.comhead > a:style(color: #dedede !important)
    news.ycombinator.com##.comhead:style(color: #dedede !important)
    news.ycombinator.com##.hnuser:style(color: #ccc !important)
    news.ycombinator.com##.subtext > a:link:style(color: #ccc !important)
    news.ycombinator.com##.subtext > a:style(color: #ccc !important)
    news.ycombinator.com##.subtext:style(color: #ccc !important)
    news.ycombinator.com##.title > a:style(color: ccc !important; background-color: #000000 !important)
    news.ycombinator.com##a:link:style(color: #bdbdbd !important)
    news.ycombinator.com##a:visited:style(color: #adadad !important)
    news.ycombinator.com##a:hover:style(color: #fd0000 !important; background-color: #000855 !important)
Then adjust it however you like it.

[1] - https://addons.mozilla.org/en-US/firefox/addon/ublock-origin...

pwg 3 years ago

> When is Hacker News going to have an option for a dark mode.

Browsers have the alternate name "user agents" for a reason, they are ultimately intended to be working for you, the user.

Therefore, simply adjust your "user agent" (browser) to give you a dark mode, and you will have a dark mode, without needing or waiting for HN to change anything.

The comment from @LinuxBender here shows you one way to do so using uBlock Origin.

satiric 3 years ago

Probably never. Sadly the folks at HN have proved over the years that they don't really care about making this site's ui functional. There's no reason I should have to permanently zoom in on this site or make custom CSS just to do work that they should have done years ago. I can do it, but that's not the point. Is the gain in "retro styling" really worth the drop in UX? Do the people at HN truly believe that it's perfect and everyone who doesn't like it is just wrong? Or is it just laziness, (i.e. it works and our core users aren't leaving the platform over it, so it's not worth working on).

I'd love to be proved wrong though.

SturgeonsLaw 3 years ago

https://userstyles.org/styles/browse/ycombinator

foobarbaz33 3 years ago

You can paste this snippet into the javascript console (ie F12). It's my 5 minute attempt at artsy dark colors. Code blocks are red as in Sith (star wars). And as a warning that code is dangerous.

    (function hackerNewsDarkMode() {
        let bg = '#35352B';
        let fg = '#EEEED1';

        let tables = document.getElementsByTagName('table');
        for (let i=0; i<tables.length; i += 1) {
            tables[i].style.backgroundColor = bg;
            tables[i].style.color = fg;
        }
        let codes = document.getElementsByTagName('code');
        for (let i=0; i<codes.length; i += 1) {
            codes[i].style.backgroundColor = '#300000';
            codes[i].style.color = '#FF0000';
        }
        let spans = document.getElementsByTagName('span');
        for (let i=0; i<spans.length; i += 1) {
            spans[i].style.backgroundColor = bg;
            spans[i].style.color = fg;
        }
        let a = document.getElementsByTagName('a');
        for (let i=0; i<a.length; i += 1) {
            a[i].style.backgroundColor = bg;
            a[i].style.color = '#66CDAA';
        }
        let divs = document.getElementsByTagName('div');
        for (let i=0; i<divs.length; i += 1) {
            divs[i].style.backgroundColor = bg;
            divs[i].style.color = '#FFC0CB';
        }
        let textAreas = document.getElementsByTagName('textarea');
        for (let i=0; i<textAreas.length; i += 1) {
            textAreas[i].style.backgroundColor = "#000000";
            textAreas[i].style.color = fg;
        }

        document.body.style.backgroundColor = '#000000';
        document.body.style.color = '#FFFFFF';
    }());
KomoD 3 years ago

I just use darkreader with a toggle

  • pprotas 3 years ago

    The Dark Reader extension is amazing. I use it on Chrome macOS and iOS Safari with no problems.

binchillin 3 years ago

No native dark mode is probably a feature to ensure you don't procrastinate a lot on the platform.

livinglist 3 years ago

Shameless plug: I have built a HN client app with true dark mode, feel free to give it a look.

loa_in_ 3 years ago

I can see dark mode on vanilla Android Chrome with no problems. Misconfigured browser or system theme perhaps?

https://i.imgur.com/3Ipp8oX.png

ninethirty 3 years ago

look great in kiwibrowser https://kiwibrowser.com/features/

morelinks 3 years ago

Dang said he’d do it at one point and then it was never done. I desperately want it for reading in bed (iOS). Some day…

  • runjake 3 years ago

    Settings - Accessibility - Display & Text Size - Smart Invert.

    If that’s too tedious for you: Settings - Control Center - add Accessibility Shortcuts, and follow the instructions to add Smart Invert.

    If that’s too tedious for you, go into Settings - Accessibility - Touch - enable Touch Accomodations and set double or triple tap to Smart Invert.

    You now have HN dark mode.

  • frou_dh 3 years ago

    Install this app (Safari extension): https://itunes.apple.com/us/app/userscripts/id1463298887

    Then you can write custom CSS (and JS) to tweak any site, and don't need to beg the webmaster.

soupbowl 3 years ago

Dark mode will be available shortly after ipv6 is enabled, just wait a few more years.

achairapart 3 years ago

If you don't mind the header color:

    html {filter:invert(.9) contrast(90%);}
  • testTED 3 years ago

    Similarly, most modern smartphones have an easily toggled Invert Colors filter near or adjacent to Accessibility.

    On Android, one can set this as a pulldown chip.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection