Revert "removing the dark theme switch"

Author: ChronosSF

projects/app-lob/src/app/grid-finjs/controllers.component.html

@@ -1,6 +1,9 @@
 <div class="controls-wrapper">
     <div class="controls-holder">
         <div class="switches">
+            <div class="control-item">
+                <igx-switch [checked]="false" [(ngModel)]="theme" (change)="onChange('theme', $event)">Dark</igx-switch>
+            </div>
             <div class="control-item">
                 <igx-switch [checked]="true" (change)="onChange('grouped', $event)" color="blue"
                     cssClass="finjs-sample-switch">

projects/app-lob/src/app/grid-finjs/controllers.component.ts

@@ -23,6 +23,7 @@ export class ControllerComponent implements OnInit, OnDestroy {
     @Output() public playAction = new EventEmitter<{ action: string }>();
 
     public volume = 1000;
+    public theme = false;
     public frequency = 500;
     public controls = [
         {

projects/app-lob/src/app/grid-finjs/main.component.html

@@ -1,4 +1,4 @@
-<div class="main__wrapper igx-scrollbar">
+<div class="main__wrapper igx-scrollbar" [class.fin-dark-theme]="darkTheme">
     <app-finjs-controllers #controllers
         (switchChanged)="onSwitchChanged($event)"
         (volumeChanged)="onVolumeChanged($event)"

projects/app-lob/src/app/grid-finjs/main.component.ts

@@ -22,6 +22,9 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
         closeOnOutsideClick: true
     };
 
+    @HostBinding('class.dark-theme')
+    public darkTheme = false;
+
     public properties = ['price', 'country'];
     public chartData: Stock[] = [];
     public volume = 1000;
@@ -38,6 +41,10 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
                 this.finGrid.toggleGrouping();
                 break;
             }
+            case 'theme': {
+                this.darkTheme = event.value;
+                break;
+            }
             default: break;
         }
     }

projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss

@@ -1,6 +1,18 @@
 @use '../../variables' as *;
 
 :host ::ng-deep {
+	.fin-dark-theme {
+		.finjs-slider,
+		.sample-toolbar,
+		.group-drop-area {
+			color: contrast-color(null, 'gray', 900);
+		}
+
+		.group-drop-area {
+			background: color(null, 'surface', 500);
+		}
+	}
+
 	.finjs-icons {
 		display: flex;
 		align-items: center;

projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.ts

@@ -21,6 +21,9 @@ export class TreeGridFinJSComponent implements OnDestroy, OnInit {
     @ViewChild('slider2', { static: true }) public intervalSlider!: IgxSliderComponent;
     @ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet!: IgxOverlayOutletDirective;
 
+    @HostBinding('class.dark-theme')
+    public theme = false;
+
     public showToolbar = true;
     public selectionMode = 'multiple';
     public volume = 1000;
@@ -159,6 +162,19 @@ export class TreeGridFinJSComponent implements OnDestroy, OnInit {
         return value ? '$' + value.toFixed(3) : '';
     }
 
+    /**
+     * the below code is needed when accessing the sample through the navigation
+     * it will style all the space below the sample component element, but not the navigation menu
+     */
+    public onThemeChanged(event: any) {
+        const parentEl = this.parentComponentEl();
+        if (event.checked && parentEl.classList.contains('main')) {
+            parentEl.classList.add('fin-dark-theme');
+        } else {
+            parentEl.classList.remove('fin-dark-theme');
+        }
+    }
+
     public ngOnDestroy() {
         this.stopFeed();
     }

src/styles.scss

@@ -36,3 +36,12 @@ body {
         @include fluent-dark-theme($fluent-excel-palette);
     }
 }
+
+.fin-dark-theme {
+    @include dark-theme($green-palette);
+    background: #333;
+
+    ::-moz-placeholder {
+        opacity: 1;
+    }
+}