Just messing around

[ci skip]

diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts
index 9e1b3e360e42e75edf71c5099d1dd3b8d0835bd3..a5c271fa4e7aaa75f69e958113604689c101e715 100644 (file)
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -425,6 +425,12 @@ export class SettingsService {
       )
     }
 
+    this._renderer.setAttribute(
+      this.document.documentElement,
+      'data-bs-theme',
+      'dark-flat'
+    )
+
     if (themeColor?.length) {
       const hsl = hexToHsl(themeColor)
       const bgBrightnessEstimate = estimateBrightnessForColor(themeColor)

diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 9f3c9cbe9dfbb47909d8529d857b194a6f523be6..cc3841417147a259c3d608cf3a707199e12830f8 100644 (file)
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -366,3 +366,52 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   }
 
 }
+
+[data-bs-theme="dark-flat"] {
+  body:not(.primary-light):not(.primary-dark) {
+    @include paperless-green-dark-mode;
+
+    .navbar.bg-primary {
+      // navbar is og green in dark mode
+      @include paperless-green;
+    }
+  }
+
+  @include dark-mode;
+
+  .btn-outline-primary, .btn-outline-secondary {
+    border-color: var(--pngx-bg-alt) !important;
+    background-color: var(--pngx-bg-alt) !important;
+    color: var(--bs-body-color) !important;
+  }
+
+  .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary.active {
+    background-color: var(--pngx-bg-darker) !important;
+    color: var(--pngx-body-color-accent) !important;
+  }
+
+  .btn-outline-danger {
+    border-color: var(--pngx-bg-alt) !important;
+    background-color: var(--pngx-bg-alt) !important;
+    color: var(--bs-danger) !important;
+
+    &:hover, &:focus, &.active, &:active {
+      background-color: var(--pngx-bg-darker) !important;
+      color: var(--bs-danger) !important;
+    }
+  }
+
+  .form-control:not(.btn), input, select, textarea,
+  .form-select:not(.is-invalid):not(:disabled), .form-check-input,
+  .ng-select .ng-select-container {
+    background-color: var(--pngx-bg-darker) !important;
+    color: var(--bs-body-color) !important;
+    border-color: var(--pngx-bg-alt) !important;
+  }
+
+  .input-group .input-group-text {
+    background-color: var(--pngx-bg-alt);
+    color: var(--bs-body-color);
+    border-color: var(--pngx-bg-alt);
+  }
+}