Ask HN: Dark mode for HN please?
Here is what I&#x27;ve been using through the excellent Stylus browser addon. It&#x27;s derived from some of the Stylus themes for HN. (comment box text is black but not being a web guy I didn&#x27;t fix it):<p>Screenshots: <a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;RhesGUo" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;RhesGUo</a><p><pre><code>        &#x2F;*Base*&#x2F;
        ::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;}

        &#x2F;*Font*&#x2F;
        :root{font-size: 16px; text-rendering: optimizeLegibility;}
        body, td, .admin, td, .subtext, td, input[type=&quot;submit&quot;], .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=&quot;1&quot;]{font-size: 0.75rem;}
        .rank{font-weight: bold;}

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

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

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

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

        &#x2F;*Header Bar*&#x2F;
        #hnmain &gt; tbody &gt; tr &gt; td[bgcolor=&quot;#ff6600&quot;]{position: relative; background-color: #333; border: 0.1875rem solid #111; border-bottom: none; padding: 0.1875rem;}
        #hnmain &gt; tbody &gt; tr &gt; td[bgcolor=&quot;#ff6600&quot;] a{color: #F60 !important;}
        .pagetop{color: #888;}
        #hnmain &gt; tbody &gt; tr &gt; td[bgcolor=&quot;#ff6600&quot;] 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;}

        &#x2F;*Syncopation*&#x2F;
        .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;}

        &#x2F;*Item*&#x2F;
        .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;}

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

        &#x2F;*Coments*&#x2F;
        .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;}

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

        &#x2F;*Comment Colors*&#x2F;
        .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;}

        &#x2F;*New Comments Page*&#x2F;
        .athing &gt; .default{padding: 0.625rem 2.5rem 0.625rem 0 !important;}
        .athing &gt; .ind+.votelinks{padding: 0.625rem;}

        &#x2F;*Hover*&#x2F;
        .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 &gt; center &gt; table {
            width: 80% !important;
        }</code></pre>