diff --git a/src-ui/src/app/components/manage/settings/settings.component.ts b/src-ui/src/app/components/manage/settings/settings.component.ts
index 2ca146dc4..376192bd3 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/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
storeSub: Subscription
isDirty$: Observable
+ 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('');
+ }
}
diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts
index 35f157226..0923ccdde 100644
--- a/src-ui/src/app/services/settings.service.ts
+++ b/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 {
- let darkModeUseSystem = this.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)
- let darkModeEnabled = this.get(SETTINGS_KEYS.DARK_MODE_ENABLED)
+ public updateAppearanceSettings(darkModeUseSystem = null, darkModeEnabled = null, themeColor = null): void {
+ darkModeUseSystem ??= this.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM)
+ 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[] {