Fix: Dark theme details and auto detection

src/app/clients/clients-view/clients-view.component.scss

@@ -8,7 +8,6 @@
         line-height: 25px;
       }
       .signature {
-        background-color: #0a6aac;
         color: white;
         text-align: center;
         margin: 0;

src/app/clients/clients.component.scss

@@ -22,7 +22,3 @@ table {
     color : black;
   }
 }
-
-.status {
-  color: black;
-}

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.scss

@@ -6,11 +6,6 @@
   margin: 0;
 }
 
-.cover {
-  background-color: #f2f2f2;
-  margin-top: 1%;
-}
-
 h4 {
   font-weight: 400;
   margin: 1% 0;

src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html

@@ -37,7 +37,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ jobData.active }}
+          {{ jobData.active | yesNo }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">

src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.scss

@@ -1,7 +1,3 @@
-a{
-    color: blue;
-}
-
 .container {
   max-width: 37rem;
 
@@ -11,4 +7,4 @@ a{
       word-wrap: break-word;
     }
   }
-}
+}

src/app/theme-toggle/theme-toggle.component.html

@@ -1,3 +1,3 @@
-<button mat-icon-button (click)="toggleTheme()">
-    <mat-icon>{{ isDarkMode ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
+<button mat-icon-button (click)="toggleTheme()" class="m-l-15 m-r-5">
+    <mat-icon>{{ darkModeOn ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
 </button>

src/app/theme-toggle/theme-toggle.component.ts

@@ -1,20 +1,28 @@
-import { Component } from '@angular/core';
-import { ThemeService } from '../theme.service';
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ThemingService } from './theming.service';
 
 @Component({
   selector: 'theme-toggle-component',
   templateUrl: './theme-toggle.component.html',
   styleUrls: ['./theme-toggle.component.scss'],
 })
-export class ThemeToggleComponent {
-  isDarkMode: boolean;
+export class ThemeToggleComponent implements OnInit, OnChanges {
+  darkModeOn: boolean;
 
-  constructor(private themeService: ThemeService) {
-    this.isDarkMode = this.themeService.isDarkMode();
+  constructor(private themingService: ThemingService) {
+    this.darkModeOn = this.themingService.isDarkMode();
+  }
+
+  ngOnInit(): void {
+    this.darkModeOn = this.themingService.isDarkMode();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.darkModeOn = this.themingService.isDarkMode();
   }
 
   toggleTheme() {
-    this.isDarkMode = !this.isDarkMode;
-    this.themeService.setDarkMode(this.isDarkMode);
+    this.darkModeOn = !this.darkModeOn;
+    this.themingService.setDarkMode(this.darkModeOn);
   }
 }

src/app/theme-toggle/theming.service.ts

@@ -0,0 +1,51 @@
+import { ApplicationRef, Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemingService {
+  private darkModeOn = false;
+
+  themes = ["dark-theme", "light-theme"]; // <- list all themes in this array
+  theme = new BehaviorSubject("light-theme"); // <- initial theme
+
+  constructor(private ref: ApplicationRef) {
+    // Initially check if dark mode is enabled on system
+    this.darkModeOn =
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches;
+    
+    // If dark mode is enabled then directly switch to the dark-theme
+    if(this.darkModeOn){
+      this.theme.next("dark-theme");
+    }
+
+    // Watch for changes of the preference
+    window.matchMedia("(prefers-color-scheme: dark)").addListener(e => {
+      const turnOn = e.matches;
+      this.theme.next(turnOn ? "dark-theme" : "light-theme");
+
+      // Trigger refresh of UI
+      this.ref.tick();
+    });
+  }
+
+  isDarkMode(): boolean {
+    this.darkModeOn =
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return this.darkModeOn;
+  }
+
+  setDarkMode(isDarkMode: boolean) {
+    this.darkModeOn = isDarkMode;
+    if (isDarkMode) {
+      document.body.classList.add('dark-theme');
+      this.theme.next("dark-theme");
+    } else {
+      document.body.classList.remove('dark-theme');
+      this.theme.next("light-theme");
+    }
+  }
+}

src/app/theme.service.spec.ts

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

src/app/theme.service.ts

@@ -1,21 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ThemeService {
-  private darkMode = false;
-
-  isDarkMode() {
-    return this.darkMode;
-  }
-
-  setDarkMode(isDarkMode: boolean) {
-    this.darkMode = isDarkMode;
-    if (isDarkMode) {
-      document.body.classList.add('dark-theme');
-    } else {
-      document.body.classList.remove('dark-theme');
-    }
-  }
-}

src/app/web-app.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, HostListener } from '@angular/core';
+import { Component, OnInit, HostListener, HostBinding } from '@angular/core';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -27,6 +27,7 @@ import { KeyboardShortcutsConfiguration } from './keyboards-shortcut-config';
 import { Dates } from './core/utils/dates';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { I18nService } from './core/i18n/i18n.service';
+import { ThemingService } from './theme-toggle/theming.service';
 
 /** Initialize Logger */
 const log = new Logger('MifosX');
@@ -104,8 +105,11 @@ export class WebAppComponent implements OnInit {
               private alertService: AlertService,
               private settingsService: SettingsService,
               private authenticationService: AuthenticationService,
+              private themingService: ThemingService,
               private dateUtils: Dates) { }
 
+  @HostBinding('class') public cssClass: string;
+
   /**
    * Initial Setup:
    *
@@ -120,6 +124,10 @@ export class WebAppComponent implements OnInit {
    * 5) Alerts
    */
   ngOnInit() {
+    this.themingService.theme.subscribe((theme: string) => {
+      this.cssClass = theme;
+    });
+
     // Setup logger
     if (environment.production) {
       Logger.enableProductionMode();