darkmode: updated

src/module/forms/darkmode/darkmode.component.html

@@ -1,3 +1,12 @@
-<amexio-toggle
-[field-label]="fieldLabel" [size]="size" [type]="type" [shape]="shape" (onChange)="onToggleClick($event)">
-</amexio-toggle>
+<ng-container *ngIf="mode === 'day-night'">
+        <amexio-toggle
+        [field-label]="fieldLabel" [size]="size" [type]="type" [shape]="shape" (onChange)="onToggleClick($event)">
+        </amexio-toggle>
+        </ng-container>
+
+        <ng-container *ngIf="mode !== 'day-night'">
+        <amexio-slider (onChange) ="onChange()" [type]="type" min-value="0" [max-value]="maxValue" [step-value]="1" [(ngModel)]="stepVal">
+        </amexio-slider>
+        </ng-container>
+
+

src/module/forms/darkmode/darkmode.component.ts

@@ -5,44 +5,56 @@ import { AmexioToggleComponent } from './../toggle/toggle.component';
     templateUrl: './darkmode.component.html',
 })
 export class DarkmodeComponent implements OnInit {
-
     @Input('field-label') fieldLabel: string;
 
     @Input('shape') shape: 'round';
-    @Input('type') type: any;
+    @Input('type') type = 2;
     @Input('size') size = 'medium';
+    @Input('mode') mode = 'day-night';
+    @Input('data') colorData: any;
+    stepVal = 0;
+    maxValue = 2;
+    sepiaColorCode = '#f4ecd8';
+    sepiaFontColor = '#020202';
 
     themesdata: any = [];
     themeStyles: any[] = [];
 
+    appBackground = '--appBackground';
+    appForeground = '--appForegroundColor';
+    componentBackground = '--componentBGColor';
+    componentForeground = '--componentFontColor';
+
     constructor() {
         this.themesdata = [
             {
-                varName: '--appBackground',
+                varName: this.appBackground,
                 darkValue: '#2d2d2d',
                 themeValue: '#f5f5f5',
             },
             {
-                varName: '--appForegroundColor',
+                varName: this.appForeground,
                 darkValue: '#f5f5f5',
                 themeValue: '#121212',
             },
             {
-                varName: '--componentBGColor',
+                varName: this.componentBackground,
                 darkValue: '#121212',
                 themeValue: '#ffffff',
             },
             {
-                varName: '--componentFontColor',
+                varName: this.componentForeground,
                 darkValue: '#ffffff',
                 themeValue: '#121212',
             },
-            // ],
-            // },
         ];
     }
 
     ngOnInit() {
+        if (this.mode === 'custom') {
+            this.maxValue = this.colorData.length - 1;
+            this.otherMode();
+        }
     }
     onToggleClick(event: any) {
         this.themeStyles = [];
@@ -68,4 +80,42 @@ export class DarkmodeComponent implements OnInit {
 
     }
 
+    onChange() {
+        if (this.mode === 'sepia') {
+            this.sepiaMode();
+        } else if (this.mode === 'custom') {
+            this.otherMode();
+        }
+    }
+
+    sepiaMode() {
+        if (this.stepVal === 0) {
+            this.onToggleClick(false);
+        }
+
+        if (this.stepVal === 1) {
+            document.documentElement.style.setProperty(this.appBackground, this.sepiaColorCode);
+            document.documentElement.style.setProperty(this.appForeground, this.sepiaFontColor);
+            document.documentElement.style.setProperty(this.componentBackground, this.sepiaColorCode);
+            document.documentElement.style.setProperty(this.componentForeground, this.sepiaFontColor);
+        }
+        if (this.stepVal === 2) {
+            this.onToggleClick(true);
+        }
+    }
+
+    otherMode() {
+        if (this.colorData && this.colorData.length > 0) {
+            this.colorData.forEach((element: any, index: any) => {
+                if (this.stepVal === index) {
+                    document.documentElement.style.setProperty(this.appBackground, element.bgColor);
+                    document.documentElement.style.setProperty(this.appForeground, element.fgColor);
+                    document.documentElement.style.setProperty(this.componentBackground, element.bgColor);
+                    document.documentElement.style.setProperty(this.componentForeground, element.fgColor);
+
+                }
+            });
+        }
+    }
+
 }