Dark mode settings logic

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AppViewService } from './services/app-view.service';
 
 @Component({
   selector: 'app-root',
@@ -6,8 +7,9 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  
-  constructor () {
+
+  constructor (appViewService: AppViewService) {
+    appViewService.updateDarkModeSettings()
   }
 
 

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

@@ -10,21 +10,34 @@
       <a ngbNavLink i18n>General settings</a>
       <ng-template ngbNavContent>
 
-        <h4 i18n>Document list</h4>
-        
+        <h4 i18n>Appearance</h4>
+
         <div class="form-row form-group">
           <div class="col-md-3 col-form-label">
             <span i18n>Items per page</span>
           </div>
           <div class="col">
-        
+
             <select class="form-control" formControlName="documentListItemPerPage">
               <option [ngValue]="10">10</option>
               <option [ngValue]="25">25</option>
               <option [ngValue]="50">50</option>
               <option [ngValue]="100">100</option>
             </select>
-        
+
+          </div>
+        </div>
+
+        <div class="form-row form-group">
+          <div class="col-md-3 col-form-label">
+            <span i18n>Dark mode</span>
+          </div>
+          <div class="col">
+            <app-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem" (change)="toggleDarkModeSetting()"></app-input-check>
+            <div class="custom-control custom-switch" *ngIf="!settingsForm.value.darkModeUseSystem">
+              <input type="checkbox" class="custom-control-input" id="darkModeEnabled" formControlName="darkModeEnabled" [checked]="settingsForm.value.darkModeEnabled">
+              <label class="custom-control-label" for="darkModeEnabled">Enabled</label>
+            </div>
           </div>
         </div>
 
@@ -35,7 +48,7 @@
       <ng-template ngbNavContent>
 
         <div formGroupName="savedViews">
-          
+
             <div *ngFor="let view of savedViews" [formGroupName]="view.id" class="form-row">
               <div class="form-group col-4 mr-3">
                 <label for="name_{{view.id}}" i18n>Name</label>
@@ -61,7 +74,7 @@
             </div>
 
             <div *ngIf="savedViews.length == 0" i18n>No saved views defined.</div>
-          
+
         </div>
 
       </ng-template>
@@ -71,4 +84,4 @@
   <div [ngbNavOutlet]="nav" class="border-left border-right border-bottom p-3 mb-3 shadow"></div>
 
   <button type="submit" class="btn btn-primary">Save</button>
-</form>
+</form>

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

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Renderer2  } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
 import { GENERAL_SETTINGS } from 'src/app/data/storage-keys';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { Toast, ToastService } from 'src/app/services/toast.service';
+import { AppViewService } from 'src/app/services/app-view.service';
 
 @Component({
   selector: 'app-settings',
@@ -17,17 +18,24 @@ export class SettingsComponent implements OnInit {
 
   settingsForm = new FormGroup({
     'documentListItemPerPage': new FormControl(+localStorage.getItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE) || GENERAL_SETTINGS.DOCUMENT_LIST_SIZE_DEFAULT),
+    'darkModeUseSystem': new FormControl(
+      localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM) == undefined ? GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM_DEFAULT : JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM))
+    ),
+    'darkModeEnabled': new FormControl(
+      localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_ENABLED) == undefined ? GENERAL_SETTINGS.DARK_MODE_ENABLED_DEFAULT : JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_ENABLED))
+    ),
     'savedViews': this.savedViewGroup
   })
 
+  savedViews: PaperlessSavedView[]
+
   constructor(
     public savedViewService: SavedViewService,
     private documentListViewService: DocumentListViewService,
-    private toastService: ToastService
+    private toastService: ToastService,
+    private appViewService: AppViewService
   ) { }
 
-  savedViews: PaperlessSavedView[]
-
   ngOnInit() {
     this.savedViewService.listAll().subscribe(r => {
       this.savedViews = r.results
@@ -50,9 +58,20 @@ export class SettingsComponent implements OnInit {
     })
   }
 
+  toggleDarkModeSetting() {
+    if (this.settingsForm.value.darkModeUseSystem) {
+      (this.settingsForm.controls.darkModeEnabled as FormControl).disable()
+    } else {
+      (this.settingsForm.controls.darkModeEnabled as FormControl).enable()
+    }
+  }
+
   private saveLocalSettings() {
     localStorage.setItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
+    localStorage.setItem(GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM, this.settingsForm.value.darkModeUseSystem)
+    localStorage.setItem(GENERAL_SETTINGS.DARK_MODE_ENABLED, (this.settingsForm.value.darkModeEnabled == true).toString())
     this.documentListViewService.updatePageSize()
+    this.appViewService.updateDarkModeSettings()
     this.toastService.showToast(Toast.make("Information", $localize`Settings saved successfully.`))
   }
 

src-ui/src/app/data/storage-keys.ts

@@ -8,5 +8,9 @@ export const DOCUMENT_LIST_SERVICE = {
 
 export const GENERAL_SETTINGS = {
   DOCUMENT_LIST_SIZE: 'general-settings:documentListSize',
-  DOCUMENT_LIST_SIZE_DEFAULT: 50
-}
+  DOCUMENT_LIST_SIZE_DEFAULT: 50,
+  DARK_MODE_USE_SYSTEM: 'general-settings:darkModeUseSystem',
+  DARK_MODE_USE_SYSTEM_DEFAULT: true,
+  DARK_MODE_ENABLED: 'general-settings:darkModeEnabled',
+  DARK_MODE_ENABLED_DEFAULT: false
+}

src-ui/src/app/services/app-view.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AppViewService } from './app-view.service';
+
+describe('AppViewService', () => {
+  let service: AppViewService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AppViewService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,29 @@
+import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { GENERAL_SETTINGS } from 'src/app/data/storage-keys';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppViewService {
+  private renderer: Renderer2;
+
+  constructor(rendererFactory: RendererFactory2, @Inject(DOCUMENT) private document) {
+    this.renderer = rendererFactory.createRenderer(null, null);
+  }
+
+  updateDarkModeSettings() {
+    let darkModeUseSystem = JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM)) && GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM_DEFAULT
+    let darkModeEnabled = JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_ENABLED)) || GENERAL_SETTINGS.DARK_MODE_ENABLED_DEFAULT
+
+    if (darkModeUseSystem) {
+      this.renderer.addClass(this.document.body, 'dark-mode-preferred')
+      this.renderer.removeClass(this.document.body, 'dark-mode')
+    } else {
+      this.renderer.removeClass(this.document.body, 'dark-mode-preferred')
+      darkModeEnabled ? this.renderer.addClass(this.document.body, 'dark-mode') : this.renderer.removeClass(this.document.body, 'dark-mode')
+    }
+
+  }
+
+}