feat: add custom themes (#74)

Add custom themes based on logo of Mifos

Fixes #73

angular.json

@@ -50,6 +50,16 @@
                 "input": "src/theme/purple-green.scss",
                 "bundleName": "theme/purple-green",
                 "lazy": true
+              },
+              {
+                "input": "src/theme/custom/denim-yellowgreen.scss",
+                "bundleName": "theme/denim-yellowgreen",
+                "lazy": true
+              },
+              {
+                "input": "src/theme/custom/pictonblue-yellowgreen.scss",
+                "bundleName": "theme/pictonblue-yellowgreen",
+                "lazy": true
               }
             ],
             "scripts": []
@@ -121,6 +131,16 @@
                 "input": "src/theme/purple-green.scss",
                 "bundleName": "theme/purple-green",
                 "lazy": true
+              },
+              {
+                "input": "src/theme/custom/denim-yellowgreen.scss",
+                "bundleName": "theme/denim-yellowgreen",
+                "lazy": true
+              },
+              {
+                "input": "src/theme/custom/pictonblue-yellowgreen.scss",
+                "bundleName": "theme/pictonblue-yellowgreen",
+                "lazy": true
               }
             ],
             "assets": [

src/app/core/shell/toolbar/theme-picker/theme-picker.component.html

@@ -9,6 +9,7 @@
         <div class="mifosx-theme-picker-swatch">
           <mat-icon class="mifosx-theme-chosen-icon" *ngIf="currentTheme.href === theme.href">check_circle</mat-icon>
           <div class="mifosx-theme-picker-primary" [style.background]="theme.primary"></div>
+          <div class="mifosx-theme-picker-accent" [style.background]="theme.accent"></div>
         </div>
       </div>
     </mat-grid-tile>

src/app/core/shell/toolbar/theme-picker/theme-picker.component.ts

@@ -17,7 +17,7 @@ export class ThemePickerComponent implements OnInit {
     primary: '#3F51B5',
     accent: '#E91E63',
     isDark: false,
-    isDefault: true,
+    isDefault: true
   };
   themes = [
     this.currentTheme,
@@ -25,20 +25,32 @@ export class ThemePickerComponent implements OnInit {
       href: 'deeppurple-amber.css',
       primary: '#673AB7',
       accent: '#FFC107',
-      isDark: false,
+      isDark: false
     },
     {
       href: 'pink-bluegrey.css',
       primary: '#E91E63',
       accent: '#607D8B',
-      isDark: true,
+      isDark: true
     },
     {
       href: 'purple-green.css',
       primary: '#9C27B0',
       accent: '#4CAF50',
-      isDark: true,
+      isDark: true
     },
+    {
+      href: 'denim-yellowgreen.css',
+      primary: '#1074B9',
+      accent: '#B4D575',
+      isDark: false
+    },
+    {
+      href: 'pictonblue-yellowgreen.css',
+      primary: '#1DAEEC',
+      accent: '#B4D575',
+      isDark: false
+    }
   ];
 
   constructor(public themeManagerService: ThemeManagerService,

src/app/home/home.component.html

@@ -5,4 +5,15 @@
   </div>
 </div> -->
 
+<div class="button-row">
+  <button mat-raised-button>Basic</button>
+  <button mat-raised-button color="primary">Primary</button>
+  <button mat-raised-button color="accent">Accent</button>
+  <button mat-raised-button color="warn">Warn</button>
+  <button mat-raised-button disabled>Disabled</button>
+  <a mat-raised-button routerLink=".">Link</a>
+</div>
+
+<br>
+<br>
 <img class="logo" src="assets/images/mifos_lg-logo.jpg"/>

src/app/home/home.component.scss

@@ -7,3 +7,9 @@
 //   font-size: 1.2rem;
 //   quotes: "« " " »";
 // }
+
+.button-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}

src/app/home/home.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
+import { CoreModule } from '../core/core.module';
 import { SharedModule } from '../shared';
 import { HomeRoutingModule } from './home-routing.module';
 import { HomeComponent } from './home.component';
@@ -13,6 +14,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 @NgModule({
   imports: [
     CommonModule,
+    CoreModule,
     TranslateModule,
     NgxChartsModule,
     SharedModule,

src/theme/custom/denim-yellowgreen.scss

@@ -0,0 +1,47 @@
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Custom material palette
+$mat-denim: (
+  100: #5ba2ec,
+  500: #1074b9,
+  700: #004989,
+  contrast: (
+    100: $dark-primary-text,
+    500: $light-primary-text,
+    700: $light-primary-text
+  )
+);
+
+$mat-yellow-green: (
+  100: #e7ffa5,
+  500: #b4d575,
+  700: #83a447,
+  contrast: (
+    100: $dark-primary-text,
+    500: $dark-primary-text,
+    700: $dark-primary-text
+  )
+);
+
+// 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.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$mifosx-app-primary: mat-palette($mat-denim);
+$mifosx-app-accent:  mat-palette($mat-yellow-green);
+
+// The warn palette is optional (defaults to red).
+$mifosx-app-warn:    mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$mifosx-app-theme: mat-light-theme($mifosx-app-primary, $mifosx-app-accent, $mifosx-app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($mifosx-app-theme);

src/theme/custom/pictonblue-yellowgreen.scss

@@ -0,0 +1,47 @@
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Custom material palette
+$mat-picton-blue: (
+  100: #6ce0ff,
+  500: #1daeec,
+  700: #007fb9,
+  contrast: (
+    100: $dark-primary-text,
+    500: $dark-primary-text,
+    700: $dark-primary-text
+  )
+);
+
+$mat-yellow-green: (
+  100: #e7ffa5,
+  500: #b4d575,
+  700: #83a447,
+  contrast: (
+    100: $dark-primary-text,
+    500: $dark-primary-text,
+    700: $dark-primary-text
+  )
+);
+
+// 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.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$mifosx-app-primary: mat-palette($mat-picton-blue);
+$mifosx-app-accent:  mat-palette($mat-yellow-green);
+
+// The warn palette is optional (defaults to red).
+$mifosx-app-warn:    mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$mifosx-app-theme: mat-light-theme($mifosx-app-primary, $mifosx-app-accent, $mifosx-app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($mifosx-app-theme);