hackernews dark mode

0-install.md

hn-dark-mode.user.css

/* ==UserStyle==
@name           HN Dark Mode
@namespace      harryg.codes
@version        1.0.2
@description    Dark mode for Hacker News, by [azerella](https://news.ycombinator.com/user?id=azerella)
@author         Harry Gallagher <harrygallagher4@gmail.com> (https://keybase.io/harryg)
@license        unlicense
@homepageURL    https://harryg.codes
@updateURL      https://gist.githubusercontent.com/harrygallagher4/025ce9f5767314641b838a9516a07ba3/raw/hn-dark-mode.user.css
@preprocessor   less
@var checkbox invert-colors   "Invert link/visited colors"  0
@var color    default-link    "Link color"                  #8c96ac
@var color    default-visited "Visited link color"          #979cf4
==/UserStyle== */
@-moz-document domain("news.ycombinator.com") {
  
  @invert: boolean(@invert-colors > 0);
  
  @link-color:    if(@invert, @default-visited, @default-link);
  @visited-color: if(@invert, @default-link,    @default-visited);

  body {
    background-color: #1F2430;
  }

  #hnmain {
    background-color: #232834;
  }

  a:link.storylink,
  #hnmain > tbody > tr:first-child > td a,
  .commtext,
  .commtext a:link,
  td,
  b {
    color: #fafafa;
  }

  .comment > .commtext {
    color: #fafafa;
  }

  td > .title {
    color: #fafafa;
  }

  #hnmain > tbody > tr:first-child > td {
    background-color: #333a4a;
  }

  a:link,
  .sitebit,
  .subtext,
  .sitestr,
  .subtext a:link,
  .rank,
  a.morelink,
  .pagetop,
  .yclinks a,
  .yclinks > a:link,
  .comhead a:link,
  .comhead,
  .hnmore a:link,
  .reply a:link {
    color: @link-color;
  }

  td .pagetop {
    color: @link-color;
  }

  td > a:link {
    color: @link-color;
  }

  .title > a:link {
    color: @link-color;
  }

  a > u {
    color: @link-color;
  }

  .comment .reply u > a {
    color: @link-color;
  }

  .title > a:visited {
    color: @visited-color;
  }

  .commtext > p > a:link {
    color: #fafafa;
  }

  .comment .commtext > a:link {
    color: #fafafa;
  }

  .comment .commtext > a:visited {
    color: @visited-color;
  }

  .commtext > p > a:visited {
    color: @visited-color;
  }

  .votearrow {
    overflow: visible;
    position: relative;
  }

  .yclinks > a,
  .yclinks > a:link {
    color: @link-color;
  }

  .yclinks > a:visited {
    color: @visited-color;
  }

  .votearrow::before {
    content: "";
    width: 0;
    height: 0;
    left: 1px;
    top: 3px;
    display: block;
    position: absolute;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid #bebfd1;
  }

  input[type=text],
  textarea {
    background-color: #333a4a;
    color: #fafafa;
    border: 1px solid #1F2430;
  }

  input[type=submit] {
    background-color: #333a4a;
    color: #fafafa;
    border: 1px solid #1F2430;
  }

  b {
    color: #fafafa;
  }
}