Skeleton implementation of color setting

src-ui/src/app/app.component.ts

@@ -19,7 +19,7 @@ export class AppComponent implements OnInit, OnDestroy {
   constructor (private settings: SettingsService, private consumerStatusService: ConsumerStatusService, private toastService: ToastService, private router: Router) {
     let anyWindow = (window as any)
     anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.js';
-    this.settings.updateDarkModeSettings()
+    this.settings.updateAppearanceSettings()
   }
 
   ngOnDestroy(): void {

src-ui/src/app/components/manage/settings/settings.component.html

@@ -100,6 +100,22 @@
           </div>
         </div>
 
+        <div class="row mb-3">
+          <div class="col-md-3 col-form-label">
+            <span i18n>Theme Color</span>
+          </div>
+          <div class="col-3">
+            <app-input-color i18n-title title="" formControlName="themeColor" [error]="error?.color"></app-input-color>
+          </div>
+          <div class="col-2">
+            <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
+              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+              </svg><ng-container i18n>Reset</ng-container>
+            </button>
+          </div>
+        </div>
+
         <h4 class="mt-4" i18n>Bulk editing</h4>
 
         <div class="row mb-3">

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -24,6 +24,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
     'darkModeUseSystem': new FormControl(null),
     'darkModeEnabled': new FormControl(null),
     'darkModeInvertThumbs': new FormControl(null),
+    'themeColor': new FormControl(null),
     'useNativePdfViewer': new FormControl(null),
     'savedViews': this.savedViewGroup,
     'displayLanguage': new FormControl(null),
@@ -40,6 +41,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
   store: BehaviorSubject<any>
   storeSub: Subscription
   isDirty$: Observable<boolean>
+  isDirty: Boolean = false
 
   get computedDateLocale(): string {
     return this.settingsForm.value.dateLocale || this.settingsForm.value.displayLanguage || this.currentLocale
@@ -63,6 +65,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
         'darkModeUseSystem': this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM),
         'darkModeEnabled': this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED),
         'darkModeInvertThumbs': this.settings.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED),
+        'themeColor': this.settings.get(SETTINGS_KEYS.THEME_COLOR),
         'useNativePdfViewer': this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER),
         'savedViews': {},
         'displayLanguage': this.settings.getLanguage(),
@@ -97,10 +100,28 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
 
       // Initialize dirtyCheck
       this.isDirty$ = dirtyCheck(this.settingsForm, this.store.asObservable())
+
+      this.isDirty$.subscribe(dirty => {
+        this.isDirty = dirty
+      })
+      
+      // "Live" visual changes prior to save
+      this.settingsForm.get('darkModeUseSystem').valueChanges.subscribe(darkModeUseSystem => {
+        this.settings.updateAppearanceSettings(darkModeUseSystem, this.settingsForm.get('darkModeEnabled').value)
+      })
+      
+      this.settingsForm.get('darkModeEnabled').valueChanges.subscribe(darkModeEnabled => {
+        this.settings.updateAppearanceSettings(this.settingsForm.get('darkModeEnabled').value, darkModeEnabled)
+      })
+      
+      this.settingsForm.get('themeColor').valueChanges.subscribe(color => {
+        this.settings.updateAppearanceSettings(null, null, color)
+      })
     })
   }
 
   ngOnDestroy() {
+    if (this.isDirty) this.settings.updateAppearanceSettings() // in case user changed appearance but didnt save
     this.storeSub && this.storeSub.unsubscribe();
   }
 
@@ -119,6 +140,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
     this.settings.set(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, this.settingsForm.value.darkModeUseSystem)
     this.settings.set(SETTINGS_KEYS.DARK_MODE_ENABLED, (this.settingsForm.value.darkModeEnabled == true).toString())
     this.settings.set(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED, (this.settingsForm.value.darkModeInvertThumbs == true).toString())
+    this.settings.set(SETTINGS_KEYS.THEME_COLOR, (this.settingsForm.value.themeColor).toString())
     this.settings.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, this.settingsForm.value.useNativePdfViewer)
     this.settings.set(SETTINGS_KEYS.DATE_LOCALE, this.settingsForm.value.dateLocale)
     this.settings.set(SETTINGS_KEYS.DATE_FORMAT, this.settingsForm.value.dateFormat)
@@ -129,7 +151,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
     this.settings.setLanguage(this.settingsForm.value.displayLanguage)
     this.store.next(this.settingsForm.value)
     this.documentListViewService.updatePageSize()
-    this.settings.updateDarkModeSettings()
+    this.settings.updateAppearanceSettings()
     this.toastService.showInfo($localize`Settings saved successfully.`)
   }
 
@@ -165,4 +187,8 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
     }
 
   }
+
+  private clearThemeColor() {
+    this.settingsForm.get('themeColor').patchValue('');
+  }
 }

src-ui/src/app/services/settings.service.ts

@@ -27,6 +27,7 @@ export const SETTINGS_KEYS = {
   DARK_MODE_USE_SYSTEM: 'general-settings:dark-mode:use-system',
   DARK_MODE_ENABLED: 'general-settings:dark-mode:enabled',
   DARK_MODE_THUMB_INVERTED: 'general-settings:dark-mode:thumb-inverted',
+  THEME_COLOR: 'general-settings:theme:color',
   USE_NATIVE_PDF_VIEWER: 'general-settings:document-details:native-pdf-viewer',
   DATE_LOCALE: 'general-settings:date-display:date-locale',
   DATE_FORMAT: 'general-settings:date-display:date-format',
@@ -43,6 +44,7 @@ const SETTINGS: PaperlessSettings[] = [
   {key: SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, type: "boolean", default: true},
   {key: SETTINGS_KEYS.DARK_MODE_ENABLED, type: "boolean", default: false},
   {key: SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED, type: "boolean", default: true},
+  {key: SETTINGS_KEYS.THEME_COLOR, type: "string", default: ""},
   {key: SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, type: "boolean", default: false},
   {key: SETTINGS_KEYS.DATE_LOCALE, type: "string", default: ""},
   {key: SETTINGS_KEYS.DATE_FORMAT, type: "string", default: "mediumDate"},
@@ -68,12 +70,13 @@ export class SettingsService {
   ) {
     this.renderer = rendererFactory.createRenderer(null, null);
 
-    this.updateDarkModeSettings()
+    this.updateAppearanceSettings()
   }
 
-  updateDarkModeSettings(): void {
+  public updateAppearanceSettings(darkModeUseSystem = null, darkModeEnabled = null, themeColor = null): void {
-    let darkModeUseSystem = this.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)
+    darkModeUseSystem ??= this.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)
-    let darkModeEnabled = this.get(SETTINGS_KEYS.DARK_MODE_ENABLED)
+    darkModeEnabled ??= this.get(SETTINGS_KEYS.DARK_MODE_ENABLED)
+    themeColor ??= this.get(SETTINGS_KEYS.THEME_COLOR);
 
     if (darkModeUseSystem) {
       this.renderer.addClass(this.document.body, 'color-scheme-system')
@@ -83,6 +86,9 @@ export class SettingsService {
       darkModeEnabled ? this.renderer.addClass(this.document.body, 'color-scheme-dark') : this.renderer.removeClass(this.document.body, 'color-scheme-dark')
     }
 
+    if (themeColor) {
+      console.log('set theme color')
+    }
   }
 
   getLanguageOptions(): LanguageOption[] {