Login view with the support of dark theme

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

@@ -0,0 +1,3 @@
+<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/shared/theme-toggle/theme-toggle.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThemeToggleComponent } from './theme-toggle.component';
+
+describe('ThemeToggleComponent', () => {
+  let component: ThemeToggleComponent;
+  let fixture: ComponentFixture<ThemeToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ThemeToggleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ThemeToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,30 @@
+import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ThemingService } from './theming.service';
+
+@Component({
+  selector: 'mifosx-theme-toggle',
+  templateUrl: './theme-toggle.component.html',
+  styleUrls: ['./theme-toggle.component.scss']
+})
+export class ThemeToggleComponent implements OnInit, OnChanges {
+
+  darkModeOn: boolean;
+
+  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.darkModeOn = !this.darkModeOn;
+    this.themingService.setDarkMode(this.darkModeOn);
+  }
+
+}

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

@@ -0,0 +1,53 @@
+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
+    this.setDarkMode(this.darkModeOn);
+
+    // 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');
+    }
+  }
+
+  setInitialDarkMode(): void {
+    this.setDarkMode(this.darkModeOn);
+  }
+}