Custom user style to add dark theme support to Wikipedia

Wikipedia Dark Mode support.user.css

/* ==UserStyle==
@name           Wikipedia Dark Mode support
@description    Adds support for dark mode to Wikipedia.
@namespace      https://vivelin.net/
@version        0.1.6
@author         Vivelin (https://vivelin.net/)
@updateURL      https://gist.githubusercontent.com/Vivelin/dc0bfcbd604f0a1a0d8be6581367f8d3/raw/Wikipedia%2520Dark%2520Mode%2520support.user.css
@license        MIT-0
@preprocessor   less
==/UserStyle== */
@-moz-document domain("wikipedia.org"),
domain("wiktionary.org") {
  @media (prefers-color-scheme: dark) {
    @line: #111;
    @backgroundMain: #333;
    @backgroundMuted: #212121;
    @backgroundSemi: #2f2f2f;
    @backgroundTertiary: #181818;
    @foregroundMain: #ddd;
    @foregroundIntense: #eee;
    @link: #64B5F6;
    @linkVisited: #5C6BC0;

    body,
    #mw-page-base {
      background: @backgroundTertiary;
      border-color: @line;
      color: @foregroundMain;
    }

    kbd.keyboard-key {
      background: @backgroundTertiary !important;
      border-color: @line !important;
      color: @foregroundMain !important;
    }

    pre,
    code,
    .mw-code {
      background-color: @backgroundTertiary;
      border-color: @line;
      color: @foregroundMain;
    }

    .mw-highlight {
      background-color: @backgroundMuted;
    }

    .mw-body,
    .parsoid-body {
      background: @backgroundMain;
      border-color: @line;
      color: @foregroundMain;
    }

    .toc,
    div.thumbinner,
    li.gallerybox div.thumb,
    #content .gallerybox div.thumb,
    .mw-parser-output .quotebox {
      background-color: @backgroundMuted;
      border-color: @line;
    }

    .thumbimage {
      border-color: @line;
    }

    .infobox .infobox-above,
    .infobox .infobox-title,
    .infobox .infobox-header {
      background-color: @backgroundSemi !important;
      color: @foregroundMain !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .vector-menu-portal h3 {
      color: @foregroundIntense;
    }

    .tocnumber {
      color: @foregroundMain;
    }

    a {
      color: @link;

      &:visited {
        color: @linkVisited;
      }

      &.new {
        color: #E57373;

        &:visited {
          color: #FF8A65;
        }
      }
    }
    
    ul {
      list-style-image: unset; 
    }

    .mw-parser-output .sidebar {
      background-color: @backgroundMuted;
      border-color: @line;
    }

    .mwe-math-fallback-image-inline {
      filter: invert();
    }

    /* Infobox */
    .infobox {
      background-color: @backgroundMuted;
      border-color: @line;
      color: @foregroundMain;

      & .image img {
        background-color: white;
        border: 1px solid @line;
      }
    }

    /* Nav */
    .vector-menu-portal .body li a,
    .vector-menu-portal .vector-menu-content li a,
    .vector-menu-tabs li a {
      color: @link;

      &:visited {
        color: @linkVisited;
      }
    }

    .vector-menu-tabs .selected a,
    .vector-menu-tabs .selected a:visited {
      color: @foregroundMain;
    }

    .vector-menu-tabs li {
      background-image: linear-gradient(to top, @line 0, @backgroundMain 1px, @backgroundMuted 100%);
    }

    .vector-menu-tabs .selected {
      background: @backgroundMuted;
    }

    .vector-menu-tabs,
    .vector-menu-tabs a,
    #mw-head .vector-menu-dropdown h3 {
      background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, @line 100%);
    }

    /* Logo */
    #p-logo {
      filter: invert();
    }

    /* Alert thing */
    table.ambox {
      background: @backgroundMuted;
      border-color: @line;
    }

    /* Tables */
    .wikitable {
      background-color: @backgroundMuted !important;
      color: @foregroundMain;
    }

    .wikitable > tr > th,
    .wikitable > tr > td,
    .wikitable > * > tr > th,
    .wikitable > * > tr > td {
      border-color: @line;
    }

    .wikitable > tr > th,
    .wikitable > * > tr > th,
    .mw-parser-output .vgr-hrow th,
    table.wikitable > tr > th,
    table.wikitable > * > tr > th {
      background-color: @backgroundSemi;
    }

    /* Categories */
    .catlinks {
      background-color: @backgroundMuted;
      border-color: @line;

      & li {
        border-color: @foregroundMain;
      }
    }
    
    /* Side box */
    .mw-parser-output .side-box {
      background-color: @backgroundMuted;
      border-color: @line;
    }

    /* Nav box */
    .mw-parser-output .navbox,
    .mw-parser-output .navbox-subgroup {
      background-color: @backgroundMuted;
      border-color: @line;
      padding: 0;
    }

    .mw-parser-output .navbox-list {
      border-color: @line;
      border-width: 1px !important; // sigh
    }

    tr + tr > .navbox-abovebelow,
    tr + tr > .navbox-group,
    tr + tr > .navbox-image,
    tr + tr > .navbox-list {
      border-color: @line;
      border-width: 1px;
    }

    .mw-parser-output .navbox th,
    .mw-parser-output .navbox-title {
      background-color: @backgroundMuted !important;
    }

    .mw-parser-output .navbox-abovebelow,
    .mw-parser-output th.navbox-group,
    .mw-parser-output .navbox-subgroup .navbox-title {
      background-color: @backgroundSemi;
    }

    .mw-parser-output .navbox-even {
      background-color: @backgroundMuted;
    }

    .mw-parser-output .navbox-subgroup .navbox-group,
    .mw-parser-output .navbox-subgroup .navbox-abovebelow {
      background-color: @backgroundSemi;
    }

    .mw-parser-output tr + tr > .navbox-abovebelow,
    .mw-parser-output tr + tr > .navbox-group,
    .mw-parser-output tr + tr > .navbox-image,
    .mw-parser-output tr + tr > .navbox-list {
      border-top-color: transparent;
    }

    /* Fuuuck wikipedia */
    [style*="background-color:#EEE"],
    [style*="background:#EEE"],
    [style*="background:#d1dbdf"] {
      background-color: @backgroundSemi !important;
    }

    [style*="background-color:#EDF"],
    [style*="background:#EDF"] {
      background-color: #211823 !important;
    }
  }
}