Ask HN: Dark mode for HN please?

Why are websites having to individually implement dark mode? It should be done heuristicly by the browser.

It would take me weeks to redo my website to support dark mode. Better to wait and let browser technology catch up.

don't forget to create an electron app for it

"... which can't be said about most modern websites."

While I understand and agree with your point, I have personally found this quoted portion to be a false assumption.

To me, "works" means I can retrieve the content of the page without using JS. If the websites we are discussing are ones where the primary purpose is reading, like HN, most will "work" for me without JS, so long as I do not rely on try using a "modern browser" to retrieve the content. In fact, I cannot even think of a single website meant for reading that I cannot read without a Javascript-enabled browser.

Here is what I've been using through the excellent Stylus browser addon. It's derived from some of the Stylus themes for HN. (comment box text is black but not being a web guy I didn't fix it):

Screenshots: https://imgur.com/a/RhesGUo

        /*Base*/
        ::selection{background: #111; color: #F60;}
        body{background-color: #222; color: #CCC;}
        a:link{color: #8AD !important;}
        a:visited{color: #666 !important;}
        a.storylink{color: #dfdfdf !important;}

        /*Font*/
        :root{font-size: 16px; text-rendering: optimizeLegibility;}
        body, td, .admin, td, .subtext, td, input[type="submit"], .default, .admin, .title, .subtext, .yclinks, .pagetop, .comhead, .comment{font-family: sans-serif;}
        body,td,input,textarea,.default,.title,.pagetop{font-size: 1rem;}
        .comment{font-size: 0.9167rem;}
        .admin, .admin td{font-size: 0.875rem;}
        .yclinks, .comhead{font-size: 0.8333rem;}
        .subtext,.subtext td, .rank, font[size="1"]{font-size: 0.75rem;}
        .rank{font-weight: bold;}

        /*Input*/
        input, textarea{background-color: #333; border: 0.0625rem solid #555; padding: 0.1875rem;}
        input[type="submit"]{background-color: #444; padding: 0.5rem 1.5rem;}

        /*Vote Arrows*/
        .votearrow{display: none;}
        a[id^="up"]:before{content: "▲"; color: #666; font-weight: bold; padding: 0.1875rem;}
        a[id^="up"].nosee:before{visibility: visible; color: #F60;}
        a[id^="down"]:before{content: "▼"; color: #666; font-weight: bold; padding: 0.1875rem;}
        a[id^="down"].nosee:before{visibility: visible; color: #369;}

        /*Spacers*/
        tr.spacer{height: 0.1875rem !important;}
        #pagespace{display: none;}

        /*Backing*/
        #hnmain{background-color: #111;}
        .itemlist{background-color: #111; width: 100%; padding: 0.1875rem;}

        /*Header Bar*/
        #hnmain > tbody > tr > td[bgcolor="#ff6600"]{position: relative; background-color: #333; border: 0.1875rem solid #111; border-bottom: none; padding: 0.1875rem;}
        #hnmain > tbody > tr > td[bgcolor="#ff6600"] a{color: #F60 !important;}
        .pagetop{color: #888;}
        #hnmain > tbody > tr > td[bgcolor="#ff6600"] td:nth-child(2){position: absolute; top: 0.375rem; width: 100%; height: 0 !important; text-align: center; margin-left: -30px; padding-left: 30px;}
        .hnname{position: absolute; left: 30; top: 0.1875rem;}

        /*Syncopation*/
        .itemlist .athing:nth-child(odd), .itemlist .athing:nth-child(odd)+tr, .athing.comtr:nth-child(odd){background-color: #1E1E1E;}
        .itemlist .athing:nth-child(even), .itemlist .athing:nth-child(even)+tr, .athing.comtr:nth-child(even){background-color: #242424;}

        /*Item*/
        .itemlist .athing td{padding-top: 0.5rem;}
        .itemlist .athing+tr td{padding-bottom: 0.5rem;}
        .itemlist .athing .title:first-child{background-color: #111; border-bottom-right-radius: 0.375rem !important; text-align: center; padding-top: 0.375rem;}

        /*Fat Item*/
        .fatitem{padding-top: 0.625rem;}
        .fatitem form{margin: 0;}
        .fatitem .votelinks{padding: 0 0.375rem;}

        /*Coments*/
        .comment-tree{width: 100%;}
        .ind{background-image: repeating-linear-gradient(to right, #111, #111 39px, #222 40px);}
        .athing.comtr td{padding: 0;}
        .athing.comtr table{border-collapse: collapse;}
        .athing.comtr .default{padding: 0.625rem 2.5rem 0.625rem 0;}
        .athing.comtr .votelinks{padding: 0.625rem;}
        .athing.comtr .comment a{color: #369 !important;}
        .athing.comtr .comment .reply a{color: #8AD !important;}
        .comment{max-width: none;}
        .comment pre{max-width: 70vw;}
        .comment pre *{font-family: monospace;}

        /*Custom*/
        .subtext .hnuser:link,
        .comhead a:link,
        .subtext a:visited {
          color: #c678ddcc !important;
        }
        .age a:link,
        .age a:visited {
        color: #98be65cc !important;
        }

        /*Comment Colors*/
        .c00{color: #dddddd;}
        .c5a{color: #cecece;}
        .c73{color: #bebebe;}
        .c82{color: #aeaeae;}
        .c88{color: #9c9c9c;}
        .c9c{color: #888888;}
        .cae{color: #828282;}
        .cbe{color: #737373;}
        .cce{color: #5a5a5a;}
        .cdd{color: #000000;}

        /*New Comments Page*/
        .athing > .default{padding: 0.625rem 2.5rem 0.625rem 0 !important;}
        .athing > .ind+.votelinks{padding: 0.625rem;}

        /*Hover*/
        .itemlist .athing:hover, .itemlist .athing:hover td, .itemlist .athing:hover+tr td{background-color: #333;}
        .itemlist .athing:hover .rank{color: #369;}
        .athing.comtr:hover{background-color: #333;}

        body > center > table {
            width: 80% !important;
        }

They could put a preference in the profile page. But I think that switching the theme would be the browser's job.