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

$primary-dark-mode: #45973a;
$danger-dark-mode: #b71631;
$bg-dark-mode: #161618;
$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;
    }
  }

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

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

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

  .border-left {
    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;
    }

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

  .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;
  }

  .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;

    &.border-right {
      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;
  }

  .close {
    color: $text-color-dark-mode;
    text-shadow: 0 1px 0 #666;
  }

  .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;
    }
  }

  .btn-outline-secondary {
    border-color: $text-color-dark-mode;
    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-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;
  }

  .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;
  }

  .custom-control-label:before {
    background-color: $bg-dark-mode;
    color: $text-color-dark-mode;
  }

  .custom-control-input:checked ~ .custom-control-label::before {
    color: $text-color-dark-mode-accent;
  }

  .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;
  }
}

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