Why doesn't HN have a dark-theme?

18 points by sirolimus ↗ HN
I’m currently using DarkReader, but whenever I’m scrolling HN before bed I feel like I’m pointing a flashlight at my face.

24 comments

[ 4.1 ms ] story [ 64.8 ms ] thread
Did no one take them up on the offer? There's several HN dark themes out there.
We can add CSS to https://news.ycombinator.com/news.css for prefers-color-scheme: dark, but that leaves open the question of specifically what css to put in there. Anyone who wants to make a suggestion is welcome to

Obviously the text from `user_profile.custom_css`. Users then will test and share their CSS in a (past)-able threads. We don’t even need prefer-*, just make a user css textbox and cat it after hn.css.

why don't you have a dark mode extension?
This has been asked several times in the past.

> whenever I’m scrolling HN before bed I feel like I’m pointing a flashlight at my face

Maybe don't scroll through HN before bed? You might sleep better :-)

(comment deleted)
I believe this is hacker news...
I am also using DarkReader and don't have this problem on HN (but have on others). Using Windows so there is a night light setting you can enable to help and there is also the brightness settings of course on your monitor
I added some lines to my uBO custom filters and fixed this, thanks to some comment in a prior discussion about this.

I do wonder why light mode is the default though, since historically computers had bright characters on black screens, and this is supposed to be "hacker news". It wasn't until the 90s when white backgrounds became normalized. Even though many users may not be old enough to remember the days of using MS-DOS, "dark mode" is generally quite popular among techies. I really wonder what a poll would show here.

Do you mind sharing your uBO lines please?
(comment deleted)
Try this: (sorry, HN's suggestion to post code after a blank line that is indented by two or more spaces doesn't work)

    !news.ycombinator.com (Hacker News)
    news.ycombinator.com##body:style(color: #CCCCCC !important; background-color: #1A1A1A !important; )
    news.ycombinator.com##table:style(background-color: #2B2B2B !important; )
    news.ycombinator.com##input:style(background-color: #DFDFDF !important; )
    news.ycombinator.com##table, tr, td, .pagetop, .score:style(color: #CCCCCC !important; )
    news.ycombinator.com##td:style(border: 1px solid #2B2B2B !important; background-color: #2B2B2B !important; )
    news.ycombinator.com##b:style(color: inherit !important; )
    news.ycombinator.com##a, .c00:style(color: #eee !important; )
    news.ycombinator.com##.c00 a:style(color: rgb(49, 140, 212) !important; )
    news.ycombinator.com##.comhead, .subtext:style(color: #828282 !important; )
    news.ycombinator.com##.comhead > a, .subtext > a:style(color: orange !important; )
    news.ycombinator.com##.comhead font:style(color: #5a5a5a !important )
    news.ycombinator.com##.c5a, .c88, .c9c:style(color: #999 !important; )
    news.ycombinator.com##input:style(color: black !important; )
    news.ycombinator.com##textarea:style(background-color: #C0C0C0 !important; border-left: 12px solid #AAAAAA !important; )
    news.ycombinator.com##font[color="#000000"]:style(color: #a3b72c !important;
The technique is to add a blank line AND start every "code line" with FOUR spaces

    Like so
        indented
    Back to origin
        Every line with four intial space AND any indent space
(comment deleted)
In my eternal war against excessive white pixels, HN is one of my only remaining enemies. Why?
I'm currently reading this in dark mode.
I fiddled for a while with DarkReader but found Stylus to be more complete, although one has to spend some time to find or build their preferred dark theme. Also beware that, for reasons I don't understand, activating a theme doesn't deactivate the previous one unless that is explicitly done, which can lead to misleading results.

https://addons.mozilla.org/en-US/firefox/addon/styl-us/

A true hacker would be reading Hacker News in Emacs on a monochrome 80 column CRT monitor. A true hacker cares only for the purity of information, not the vulgar pains and pleasures of the flesh. This is your punishment for debasing yourself with normie technology.

Pie Jesu Domine, Dona eis requiem.

I sometimes read hacker news with Emacs eww. An easy way to get dark mode.

In Emacs-eww, the nested replies are rendered flat, not indented, but you can set up a search on the "parent" hyperlinks. then search forward to move down the comment tree, or click the hyperlink to jump backup the tree.

When viewing in a modern browser a bit of javascript can make HN dark.

    (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 = fg;
            // 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;
        }
    
        // new case. comments now in a <div> with class commtext
        let comments = document.getElementsByClassName('commtext');
        for (let i=0; i<comments.length; i += 1) {
            comments[i].style.backgroundColor = bg;
            comments[i].style.color = fg;
        }
    
        document.body.style.backgroundColor = '#000000';
        document.body.style.color = '#FFFFFF';
    }());