Hacker News

Stylus edits of "Hacker News Readable" (not mine) to make the switch to dark mode and light mode automatic.

by David Hepworth

HTML

<html lang="en" op="news"><head><meta name="referrer" content="origin"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="news.css?fIA1WYHO2oSfVe60PsAM">
        <link rel="shortcut icon" href="favicon.ico">
          <link rel="alternate" type="application/rss+xml" title="RSS" href="rss">
        <title>Hacker News</title></head><body><center><table id="hnmain" border="0" cellpadding="0" cellspacing="0" width="85%" bgcolor="#f6f6ef">
        <tbody><tr><td bgcolor="#ff6600"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:2px"><tbody><tr><td style="width:18px;padding-right:4px"><a href="https://news.ycombinator.com"><img src="y18.gif" width="18" height="18" style="border:1px white solid;"></a></td>
                  <td style="line-height:12pt; height:10px;"><span class="pagetop"><b class="hnname"><a href="news">Hacker News</a></b>
              <a href="newest">new</a> | <a href="threads?id=DHPersonal">threads</a> | <a href="front">past</a> | <a href="newcomments">comments</a> | <a href="ask">ask</a> | <a href="show">show</a> | <a href="jobs">jobs</a> | <a href="submit">submit</a>            </span></td><td style="text-align:right;padding-right:4px;"><span class="pagetop">
                              <a id="me" href="user?id=#">User</a>                (0) |
                <a id="logout" href="logout?auth=adba1632b71e2dff55cd0056f848d6f6178fcce1&amp;goto=news">logout</a>                          </span></td>
              </tr></tbody></table></td></tr>
<tr id="pagespace" title="" style="height:10px"></tr><tr><td><table border="0" cellpadding="0" cellspacing="0" class="itemlist">
              <tbody><tr class="athing" id="23202228">
      <td align="right" valign="top" class="title"><span class="rank">1.</span></td>      <td valign="top" class="votelinks"><center><a id="up_23202228" onclick="return vote(event, this, &quot;up&quot;)"...

CSS

/* reset */
body,
td,
table,
input,
textarea,
.pagetop,
* {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fafafa;
    margin: 0;
}

.pagetop,
.pagetop a {
    color: rgba(0, 0, 0, 0.5);
}

.brandname {
    display: none;
}

table {
    font-size: 1rem;
}

#hnmain {
    max-width: 800px;
    background: transparent;
    margin: 0 2%;
    width: auto;
}

#hnmain > tbody > tr:last-child img {
    display: none;
}

#hnmain > tbody > tr:last-child table td {
    background: transparent;
}

#hnmain > tbody > tr > td {
    background: transparent;
}

#hnmain > tbody > tr > td[bgcolor] > table {
    padding: 0 0 20px 0 !important;
}

#hnmain > tbody > tr > td[bgcolor] > table > tbody > tr > td {
    font-weight: 400;
}

#hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a {
    background: #F06D3C;
    color: #fff;
    height: 50px;
    line-height: 50px;
    width: 50px;
    display: block;
    text-align: center;
}

#hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a:after {
    content: "HN";
    font-weight: 700;
}

#hnmain > tbody > tr > td[bgcolor] > table tbody tr td:first-child a img {
    display: none;
}

b.hnname a {
    font-weight: 600;
}

#hnmain > tbody > tr > td[bgcolor] > table tbody tr td:nth-child(2) .pagetop {
    color: #fafafa;
    padding-left: 10px;
    font-size: .8rem;
}

#hnmain > tbody > tr > td[bgcolor] > table tbody tr td .pagetop {
    font-size: .9rem;
}

#hnmain > tbody > tr > td[bgcolor] > table tbody tr td .pagetop a:hover {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 2px;
}

/*.spacer {
    display: none;
}*/
.title,
.sitebit,
.subtext {
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    position: relative;
}

.itemlist {
    width: 100%;
}

.votelinks a {
    display: block;
   ...