Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ask HN: Can we get a HN background color (dark mode)

news.ycombinator.com

Post reply on HN
Print view View original

11–20 of 29 posts

Re: Ask HN: Can we get a HN background color (dark mode)

#11

Post by srhtftw »

Here is a Tampermonkey¹ script I've used for some ime to make HN look the way I want it to (plain white background). It should be easy to adapt for a dark preference. It also adds a "bookmark" at the top of each page which is also easily removed if you don't want that.

https://pastebin.com/fnf4CeBM

¹ https://www.tampermonkey.net

Re: Ask HN: Can we get a HN background color (dark mode)

#13

Post by greenmartian »

andrewfromx wrote: post #2

firefox dark reader works perfect.

There are two wins in this. 1) Firefox. Which means you also get the extension on mobile. 2) Dark Reader works on all websites (and you can turn it off for sites don't play well, which isn't many).

Re: Ask HN: Can we get a HN background color (dark mode)

#17

Post by yjftsjthsd-h »

3vidence wrote: post #3

Before anyone comments chrome extensions. These don't work on chrome mobile or safari mobile which make up a sizeable number of users. Please, can we just have native dark mode? I made a pretty mediocre HN client just for this feature https://github.com/rsimmons1/FlutterHnReader I don't feel like working on it anymore, let's just have dark mode. Edit: apologies spoke out of my domain on safari iOS, it supports extens…

Firefox has extensions on Android. I appreciate that switching your browser is potentially a whole thing, but the option is there.

Re: Ask HN: Can we get a HN background color (dark mode)

#18

Post by gamedever »

My attempt at providing the CSS to do this. This is where it turns into bikeshedding (T_T);

    :root {
      color-scheme: light dark;

      --base-color: #828282;
      --admin-color: #000000;
      --top-color: #222222;
      --top-sel: #ffffff;
      --c00: #000000;
      --c5a: #5a5a5a;
      --c72: #737373;
      --c82: #828282;
      --c88: #888888;
      --c9c: #9c9c9c;
      --cae: #aeaeae;
      --cbe: #bebebe;
      --cce: #cecece;
      --cdd: #dddddd;
      --ca2: #a30000;
    }

    center>table {
      background-color: #f6f6ef;
    }
    table#hnmain>tbody>tr:nth-child(1)>td {
      background-color: #ff6600;
    }
    font {
      color: #3c963c
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --base-color: #909090;
        --admin-color: #ffffff;
        --top-color: #dddddd;
        --top-sel: #000000;
        --c00: #ffffff;
        --c5a: #a5a5a5;
        --c72: #8c8c8c;
        --c82: #7d7d7d;
        --c88: #777777;
        --c9c: #636363;
        --cae: #515151;
        --cbe: #414141;
        --cce: #313131;
        --cdd: #222222;
        --ca2: #a30000;
      }

      center>table {
        background-color: #222;
      }
      table#hnmain>tbody>tr:nth-child(1)>td {
        background-color: #a74300;
      }

      font {
        color: #639663
      }
    }

    body  { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color: var(--base-color); }
    td    { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color: var(--base-color); }

    .admin td   { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color: var(--admin-color); }
    .subtext td { font-family:Verdana, Geneva, sans-serif; font-size:  7pt; color: var(--base-color); }

    input    { font-family:monospace; font-size:10pt; }
    input[type='submit'] { font-family:Verdana, Geneva, sans-serif; }
    textarea { font-family:monospace; font-size:10pt; resize:both; }

    a:link    { color: var(--admin-color); text-decoration:none; }
    a:visited { color: var(--base-color); text-decoration:none; }

    .default { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--base-color); }
    .admin   { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color: var(--admin-color); }
    .title   { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--base-color); overflow:hidden; }
    .subtext { font-family:Verdana, Geneva, sans-serif; font-size:  7pt; color: var(--base-color); }
    .yclinks { font-family:Verdana, Geneva, sans-serif; font-size:  8pt; color: var(--base-color); }
    .pagetop { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--top-color); line-height:12px; }
    .comhead { font-family:Verdana, Geneva, sans-serif; font-size:  8pt; color: var(--base-color); }
    .comment { font-family:Verdana, Geneva, sans-serif; font-size:  9pt; }
    .hnname  { margin-left:1px; margin-right: 5px; }

    #hnmain { min-width: 796px; }

    .title a { word-break: break-word; }

    .comment a:link, .comment a:visited { text-decoration: underline; }
    .noshow { display: none; }
    .nosee { visibility: hidden; pointer-events: none; cursor: default }

    .c00, .c00 a:link { color: var(--admin-color); }
    .c5a, .c5a a:link, .c5a a:visited { color: var(--c5a); }
    .c73, .c73 a:link, .c73 a:visited { color: var(--c73); }
    .c82, .c82 a:link, .c82 a:visited { color: var(--c82); }
    .c88, .c88 a:link, .c88 a:visited { color: var(--c88); }
    .c9c, .c9c a:link, .c9c a:visited { color: var(--c9c); }
    .cae, .cae a:link, .cae a:visited { color: var(--cae); }
    .cbe, .cbe a:link, .cbe a:visited { color: var(--cbe); }
    .cce, .cce a:link, .cce a:visited { color: var(--cce); }
    .cdd, .cdd a:link, .cdd a:visited { color: var(--cdd); }
    .ca2 { color: var(--ca2); }

    .pagetop a:visited { color: var(--admin-color); }
    .topsel a:link, .topsel a:visited { color: var(--top-cel); }

    .subtext a:link, .subtext a:visited { color: var(--base-color); }
    .subtext a:hover { text-decoration:underline; }

    .comhead a:link, .subtext a:visited { color: var(--base-color); }
    .comhead a:hover { text-decoration:underline; }

    .hnmore a:link, a:visited { color: var(--base-color); }
    .hnmore { text-decoration:underline; }

    .default p { margin-top: 8px; margin-bottom: 0px; }

    .pagebreak {page-break-before:always}

    pre { overflow: auto; padding: 2px; white-space: pre-wrap; overflow-wrap:anywhere; }
    pre:hover { overflow:auto }

    .votearrow {
      width:      10px;
      height:     10px;
      border:     0px;
      margin:     3px 2px 6px;
      background: url("triangle.svg"), linear-gradient(transparent, transparent) no-repeat;
      background-size: 10px;
    }

    .votelinks.nosee div.votearrow.rotate180 {
      display: none;
    }

    table.padtab td { padding:0px 10px }

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
      .votearrow {
        background-size: 10px;
        background-image: url("triangle.svg"), linear-gradient(transparent, transparent);
      }
    }

    .rotate180 {
      -webkit-transform: rotate(180deg);  /* Chrome and other webkit browsers */
      -moz-transform:    rotate(180deg);  /* FF */
      -o-transform:      rotate(180deg);  /* Opera */
      -ms-transform:     rotate(180deg);  /* IE9 */
      transform:         rotate(180deg);  /* W3C complaint browsers */

      /* IE8 and below */
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')";
    }

    /* mobile device */
    @media only screen
    and (min-width : 300px)
    and (max-width : 750px) {
      #hnmain { width: 100%; min-width: 0; }
      body { padding: 0; margin: 0; width: 100%; }
      td { height: inherit !important; }
      .title, .comment { font-size: inherit;  }
      span.pagetop { display: block; margin: 3px 5px; font-size: 12px; line-height: normal }
      span.pagetop b { display: block; font-size: 15px; }
      table.comment-tree .comment a { display: inline-block; max-width: 200px; overflow: hidden; white-space: nowrap;
        text-overflow: ellipsis; vertical-align:top; }
      img[src='s.gif'][width='40'] { width: 12px; }
      img[src='s.gif'][width='80'] { width: 24px; }
      img[src='s.gif'][width='120'] { width: 36px; }
      img[src='s.gif'][width='160'] { width: 48px; }
      img[src='s.gif'][width='200'] { width: 60px; }
      img[src='s.gif'][width='240'] { width: 72px; }
      img[src='s.gif'][width='280'] { width: 84px; }
      img[src='s.gif'][width='320'] { width: 96px; }
      img[src='s.gif'][width='360'] { width: 108px; }
      img[src='s.gif'][width='400'] { width: 120px; }
      img[src='s.gif'][width='440'] { width: 132px; }
      img[src='s.gif'][width='480'] { width: 144px; }
      img[src='s.gif'][width='520'] { width: 156px; }
      img[src='s.gif'][width='560'] { width: 168px; }
      img[src='s.gif'][width='600'] { width: 180px; }
      img[src='s.gif'][width='640'] { width: 192px; }
      img[src='s.gif'][width='680'] { width: 204px; }
      img[src='s.gif'][width='720'] { width: 216px; }
      img[src='s.gif'][width='760'] { width: 228px; }
      img[src='s.gif'][width='800'] { width: 240px; }
      img[src='s.gif'][width='840'] { width: 252px; }
      .title { font-size: 11pt; line-height: 14pt;  }
      .subtext { font-size: 9pt; }
      .votearrow { transform: scale(1.3,1.3); margin-right: 6px; }
      .votearrow.rotate180 {
        -webkit-transform: rotate(180deg) scale(1.3,1.3);  /* Chrome and other webkit browsers */
        -moz-transform:    rotate(180deg) scale(1.3,1.3);  /* FF */
        -o-transform:      rotate(180deg) scale(1.3,1.3);  /* Opera */
        -ms-transform:     rotate(180deg) scale(1.3,1.3);  /* IE9 */
        transform:         rotate(180deg) scale(1.3,1.3);  /* W3C complaint browsers */
      }
      .votelinks { min-width: 18px; }
      .votelinks a { display: block; margin-bottom: 9px; }
      input[type='text'], input[type='number'], textarea { font-size: 16px; width: 90%; }
    }

    .comment { max-width: 1215px; overflow-wrap:anywhere; }



    @media only screen and (min-width : 300px) and (max-width : 389px) {
      .comment { max-width: 270px; overflow: hidden }
    }
    @media only screen and (min-width : 390px) and (max-width : 509px) {
      .comment { max-width: 350px; overflow: hidden }
    }
    @media only screen and (min-width : 510px) and (max-width : 599px) {
      .comment { max-width: 460px; overflow: hidden }
    }
    @media only screen and (min-width : 600px) and (max-width : 689px) {
      .comment { max-width: 540px; overflow: hidden }
    }
    @media only screen and (min-width : 690px) and (max-width : 809px) {
      .comment { max-width: 620px; overflow: hidden }
    }
    @media only screen and (min-width : 810px) and (max-width : 899px) {
      .comment { max-width: 730px; overflow: hidden }
    }
    @media only screen and (min-width : 900px) and (max-width : 1079px) {
      .comment { max-width: 810px; overflow: hidden }
    }
    @media only screen and (min-width : 1080px) and (max-width : 1169px) {
      .comment { max-width: 970px; overflow: hidden }
    }
    @media only screen and (min-width : 1170px) and (max-width : 1259px) {
      .comment { max-width: 1050px; overflow: hidden }
    }
    @media only screen and (min-width : 1260px) and (max-width : 1349px) {
      .comment { max-width: 1130px; overflow: hidden }
    }
I get, it's long. Just taking the css that was served and editing it.

Re: Ask HN: Can we get a HN background color (dark mode)

#19

Post by gamedever »

gamedever wrote: post #18

My attempt at providing the CSS to do this. This is where it turns into bikeshedding (T_T); :root { color-scheme: light dark; --base-color: #828282; --admin-color: #000000; --top-color: #222222; --top-sel: #ffffff; --c00: #000000; --c5a: #5a5a5a; --c72: #737373; --c82: #828282; --c88: #888888; --c9c: #9c9c9c; --cae: #aeaeae; --cbe: #bebebe; --cce: #cecece; --cdd: #dddddd; --ca2: #a30000; } center>table { background-c…

There's some, pretty oldskool HTML in there. There are font tags, bgcolor="", color="" .. I guess you can say if it ain't broken don't fix it.
Post reply on HN