Login view with the support of dark theme

src/app/shared/footer/footer.component.html

@@ -2,25 +2,25 @@
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
   <div fxLayout="column" class="m-b-20 content">
 
-  <table class="versions">
-    <tr>
-      <td class="footer-content">Mifos</td>
-      <td class="right footer-content">{{ versions.mifos }} - <b>{{ hash }}</b></td>
-    </tr>
-    <tr>
-      <td class="footer-content">Fineract</td>
-      <td class="right footer-content">{{ versions.fineract.version }} - <b>{{ versions.fineract.hash }}</b></td>
-    </tr>
-    <tr *ngIf="displayBackEndInfo">
-      <td colspan="2" class="center footer-content"><b>{{ server }}</b></td>
-    </tr>
-    <tr *ngIf="isBusinessDateDefined">
-      <td class="footer-content">{{'labels.text.Current Business Date' | translate}}:</td>
-      <td class="center footer-content business-date"><b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></td>
-    </tr>
-  </table>
+    <table class="versions">
+      <tr>
+        <td class="footer-content">Mifos</td>
+        <td class="right footer-content">{{ versions.mifos }} - <b>{{ hash }}</b></td>
+      </tr>
+      <tr>
+        <td class="footer-content">Fineract</td>
+        <td class="right footer-content">{{ versions.fineract.version }} - <b>{{ versions.fineract.hash }}</b></td>
+      </tr>
+      <tr *ngIf="displayBackEndInfo">
+        <td colspan="2" class="center footer-content"><b>{{ server }}</b></td>
+      </tr>
+      <tr *ngIf="isBusinessDateDefined">
+        <td class="footer-content">{{'labels.text.Current Business Date' | translate}}:</td>
+        <td class="center footer-content business-date"><b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></td>
+      </tr>
+    </table>
   </div>
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
   <p fxFlexAlign="center" class="footer-content">{{ 'APP_NAME' | translate}} {{'labels.text.by' | translate}} Mifos
   </p>
-</div>
+</div>

src/app/shared/footer/footer.component.scss

@@ -5,6 +5,12 @@
 
   .content {
     max-width: 30%;
+    width: 30%;
+
+    .versions {
+      width: 100%;
+      color: $status-inactive;
+    }
 
     .footer-content {
       margin: 0;
@@ -20,9 +26,6 @@
     color: $status-approved;
   }
 
-  .versions {
-    color: $status-inactive;
-  }
 
   table {
     border: none;

src/app/shared/shared.module.ts

@@ -22,7 +22,6 @@ import { SearchToolComponent } from './search-tool/search-tool.component';
 import { KeyboardShortcutsDialogComponent } from './keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
 import { ServerSelectorComponent } from './server-selector/server-selector.component';
 import { TenantSelectorComponent } from './tenant-selector/tenant-selector.component';
-import { ThemeToggleComponent } from '../theme-toggle/theme-toggle.component';
 
 /** Custom Modules */
 import { IconsModule } from './icons.module';
@@ -47,6 +46,7 @@ import { StepperButtonsComponent } from './steppers/stepper-buttons/stepper-butt
 import { GlAccountSelectorComponent } from './accounting/gl-account-selector/gl-account-selector.component';
 import { GlAccountDisplayComponent } from './accounting/gl-account-display/gl-account-display.component';
 import { ViewSavingsAccountingDetailsComponent } from './accounting/view-savings-accounting-details/view-savings-accounting-details.component';
+import { ThemeToggleComponent } from './theme-toggle/theme-toggle.component';
 
 /**
  * Shared Module
@@ -132,7 +132,7 @@ import { ViewSavingsAccountingDetailsComponent } from './accounting/view-savings
     GlAccountSelectorComponent,
     GlAccountDisplayComponent,
     ViewSavingsAccountingDetailsComponent,
-    ThemeToggleComponent,
+    ThemeToggleComponent
   ]
 })
 export class SharedModule { }

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);
+  }
+}