Initial conversion to css variables

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -35,16 +35,14 @@
 
 .sidebar .nav-link {
   font-weight: 500;
-  color: #333;
 }
 
 .sidebar .nav-link .sidebaricon {
   margin-right: 4px;
-  color: #999;
 }
 
 .sidebar .nav-link.active {
-  color: $primary;
+  color: var(--bs-primary);
   font-weight: bold;
 }
 

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html

@@ -8,7 +8,7 @@
       <p *ngIf="message">{{message}}</p>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline-dark" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
+      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
       <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
         {{btnCaption}}
         <span *ngIf="!confirmButtonEnabled"> ({{seconds}})</span>

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss

@@ -42,7 +42,7 @@
   filter: brightness(0.5);
 
   &.active {
-    background-color: lighten($primary, 30%);
+    background-color: var(--ngx-primary-lighten-30);
   }
 }
 

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -3,7 +3,7 @@
   <a header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
 
 
-  <table content class="table table-sm bg-light table-hover table-borderless mb-0">
+  <table content class="table table-sm table-hover table-borderless mb-0">
     <thead>
       <tr>
         <th i18n>Created</th>

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html

@@ -6,7 +6,7 @@
     </div>
 
   </div>
-  <div class="card-body text-dark">
+  <div class="card-body text-dark bg-light">
     <ng-content select ="[content]"></ng-content>
   </div>
 </div>

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss

@@ -52,7 +52,7 @@
 }
 
 .card-selected {
-  border-color: $primary;
+  border-color: var(--bs-primary);
 
   .document-card-check {
     display: block;
@@ -60,7 +60,7 @@
 }
 
 .doc-img-background-selected {
-  background-color: $primaryFaded;
+  background-color: var(--ngx-primary-faded);
 }
 
 .card-info {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss

@@ -37,7 +37,7 @@
 }
 
 .card-selected {
-  border-color: $primary;
+  border-color:var(--bs-primary);
 
   .document-card-check {
     display: block;
@@ -45,7 +45,7 @@
 }
 
 .doc-img-background-selected {
-  background-color: $primaryFaded;
+  background-color: var(--ngx-primary-faded);
 }
 
 .card-info {
@@ -57,7 +57,7 @@
     &:hover,
     &:focus {
       background-color: transparent !important;
-      color: $primary;
+      color: var(--bs-primary);
     }
   }
 

src-ui/src/app/components/document-list/document-list.component.scss

@@ -5,7 +5,7 @@ tr {
 }
 
 .table-row-selected {
-  background-color: $primaryFaded;
+  background-color: var(--ngx-primary-faded);
 }
 
 $paperless-card-breakpoints: (

src-ui/src/styles.scss

@@ -1,8 +1,11 @@
+// bs options
+$enable-negative-margins: true;
+
+@import "node_modules/bootstrap/scss/bootstrap";
+@import "~@ng-select/ng-select/themes/default.theme.css";
 @import "theme";
 @import "theme_dark";
 @import "print";
-@import "node_modules/bootstrap/scss/bootstrap";
-@import "~@ng-select/ng-select/themes/default.theme.css";
 
 .toolbaricon {
   width: 1.2em;
@@ -114,7 +117,7 @@ body {
 }
 
 .ngx-file-drop__drop-zone--over {
-  background-color: $primaryFaded !important;
+  background-color: var(--ngx-primary-faded) !important;
 }
 
 // Bootstrap 5 tweaks
@@ -130,6 +133,6 @@ a.badge {
 }
 
 .btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle {
-    background-color: $paperless-green;
+    background-color: var(--bs-primary);
-    border-color: $paperless-green;
+    border-color: var(--bs-primary);
 }

src-ui/src/theme.scss

@@ -1,8 +1,197 @@
-$paperless-green: #17541f;
+:root {
-$primary: #17541f;
+  // base color e.g. #17541f = hsl(128, 57%, 21%)
-$primaryFaded: #d1ddd2;
+  --ngx-green: 128, 57%;
-$enable-negative-margins: true;
+  --l:21%;
+
+  --bs-primary: hsl(var(--ngx-green),var(--l));
+  --bs-primary-rgb: rgba(hsl(var(--ngx-green), var(--l)));
+  --ngx-primary-faded: #d1ddd2;
+  --ngx-primary-lighten-10: hsl(var(--ngx-green), calc(var(--l) + 10%));
+  --ngx-primary-lighten-30: hsl(var(--ngx-green), calc(var(--l) + 30%));
+  --ngx-primary-darken-10: hsl(var(--ngx-green), calc(var(--l) - 10%));
+  --ngx-primary-darken-15: hsl(var(--ngx-green), calc(var(--l) - 15%));
+  --ngx-primary-darken-25: hsl(var(--ngx-green), calc(var(--l) - 25%));
+}
+
+svg.logo {
+  .logo {
+    fill: var(--bs-primary) !important;
+  }
+  .text {
+    fill: var(--bs-body-color) !important;
+  }
+}
+
+.nav-link, .list-group-item {
+  color: var(--bs-body-color);
+}
 
 .bg-body {
-  background-color: #fff;
+  background-color: var(--bs-body-bg);
+}
+
+.bg-primary {
+  background-color: var(--bs-primary) !important;
+}
+
+.btn-primary {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+
+  &:disabled, &.disabled {
+    background-color: var(--ngx-primary-darken-10) !important;
+    border-color: var(--ngx-primary-darken-10) !important;
+  }
+}
+
+.btn-primary:hover {
+  background-color: var(--ngx-primary-darken-10);
+  border-color: var(--ngx-primary-darken-10);
+}
+
+.btn-outline-primary {
+  border-color: var(--bs-primary) !important;
+  color: var(--bs-primary) !important;
+
+  &:hover, &:focus, &.active, &:active {
+    background-color: var(--bs-primary) !important;
+    color: var(--bs-body-color) !important;
+  }
+}
+
+.dropdown.show {
+  > .btn-primary {
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary);
+  }
+
+  > .btn-outline-primary {
+    color: var(--bs-body-color) !important;
+  }
+}
+
+a, a:hover, .btn-link, .btn-link:hover {
+  color: var(--bs-primary);
+}
+
+.form-control:not(.btn),
+input,
+select,
+textarea,
+.form-select:not(.is-invalid):not(:disabled),
+.form-check-input {
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+
+  &:focus {
+    background-color: var(--ngx-bg-color-darker);
+    color: var(--bs-body-color) !important;
+  }
+}
+
+.form-check-input:checked {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.page-link {
+  color: var(--bs-primary);
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color) !important;
+
+  &:hover, &:focus {
+    background-color: var(--bs-primary) !important;
+    color: var(--bs-body-color) !important;
+  }
+}
+
+.page-item.active .page-link {
+  background-color: var(--bs-primary);
+  color: var(--bs-body-color);
+}
+
+.page-item.disabled .page-link {
+  background-color: var(--ngx-primary-darken-15);
+}
+
+.nav-tabs {
+  border-bottom: 1px solid var(--bs-border-color);
+
+  .nav-link {
+    color: var(--bs-primary);
+
+    &.active, &:hover {
+      border-color: var(--bs-border-color);
+      background-color: var(--bs-body-bg);
+      color: var(--bs-body-color);
+      border-bottom: 1px solid transparent;
+    }
+  }
+}
+
+.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: var(--bs-body-bg) !important;
+  color: var(--bs-body-color) !important;
+  border-color: var(--bs-border-color) !important;
+
+  input:focus {
+    background-color: transparent !important;
+  }
+}
+
+.input-group-text {
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+}
+
+.list-group-item {
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+
+  &:hover {
+    background-color: var(--bs-body-bg);
+  }
+}
+
+.dropdown-menu {
+  background-color: var(--bs-body-bg);
+
+  .dropdown-divider {
+    border-color: var(--bs-border-color);
+  }
+
+  .dropdown-item {
+    color: var(--bs-body-color);
+
+    &:hover {
+      background-color: var(--bs-body-bg);
+      color: var(--bs-body-color);
+    }
+  }
+}
+
+table.table {
+  color: var(--bs-body-color);
+
+  .des,.asc {
+    background-color: var(--bs-body-bg) !important;
+  }
+}
+
+.close {
+  color: var(--bs-body-color);
+}
+
+.modal .btn-close {
+  color: var(--bs-body-color);
+}
+
+.ngx-file-drop__drop-zone--over {
+  background-color: var(--ngx-primary-darken-25)
 }

src-ui/src/theme_dark.scss

@@ -1,8 +1,13 @@
 $primary-dark-mode: #45973a;
+$primary-dark-mode-rgb: 69, 151, 58;
+$primary-dark-mode-darken-10: darken($primary-dark-mode, 10%);
 $danger-dark-mode: #b71631;
+$danger-dark-mode-rgb: 183, 22, 49;
 $bg-dark-mode: #161618;
+$bg-dark-mode-rgb: 22, 22, 24;
 $bg-dark-mode-accent: #21262d;
 $bg-light-dark-mode: #1c1c1f;
+$bg-light-dark-mode-rgb: 28, 28, 31;
 $text-color-dark-mode: #abb2bf;
 $text-color-dark-mode-accent: lighten($text-color-dark-mode, 10%);
 $border-color-dark-mode: #47494f;
@@ -12,141 +17,59 @@ $border-color-dark-mode: #47494f;
 }
 
 @mixin dark-mode {
-  background-color: $bg-dark-mode !important;
+  --bs-primary: hsl(var(--ngx-green), calc(var(--l) + 10%));
-  color: $text-color-dark-mode;
+  --bs-danger: #{$danger-dark-mode};
+  --bs-danger-rgb: #{$danger-dark-mode-rgb};
+  --bs-body-bg: #{$bg-dark-mode};
+  --bs-body-bg-rgb: #{$bg-dark-mode-rgb};
+  --bs-body-color: #{$text-color-dark-mode};
+  --bs-light: #{$bg-light-dark-mode};
+  --bs-light-rgb: #{$bg-light-dark-mode-rgb};
+  --bs-border-color: #{$border-color-dark-mode};
+  --ngx-bg-color-darker: #{$bg-dark-mode-accent};
+
+  .navbar.bg-primary{
+    --bs-primary: hsl(var(--ngx-green),var(--l));
+    --bs-primary-rgb: var(--bs-primary);
+  }
   
   .navbar-brand {
-    color: $text-color-dark-mode;
+    color: var(--bs-body-color);
-  }
-
-  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-color: var(--bs-border-color) !important;
   }
 
   .border-end {
-    border-right: 1px solid $border-color-dark-mode !important;
+    border-right: 1px solid var(--bs-border-color) !important;
   }
 
   .border-start {
-    border-left: 1px solid $border-color-dark-mode !important;
+    border-left: 1px solid var(--bs-border-color) !important;
   }
 
   .border-bottom {
-    border-bottom: 1px solid $border-color-dark-mode !important;
+    border-bottom: 1px solid var(--bs-border-color) !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;
+    color: var(--bs-body-color) !important;
+  }
+
+  .card {
+    background-color: var(--bs-body-bg);
   }
 
   .modal-content, .modal-header, .modal-body, .modal-footer {
-    background-color: $bg-light-dark-mode;
+    background-color: var(--bs-body-bg);
-    border-color: $border-color-dark-mode;
+    border-color: var(--bs-border-color);
   }
 
   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;
@@ -157,8 +80,9 @@ $border-color-dark-mode: #47494f;
   .doc-img {
     mix-blend-mode: normal;
     border-radius: 0;
-    border-color: $bg-dark-mode;
+    border-color: var(--bs-border-color);
     filter: invert(10%);
+
     &.border-end {
       border-right: none !important;
     }
@@ -172,34 +96,14 @@ $border-color-dark-mode: #47494f;
     mix-blend-mode: luminosity;
   }
 
-  .toast {
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,
-    background-color: opacify($bg-light-dark-mode, .85);
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
-  }
+    background-color: $bg-light-dark-mode;
-
-  .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 */
       }
@@ -209,207 +113,21 @@ $border-color-dark-mode: #47494f;
       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 {
+  .close, .modal .btn-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;
-    }
-  }
-
-  .form-select:not(.is-invalid):not(:disabled) {
-    border-color: $border-color-dark-mode;
-  }
-
-  .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 {
@@ -436,12 +154,6 @@ $border-color-dark-mode: #47494f;
   .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 {