Out-of-the-box "dark mode" appearance

darkmode.css

/* --------------------------------------------------------------  
Dark mode CSS by Thomas Rettig
License: Public Domain
-----------------------------------------------------------*/

@media screen and (prefers-color-scheme: dark) {
  html {
    /* ensure input elements such as <textarea> and <input type="checkbox"> are rendered in native dark mode for consistency */
    color-scheme: dark auto;
  }
  
  :not(h1, h2, h3) {
    /* 1. use an off-white colour so reading text is less strenous to the eye */
    /* 2. use the recommended dark background colour according by Material Design guidelines */
    color: #bbb; /* 1 */
    background-color: #131313; /* 2 */
  }

  h1, h2, h3, h4 {
    /* make important headings stand out more */
    color: white;
  }

  img:not(.icon, .Icon, .glyphicon, .fa, .fas, .far, .fal, .fab, .font-fontello, .material-icons, .DPvwYc, .Mwv9k, .NtU4hc) {
    /* decrease the brightness of images which are NOT icons */
    /* use the "filter" property instead of "opacity" for a two reasons:
       - hardware acceleration
       - "opacity" makes the images faded, which is not what we want
    */
    filter: brightness(0.85);
  }

  li::marker {
    /* reduce the contrast of list markers, suggested by Aral Balkan */ 
    /* https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/ */
    color: #aaa;
  }
}

Here's the SASS version:

// Dark mode CSS by Thomas Rettig
// SASS Version
// License: Public Domain

@media screen and (prefers-color-scheme: dark)
  html
    // ensure input elements such as <textarea> and <input type="checkbox"> are rendered in native dark mode for consistency
    color-scheme: dark auto
  
  :not(h1, h2, h3)
    // 1. use an off-white colour so reading text is less strenous to the eye
    // 2. use the recommended dark background colour according by Material Design guidelines
    color: #bbb
    background-color: #131313

  h1, h2, h3, h4
    // make important headings stand out more
    color: white

  img:not(.icon, .Icon, .glyphicon, .fa, .fas, .far, .fal, .fab, .font-fontello, .material-icons, .DPvwYc, .Mwv9k, .NtU4hc)
    // decrease the brightness of images which are NOT icons
    // use the "filter" property instead of "opacity" for a two reasons:
    // - hardware acceleration
    // - "opacity" makes the images faded, which is not what we want
    filter: brightness(0.85)

  li::marker
    // reduce the contrast of list markers, suggested by Aral Balkan
    // https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/
    color: #aaa