Rework dark mode styles (#402)

Inspired by YouTube's dark mode

assets/css/_darkmode.scss

@@ -0,0 +1,290 @@
+$border-color-light: #606060;
+$border-color-dark: #333;
+$box-shadow-color: #333;
+$diff-pos: #00b400;
+$diff-neg: #F73D3D;
+$dropdown-background-color: #222;
+$dropdown-background-hover-color: #333;
+$font-color: #aaa;
+$scrollbar-color: #aaa;
+$link-color-blue: #09f;
+$link-color-light-gray: #aaa;
+$link-color-dark-gray: #999;
+$input-field-bg-color-gray: #111;
+$tooltip-bg: #333;
+$tooltip-border: #606060;
+$tooltip-shadow: #333;
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    scrollbar-color: $scrollbar-color transparent;
+  }
+
+  /** HEADER **/
+
+  body,
+  #wrapper,
+  .panel-body,
+  .xt-toc {
+    color: $font-color;
+    background: #181818;
+  }
+
+  .xt-toc.fixed {
+    box-shadow: 5px 5px 8px $box-shadow-color;
+  }
+
+  .home-link:after,
+  [role=separator] {
+    display: none;
+  }
+
+  .form-label,
+  .dropdown-menu,
+  .dropdown.open {
+    background: $dropdown-background-color;
+  }
+
+  .dropdown-menu {
+    box-shadow: 0 6px 12px $box-shadow-color;
+  }
+
+  .dropdown-menu > li > a,
+  .dropdown-menu > .active > a {
+    background: $dropdown-background-color;
+    color: $link-color-dark-gray;
+
+    &:hover {
+      background: $dropdown-background-hover-color;
+      color: $link-color-dark-gray;
+    }
+  }
+
+  .navbar-default {
+    border: 0;
+  }
+
+  .navbar-default .navbar-nav > li > a {
+    color: $link-color-dark-gray;
+
+    &:focus,
+    &:hover {
+      color: $link-color-light-gray;
+    }
+  }
+
+  header {
+    background: #212121 !important;
+  }
+
+  /** STAT LISTS (i.e. /ec-generalstats) **/
+
+  .stat-list--group > tr:first-child > td {
+    border-color: $border-color-light !important;
+  }
+
+  /** TABLES (USUALLY A LIST OF EDITS, LOG CHANGES, ETC. **/
+
+  .table-bordered,
+  .table-bordered > tbody > tr > td,
+  .table-bordered > thead > tr > th,
+  .table-bordered > tfoot > tr > th {
+    border-color: $border-color-light;
+  }
+
+  .table-striped > tbody > tr {
+    &:nth-of-type(2n+1) {
+      background-color: transparent;
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .table-sticky-header .sticky-heading {
+    background: $input-field-bg-color-gray;
+  }
+
+  /** LINKS **/
+
+  a,
+  a:hover {
+    color: $link-color-blue;
+  }
+
+  /** OUTER PANEL **/
+
+  .panel-primary,
+  .panel-primary .panel-heading {
+    border-color: $border-color-light;
+  }
+
+  .panel-primary > .panel-heading,
+  .panel-primary > .panel-heading a,
+  .panel-primary > .panel-heading a:hover,
+  .help-icon,
+  .help-icon:hover {
+    color: $link-color-light-gray;
+  }
+
+  h4 {
+    color: $font-color;
+  }
+
+  .panel {
+    background-color: transparent;
+  }
+
+  /** INNER PANEL **/
+
+  .panel-default > .panel-heading,
+  .panel-default,
+  hr {
+    border-color: $border-color-dark;
+  }
+
+  /** FORMS **/
+
+  .form-label,
+  .form-control {
+    border-color: #333;
+  }
+
+  .form-control:focus {
+    border-color: $border-color-light;
+    box-shadow: inset 0 1px 1px $box-shadow-color, 0 0 8px $box-shadow-color;
+  }
+
+  .form-label,
+  .form-control,
+  label {
+    color: $link-color-dark-gray;
+  }
+
+  .form-control {
+    color: #999;
+    background: $input-field-bg-color-gray;
+  }
+
+  /** BLAME **/
+
+  .blame .diff-context {
+    background: transparent;
+    color: $link-color-light-gray;
+  }
+  .diffchange-inline {
+    color: #333;
+  }
+
+  /** BUTTONS **/
+
+  .btn-default {
+    color: $link-color-dark-gray;
+    background: #222;
+    border-color: #222;
+
+    svg {
+      fill: $link-color-dark-gray;
+    }
+  }
+
+  .open .btn-default svg,
+  .btn-default:hover svg {
+    fill: $dropdown-background-hover-color;
+  }
+
+  /** SELECT2 **/
+
+  .select2-container--default .select2-selection--multiple,
+  .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background: transparent;
+  }
+  .select2-dropdown {
+    background-color: $dropdown-background-color;
+  }
+  .categoryedits .select2-selection--multiple {
+    border-color: $border-color-dark !important;
+  }
+  .categoryedits .select2-results__option--highlighted,
+  .select2-container--default .select2-results__option[aria-selected="true"] {
+    background-color: $dropdown-background-hover-color !important;
+  }
+
+  .alert .close {
+    text-shadow: none;
+    opacity: 0.8;
+  }
+
+  .alert-info {
+    color: #999;
+    background: #012;
+    border: 0;
+  }
+
+  .alert-warning {
+    background-color: #8a6d3b;
+    color: #fcf8e3;
+  }
+
+  .alert-danger {
+    background-color: #a94442;
+    border-color: #FF6B6B;
+    color: #1B1818;
+  }
+
+  canvas,
+  .color-icon {
+    background: transparent;
+    //filter: invert(1) hue-rotate(180deg);
+  }
+
+  /** TOOLTIPS **/
+
+  .tooltipcss .tooltip-body {
+    background: $tooltip-bg;
+    border-color: $tooltip-border;
+    box-shadow: 5px 5px 8px $tooltip-shadow;
+    color: $font-color;
+
+    &::before {
+      border-color: transparent $tooltip-border transparent transparent;
+    }
+    &::after {
+      border-color: transparent $tooltip-bg transparent transparent;
+    }
+  }
+  body.rtl .tooltipcss .tooltip-body {
+    &::before {
+      border-color: transparent transparent transparent $tooltip-border;
+    }
+    &::after {
+      border-color: transparent transparent transparent $tooltip-bg;
+    }
+  }
+
+  /** DIFFS **/
+
+  .diff-pos,
+  .diff-pos::before {
+    color: $diff-pos;
+  }
+  .diff-neg {
+    color: $diff-neg;
+  }
+
+  /* OTHER */
+
+  .reverted-edit {
+    background: #4e4c40 !important;
+
+    .text-info {
+      color: #74cefa;
+    }
+
+    .text-muted {
+      color: #909090;
+    }
+  }
+
+}