paperless-ngx/src-ui/src/theme_dark.scss

$primary-dark-mode: #45973a;
$danger-dark-mode: #b71631;
$bg-dark-mode: #161618;
$bg-dark-mode-accent: #21262d;
$bg-light-dark-mode: #1c1c1f;
$text-color-dark-mode: #abb2bf;
$text-color-dark-mode-accent: lighten($text-color-dark-mode, 10%);
$border-color-dark-mode: #47494f;

* {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

@mixin dark-mode {
  background-color: $bg-dark-mode !important;
  color: $text-color-dark-mode;

  .navbar-brand {
    color: $text-color-dark-mode;
  }

  svg.logo {
    .leaf {
      color: $primary-dark-mode !important;
    }
    .text {
      fill: $text-color-dark-mode !important;
    }
  }

  .bg-light {
    background-color: $bg-light-dark-mode !important;

    a,
    div {
      color: $text-color-dark-mode;
    }
  }

  .bg-body {
    background-color: $bg-dark-mode !important;
  }

  .text-light {
    color: $text-color-dark-mode !important;
  }

  .border {
    border-color: $border-color-dark-mode !important;
  }

  .border-end {
    border-right: 1px solid $border-color-dark-mode !important;
  }

  .border-start {
    border-left: 1px solid $border-color-dark-mode !important;
  }

  .border-bottom {
    border-bottom: 1px solid $border-color-dark-mode !important;
  }

  .nav-link {
    color: $text-color-dark-mode !important;

    &.active {
      background-color: $bg-dark-mode;
      color: $text-color-dark-mode;
      border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;

      .close {
        background-color: inherit !important;
      }
    }

    &:hover {
      color: $text-color-dark-mode-accent !important;
      border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
    }
  }

  .page-item.active .page-link {
    background-color: darken($primary-dark-mode, 10%);
  }

  .nav-tabs {
    border-color: $border-color-dark-mode;

    .nav-link {
      color: $primary-dark-mode !important;

      &.active {
        color: $text-color-dark-mode !important;
      }
    }
  }

  .dropdown-menu {
    background-color: $bg-light-dark-mode;

    .dropdown-divider {
      border-color: $border-color-dark-mode;
    }

    .dropdown-item {
      color: $text-color-dark-mode;

      &:hover {
        background-color: $bg-light-dark-mode;
        color: $text-color-dark-mode;
      }
    }

    .dropdown-item.disabled {
      color: darken($text-color-dark-mode, 20%);
    }
  }

  .card {
    background-color: $bg-light-dark-mode;

    .card-text {
      color: $text-color-dark-mode;
    }
  }

  .text-dark {
    color: $text-color-dark-mode !important;
  }

  .modal-content, .modal-header, .modal-body, .modal-footer {
    background-color: $bg-light-dark-mode;
    border-color: $border-color-dark-mode;
  }

  app-tag .badge {
    filter: brightness(.8);
  }

  .badge-light {
    background-color: darken($bg-dark-mode, 20%);
    color: $text-color-dark-mode-accent;
  }

  .badge.border-light {
    border-color: $bg-dark-mode !important;
  }

  .doc-img-container {
    border: none !important;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    overflow: hidden;
  }

  .doc-img {
    mix-blend-mode: normal;
    border-radius: 0;
    border-color: $bg-dark-mode;
    filter: invert(10%);
    &.border-end {
      border-right: none !important;
    }
  }

  .doc-img.inverted {
    filter: invert(95%) hue-rotate(180deg);
  }

  .card-selected .doc-img {
    mix-blend-mode: luminosity;
  }

  .toast {
    background-color: opacify($bg-light-dark-mode, .85);
  }

  .toast-header {
    background-color: opacify($bg-dark-mode, .85);
  }

  a,
  .card-title a {
    color: $primary-dark-mode;

    &:hover {
      color: lighten($primary, 10%);
    }
  }

  table {
    background-color: $bg-dark-mode;
    color: $text-color-dark-mode;
    border-color: $border-color-dark-mode;

    .des,
    .asc {
      background-color: transparent !important;
      color: $text-color-dark-mode;
      border-color: $border-color-dark-mode;

      &::after {
        filter: invert(0.8); /* arrow is a black inline png bkgd image (!) so use filter */
      }
    }

    tr:hover {
      background-color: $bg-light-dark-mode;
      color: $text-color-dark-mode-accent;
    }
  }

  .table td,
  .table th {
    border-color: $border-color-dark-mode;
  }

  .table-row-selected {
    background-color: $bg-light-dark-mode;
  }

  .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: $text-color-dark-mode-accent;
  }

  .close {
    color: $text-color-dark-mode;
    text-shadow: 0 1px 0 #666;
  }
  
  .modal .btn-close {
    color: $text-color-dark-mode;
    text-shadow: 0 1px 0 #666;
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  .btn-outline-primary {
    border-color: $primary-dark-mode;
    color: $primary-dark-mode;

    &:not(:disabled):not(.disabled).active,
    &:not(:disabled):not(.disabled):hover {
      background-color: darken($primary-dark-mode, 10%);
      border-color: darken($primary-dark-mode, 10%);
      color: $text-color-dark-mode-accent;
    }

    &.disabled.active {
      background-color: darken($primary-dark-mode, 10%);
    }
  }

  .btn-outline-secondary {
    border-color: darken($text-color-dark-mode, 30%);
    color: $text-color-dark-mode;

    &:not(:disabled):not(.disabled):hover {
      background-color: $bg-dark-mode;
    }
  }

  .btn-outline-danger {
    border-color: $danger-dark-mode;
    color: $danger-dark-mode;

    &:not(:disabled):not(.disabled):hover {
      background-color: darken($danger-dark-mode, 10%);
      border-color: darken($danger-dark-mode, 10%);
      color: $text-color-dark-mode-accent;
    }
  }

  .btn-outline-dark {
    border-color: $border-color-dark-mode;
    color: $text-color-dark-mode;

    &:not(:disabled):not(.disabled):hover {
      color: $text-color-dark-mode-accent;
    }
  }

  .btn-light:not(:disabled):not(.disabled) {
    background-color: $bg-dark-mode;
    color: $text-color-dark-mode-accent;

    &:hover {
      background-color: $text-color-dark-mode;
      color: $bg-dark-mode;
    }
  }

  .btn-link:not(:disabled):not(.disabled) {
    color: $primary-dark-mode;
  }

  .btn-link:hover,
  .btn-outline-primary:not(:disabled):not(.disabled).active,
  .btn-outline-primary:not(:disabled):not(.disabled):active,
  .show > .btn-outline-primary.dropdown-toggle {
    color: $text-color-dark-mode-accent;
  }

  button.bg-light:hover {
    background-color: $bg-dark-mode !important;
  }

  .card-footer button:hover {
    color: $primary-dark-mode !important;
  }

  .form-control:not(.is-invalid):not(.btn),
  input:not(.is-invalid),
  textarea:not(.is-invalid) {
    border-color: $border-color-dark-mode; /* we dont want to override controls that get highlighting for errors */
  }

  .form-control:not(.btn),
  input,
  select,
  textarea {
    background-color: $bg-dark-mode;
    color: $text-color-dark-mode;

    &::placeholder {
      color: $text-color-dark-mode;
    }

    &:focus {
      background-color: $bg-light-dark-mode !important;
      color: darken($text-color-dark-mode, 10%) !important;
    }
  }

  .ng-select-container,
  .ng-select.ng-select-opened > .ng-select-container,
  .ng-dropdown-panel,
  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
    background-color: $bg-dark-mode;
    color: $text-color-dark-mode;
    border-color: $border-color-dark-mode;

    input:focus {
      background-color: transparent !important;
    }
  }

  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,
  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
    background-color: $bg-light-dark-mode;
  }

  .input-group-text {
    color: $text-color-dark-mode;
    background-color: $bg-light-dark-mode;
    border-color: $border-color-dark-mode;
  }

  .list-group-item {
    color: $text-color-dark-mode;
    background-color: $bg-light-dark-mode;
    border-color: $border-color-dark-mode;
  }

  .page-item.disabled .page-link {
    background-color: $bg-dark-mode;
    border-color: $border-color-dark-mode;
  }

  .list-group-item,
  .page-link {
    background-color: $bg-light-dark-mode;
    border-color: $border-color-dark-mode;
  }

  .page-item.active .page-link {
    border-color: $border-color-dark-mode;
    color: $text-color-dark-mode-accent;
  }

  .progress {
    background-color: $border-color-dark-mode;
  }

  .alert-danger {
    color: $text-color-dark-mode-accent;
    background-color: darken($danger-dark-mode, 20%);
    border-color: darken($danger-dark-mode, 20%);
  }

  .bg-dark {
    background-color: $bg-light-dark-mode !important;
  }

  .ngx-file-drop__drop-zone--over {
    background-color: darken($primary-dark-mode, 35%) !important;
  }

  .alert-secondary {
    background-color: $bg-light-dark-mode;
    border-color: darken($bg-light-dark-mode, 10%);
    color: $text-color-dark-mode-accent;
  }

  .progress-bar.bg-primary {
    background-color: darken($primary-dark-mode, 5%) !important;
  }

  .popover {
    .popover-header,
    .popover-body {
      background-color: $bg-dark-mode-accent;
      border-color: $border-color-dark-mode;
    }
  }

  $placements: 'top', 'right', 'bottom', 'left';

  @each $placement in $placements {
    .bs-popover-#{$placement} > .arrow::after,
    .bs-popover-auto[x-placement^=#{$placement}] > .arrow::after {
      border-#{$placement}-color: $bg-dark-mode-accent;
    }
  }

  .bs-popover-bottom .popover-header::before,
  .bs-popover-auto[x-placement^=bottom] .popover-header::before {
    border-bottom-color: $bg-dark-mode-accent;
  }

  .ngb-dp-header,
  .ngb-dp-weekdays,
  .ngb-dp-month {
    background-color: $bg-light-dark-mode;
  }
}

body.color-scheme-dark {
  @include dark-mode;
}
body.color-scheme-system {
  @media (prefers-color-scheme: dark) {
    @include dark-mode;
  }
}