From daa2c1abb2124057f68f29168e18dec3ba2f9773 Mon Sep 17 00:00:00 2001
From: Pranav Deshmukh <113667044+pranav-deshmukh@users.noreply.github.com>
Date: Thu, 27 Feb 2025 23:41:02 +0530
Subject: [PATCH] fix: Working of theme selector (#2285)

---
 .../theme-picker/theme-storage.service.ts     | 66 +++++++++++--------
 src/main.scss                                 |  5 ++
 src/theme/deeppurple-amber.scss               | 15 +++++
 src/theme/indigo-pink.scss                    | 11 ++++
 src/theme/mifosx-theme.scss                   |  1 +
 src/theme/pictonblue-yellowgreen.scss         | 17 +++++
 src/theme/pink-bluegrey.scss                  | 11 ++++
 src/theme/purple-green.scss                   | 11 ++++
 8 files changed, 108 insertions(+), 29 deletions(-)
 create mode 100644 src/theme/deeppurple-amber.scss
 create mode 100644 src/theme/indigo-pink.scss
 create mode 100644 src/theme/pictonblue-yellowgreen.scss
 create mode 100644 src/theme/pink-bluegrey.scss
 create mode 100644 src/theme/purple-green.scss

diff --git a/src/app/shared/theme-picker/theme-storage.service.ts b/src/app/shared/theme-picker/theme-storage.service.ts
index 910e1b0a1..8fc4d9adf 100644
--- a/src/app/shared/theme-picker/theme-storage.service.ts
+++ b/src/app/shared/theme-picker/theme-storage.service.ts
@@ -1,65 +1,73 @@
-/** Angular Imports */
 import { Injectable, EventEmitter } from '@angular/core';
-
-/** Custom Model */
 import { Theme } from './theme.model';
-
-/** Custom Services */
 import { ThemeManagerService } from './theme-manager.service';
 
-/**
- * Theme storage service.
- */
 @Injectable({
   providedIn: 'root'
 })
 export class ThemeStorageService {
-  /** Key to store current theme of application in local storage. */
   private themeStorageKey = 'mifosXTheme';
-  /** Theme update event. */
   onThemeUpdate: EventEmitter<Theme>;
 
-  /**
-   * Initializes theme update event.
-   * @param {ThemeManagerService} themeManagerService
-   */
   constructor(public themeManagerService: ThemeManagerService) {
     this.onThemeUpdate = new EventEmitter<Theme>();
   }
 
-  /**
-   * Stores current theme in local storage and emits a theme update event.
-   * @param mifosXTheme
-   */
   storeTheme(mifosXTheme: Theme) {
     localStorage.setItem(this.themeStorageKey, JSON.stringify(mifosXTheme));
     this.onThemeUpdate.emit(mifosXTheme);
   }
 
-  /**
-   * @returns current theme from local storage
-   */
   getTheme(): Theme {
     return JSON.parse(localStorage.getItem(this.themeStorageKey));
   }
 
-  /**
-   * Removes current theme from local storage.
-   */
   clearTheme() {
     localStorage.removeItem(this.themeStorageKey);
   }
 
   /**
-   * Sets a new theme for the application and stores in local storage.
+   * Dynamically installs the theme by adding a class to the body.
    * @param {Theme} theme
    */
   installTheme(theme: Theme) {
-    if (theme.isDefault) {
-      this.themeManagerService.removeTheme();
-    } else {
-      this.themeManagerService.setTheme(`theme/${theme.href}`);
+    const body = document.body;
+
+    // Remove any previously applied theme classes
+    body.classList.remove(
+      'pictonblue-yellowgreen-theme',
+      'indigo-pink-theme',
+      'deeppurple-amber-theme',
+      'pink-bluegrey-theme',
+      'purple-green-theme'
+    );
+
+    if (!theme.isDefault) {
+      body.classList.add(this.getThemeClass(theme.href));
     }
+
     this.storeTheme(theme);
   }
+
+  /**
+   * Maps theme file names to their respective CSS class.
+   * @param themeHref The theme file name.
+   * @returns The CSS class name for the theme.
+   */
+  private getThemeClass(themeHref: string): string {
+    switch (themeHref) {
+      case 'pictonblue-yellowgreen.css':
+        return 'pictonblue-yellowgreen-theme';
+      case 'indigo-pink.css':
+        return 'indigo-pink-theme';
+      case 'deeppurple-amber.css':
+        return 'deeppurple-amber-theme';
+      case 'pink-bluegrey.css':
+        return 'pink-bluegrey-theme';
+      case 'purple-green.css':
+        return 'purple-green-theme';
+      default:
+        return '';
+    }
+  }
 }
diff --git a/src/main.scss b/src/main.scss
index b27b17986..3a62625d1 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -5,6 +5,11 @@
 
 // Import Default Theme for MifosX
 @use 'theme/mifosx-theme';
+@use 'theme/pictonblue-yellowgreen' as *;
+@use 'theme/indigo-pink' as *;
+@use 'theme/pink-bluegrey' as *;
+@use 'theme/deeppurple-amber' as *;
+@use 'theme/purple-green.scss' as *;
 
 // Global Imports
 
diff --git a/src/theme/deeppurple-amber.scss b/src/theme/deeppurple-amber.scss
new file mode 100644
index 000000000..dafa02017
--- /dev/null
+++ b/src/theme/deeppurple-amber.scss
@@ -0,0 +1,15 @@
+@use '@angular/material' as mat;
+
+$deeppurple-amber-primary: mat.define-palette(mat.$deep-purple-palette, 500, 300, 700);
+$deeppurple-amber-accent: mat.define-palette(mat.$amber-palette, 400, 200, 600);
+$deeppurple-amber-warn: mat.define-palette(mat.$red-palette);
+
+$deeppurple-amber-theme: mat.define-light-theme(
+  $deeppurple-amber-primary,
+  $deeppurple-amber-accent,
+  $deeppurple-amber-warn
+);
+
+.deeppurple-amber-theme {
+  @include mat.all-component-themes($deeppurple-amber-theme);
+}
diff --git a/src/theme/indigo-pink.scss b/src/theme/indigo-pink.scss
new file mode 100644
index 000000000..2d4f945a3
--- /dev/null
+++ b/src/theme/indigo-pink.scss
@@ -0,0 +1,11 @@
+@use '@angular/material' as mat;
+
+$indigo-pink-primary: mat.define-palette(mat.$indigo-palette, 500, 300, 700);
+$indigo-pink-accent: mat.define-palette(mat.$pink-palette, 400, 200, 600);
+$indigo-pink-warn: mat.define-palette(mat.$red-palette);
+
+$indigo-pink-theme: mat.define-light-theme($indigo-pink-primary, $indigo-pink-accent, $indigo-pink-warn);
+
+.indigo-pink-theme {
+  @include mat.all-component-themes($indigo-pink-theme);
+}
diff --git a/src/theme/mifosx-theme.scss b/src/theme/mifosx-theme.scss
index b28d2a414..459959ffb 100644
--- a/src/theme/mifosx-theme.scss
+++ b/src/theme/mifosx-theme.scss
@@ -10,6 +10,7 @@
 @use '../app/shares/shares-account-view/shares-account-view.component-theme.scss' as *;
 @use 'content' as *;
 @use 'dark_content' as *;
+@use 'pictonblue-yellowgreen' as *;
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
diff --git a/src/theme/pictonblue-yellowgreen.scss b/src/theme/pictonblue-yellowgreen.scss
new file mode 100644
index 000000000..b28c347fc
--- /dev/null
+++ b/src/theme/pictonblue-yellowgreen.scss
@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+
+$pictonblue-yellowgreen-primary: mat.define-palette(mat.$blue-palette, 400, 200, 600);
+
+$pictonblue-yellowgreen-accent: mat.define-palette(mat.$light-green-palette, 400, 200, 600);
+
+$pictonblue-yellowgreen-warn: mat.define-palette(mat.$red-palette);
+
+$pictonblue-yellowgreen-theme: mat.define-light-theme(
+  $pictonblue-yellowgreen-primary,
+  $pictonblue-yellowgreen-accent,
+  $pictonblue-yellowgreen-warn
+);
+
+.pictonblue-yellowgreen-theme {
+  @include mat.all-component-themes($pictonblue-yellowgreen-theme);
+}
diff --git a/src/theme/pink-bluegrey.scss b/src/theme/pink-bluegrey.scss
new file mode 100644
index 000000000..2291d1f12
--- /dev/null
+++ b/src/theme/pink-bluegrey.scss
@@ -0,0 +1,11 @@
+@use '@angular/material' as mat;
+
+$pink-bluegrey-primary: mat.define-palette(mat.$pink-palette, 500, 300, 700);
+$pink-bluegrey-accent: mat.define-palette(mat.$blue-grey-palette, 400, 200, 600);
+$pink-bluegrey-warn: mat.define-palette(mat.$red-palette);
+
+$pink-bluegrey-theme: mat.define-light-theme($pink-bluegrey-primary, $pink-bluegrey-accent, $pink-bluegrey-warn);
+
+.pink-bluegrey-theme {
+  @include mat.all-component-themes($pink-bluegrey-theme);
+}
diff --git a/src/theme/purple-green.scss b/src/theme/purple-green.scss
new file mode 100644
index 000000000..3d865403b
--- /dev/null
+++ b/src/theme/purple-green.scss
@@ -0,0 +1,11 @@
+@use '@angular/material' as mat;
+
+$purple-green-primary: mat.define-palette(mat.$purple-palette, 500, 300, 700);
+$purple-green-accent: mat.define-palette(mat.$green-palette, 400, 200, 600);
+$purple-green-warn: mat.define-palette(mat.$red-palette);
+
+$purple-green-theme: mat.define-light-theme($purple-green-primary, $purple-green-accent, $purple-green-warn);
+
+.purple-green-theme {
+  @include mat.all-component-themes($purple-green-theme);
+}