You can customize HN to be darkmode friendly

11 pointsSkullfurious6mo ago8 comments

Basically just have ublock origin installed in your browser, click the icon, go into the settings, click My Filters on the top, and paste the following.

After you apply and reload the page you should have a Nordic style theme that's a bit easier on the eyes.

-------------------

! Darker page background + main text color

news.ycombinator.com##body, .c00:style(background-color: #1e222a !important; color: #c8d0d9 !important;)

! Top orange bar (nav/header)

news.ycombinator.com##td[bgcolor="#ff6600"]:style(background-color: #2a2f3a !important;)

! Body content background

news.ycombinator.com##[bgcolor="#f6f6ef"]:style(background-color: #1e222a !important;)

! Full black elements background

news.ycombinator.com##[bgcolor="#000000"]:style(background-color: #2a2f3a !important;)

! Hide spacing row

news.ycombinator.com##tr#pagespace:style(display: none !important;)

! Hacker News title link

news.ycombinator.com##b.hnname > a:style(color: #8fcadb !important;)

! All links

news.ycombinator.com##a:style(color: #7fbacb !important;)

! Subtext (e.g., posted by, time)

news.ycombinator.com##.subline:style(color: #8a9c8b !important;)

! Subtext links

news.ycombinator.com##.subline a:style(color: #7aa5a8 !important;)

! Score + top navbar links

news.ycombinator.com##.score, #hnmain > tbody > tr td:last-child > span.pagetop:style(color: #d0aa55 !important;)

! Site domain (.sitestr)

news.ycombinator.com##.sitestr:style(color: #b56c70 !important;)

!Shrinks the text input box on the submit page. (Flashbang reduction)

news.ycombinator.com##textarea[name="text"]:style(width: 400px !important; height: 30px !important;)

-------------------

I got the idea from another poster and modified it a bit. I don't know why the textbox on the submit page is a locked size. But other than that little quirk I find it a lot easier on the eyes.

If anyone knows how to change the submission boxes to be a different color that would be nice as well.

I thought there was a way to post code on HN but I cannot seem to figure out the formatting. Sorry about that.

8 comments

WhereIsTheTruth6mo ago

Here is what I use:

    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;
        font-family: "Jetbrains Mono"!important;
    }

SkullfuriousOP6mo ago

Thanks I am about to try it out! I'll update the post when I get the chance for any future dark mode enjoyers.

shaunpud6mo ago

I was doing similar for a while but too many sites needed changes so I ended up installing and toggle Dark Reader where required. https://darkreader.org

Davidbrcz6mo ago

And invert color images for the images (https://addons.mozilla.org/en-US/firefox/addon/invert-image/)

southwindcg6mo ago

A while back I thought of simply adding a CSS filter to turn the colors of the entire site inverted, but never bothered.

* { filter:invert(100%) !important }

I'm not sure if that would work on the text boxes or not, though.

deafpolygon6mo ago

Noir works perfectly for my uses.

rfarley046mo ago

Love it. Thanks

cheshire1376mo ago

Thank you for this, works well! Now to adapt a version for https://hckrnews.com/.

j / k navigate · click thread line to collapse

You can customize HN to be darkmode friendly

11 pointsSkullfurious6mo ago8 comments

Basically just have ublock origin installed in your browser, click the icon, go into the settings, click My Filters on the top, and paste the following.

After you apply and reload the page you should have a Nordic style theme that's a bit easier on the eyes.

-------------------

! Darker page background + main text color

news.ycombinator.com##body, .c00:style(background-color: #1e222a !important; color: #c8d0d9 !important;)

! Top orange bar (nav/header)

news.ycombinator.com##td[bgcolor="#ff6600"]:style(background-color: #2a2f3a !important;)

! Body content background

news.ycombinator.com##[bgcolor="#f6f6ef"]:style(background-color: #1e222a !important;)

! Full black elements background

news.ycombinator.com##[bgcolor="#000000"]:style(background-color: #2a2f3a !important;)

! Hide spacing row

news.ycombinator.com##tr#pagespace:style(display: none !important;)

! Hacker News title link

news.ycombinator.com##b.hnname > a:style(color: #8fcadb !important;)

! All links

news.ycombinator.com##a:style(color: #7fbacb !important;)

! Subtext (e.g., posted by, time)

news.ycombinator.com##.subline:style(color: #8a9c8b !important;)

! Subtext links

news.ycombinator.com##.subline a:style(color: #7aa5a8 !important;)

! Score + top navbar links

news.ycombinator.com##.score, #hnmain > tbody > tr td:last-child > span.pagetop:style(color: #d0aa55 !important;)

! Site domain (.sitestr)

news.ycombinator.com##.sitestr:style(color: #b56c70 !important;)

!Shrinks the text input box on the submit page. (Flashbang reduction)

news.ycombinator.com##textarea[name="text"]:style(width: 400px !important; height: 30px !important;)

-------------------

I got the idea from another poster and modified it a bit. I don't know why the textbox on the submit page is a locked size. But other than that little quirk I find it a lot easier on the eyes.

If anyone knows how to change the submission boxes to be a different color that would be nice as well.

I thought there was a way to post code on HN but I cannot seem to figure out the formatting. Sorry about that.

8 comments

WhereIsTheTruth6mo ago

Here is what I use:

    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;
        font-family: "Jetbrains Mono"!important;
    }

SkullfuriousOP6mo ago

Thanks I am about to try it out! I'll update the post when I get the chance for any future dark mode enjoyers.

shaunpud6mo ago

I was doing similar for a while but too many sites needed changes so I ended up installing and toggle Dark Reader where required. https://darkreader.org

Davidbrcz6mo ago

And invert color images for the images (https://addons.mozilla.org/en-US/firefox/addon/invert-image/)

southwindcg6mo ago

A while back I thought of simply adding a CSS filter to turn the colors of the entire site inverted, but never bothered.

* { filter:invert(100%) !important }

I'm not sure if that would work on the text boxes or not, though.

deafpolygon6mo ago

Noir works perfectly for my uses.

rfarley046mo ago

Love it. Thanks

cheshire1376mo ago

Thank you for this, works well! Now to adapt a version for https://hckrnews.com/.

j / k navigate · click thread line to collapse