Dark Mode

[ardabbour]

Thank you for a fantastic resource. I wanted to add a pull request with <style> for a dark theme to activate if the user's platform requests one @media (prefers-color-scheme: dark), but I couldn't find the stylesheet used. Here it is in case you want to add it:

  <!-- Dark mode -->
  <style>
    @media (prefers-color-scheme: dark) {
    html {
      color: #abb2bf;
      background-color: #282c34;
    }
    a {
      color: #abb2bf;
    }
    a:visited {
      color: #abb2bf;
    }
    hr {
      background-color: #abb2bf;
    }
    table {
      border-top: 1px solid #abb2bf;
      border-bottom: 1px solid #abb2bf;
    }
    th {
      border-top: 1px solid #abb2bf;
    }
    tbody {
      border-top: 1px solid #abb2bf;
      border-bottom: 1px solid #abb2bf;
    }
    blockquote {
      border-left: 2px solid #282c34;
      color: #5c6370;
    }
    div.sourceCode {
      border: 1px solid #abb2bf;
      background-color: #282c34;
    }
    code:not(.sourceCode) {
      background: #4b5263;
    }
    pre.numberSource { border-left: 1px solid #282c34; }
    pre > code.sourceCode > span > a:first-child::before { color: #5c6370; }
    code span.al { color: #e06c75; font-weight: bold; } /* Alert */
    code span.an { color: #56b6c2; font-weight: bold; font-style: italic; } /* Annotation */
    code span.at { color: #d19a66; } /* Attribute */
    code span.bn { color: #98c379; } /* BaseN */
    code span.bu { color: #98c379; } /* BuiltIn */
    code span.cf { color: #98c379; font-weight: bold; } /* ControlFlow */
    code span.ch { color: #61afef; } /* Char */
    code span.cn { color: #be5046; } /* Constant */
    code span.co { color: #5c6370; font-style: italic; } /* Comment */
    code span.cv { color: #56b6c2; font-weight: bold; font-style: italic; } /* CommentVar */
    code span.do { color: #e5c07b; font-style: italic; } /* Documentation */
    code span.dt { color: #be5046; } /* DataType */
    code span.dv { color: #98c379; } /* DecVal */
    code span.er { color: #e06c75; font-weight: bold; } /* Error */
    code span.fl { color: #98c379; } /* Float */
    code span.fu { color: #61afef; } /* Function */
    code span.im { color: #98c379; font-weight: bold; } /* Import */
    code span.in { color: #56b6c2; font-weight: bold; font-style: italic; } /* Information */
    code span.kw { color: #98c379; font-weight: bold; } /* Keyword */
    code span.op { color: #abb2bf; } /* Operator */
    code span.ot { color: #98c379; } /* Other */
    code span.pp { color: #d19a66; } /* Preprocessor */
    code span.sc { color: #61afef; } /* SpecialChar */
    code span.ss { color: #c678dd; } /* SpecialString */
    code span.st { color: #61afef; } /* String */
    code span.va { color: #61afef; } /* Variable */
    code span.vs { color: #61afef; } /* VerbatimString */
    code span.wa { color: #56b6c2; font-weight: bold; font-style: italic; } /* Warning */
  }
  </style>