Merge pull request #3202 from IgniteUI/promote-vNext

Even vNext

Author: hanastasov

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

@@ -2,7 +2,8 @@
     <div class="controls-holder">
         <div class="switches">
             <div class="control-item" *ngIf="isThemeSwitchVisible">
-                <igx-switch [checked]="false" [(ngModel)]="theme" (change)="onChange('theme', $event)">Dark</igx-switch>
+                <igx-switch class="theme-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"

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

@@ -1,4 +1,5 @@
 import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import { IgxDialogComponent, IgxOverlayOutletDirective, OverlaySettings } from 'igniteui-angular';
 import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
 import { Stock } from '../data/financialData';
@@ -31,6 +32,7 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
     public frequency = 500;
     private _timer: ReturnType<typeof setInterval>;
 
+
     public onSwitchChanged(event: { action: string; value: boolean }): void {
         switch (event.action) {
             case 'toolbar': {

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

@@ -1,7 +1,7 @@
 @use '../../variables' as *;
 
 :host ::ng-deep {
-	.fin-dark-theme {
+    .fin-dark-theme {
 		.finjs-slider,
 		.sample-toolbar,
 		.group-drop-area {

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

@@ -166,15 +166,14 @@ export class TreeGridFinJSComponent implements OnDestroy, OnInit {
      * 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) {
+     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();
     }

projects/app-lob/src/styles.scss

@@ -1,18 +1,41 @@
 @use 'igniteui-angular/theming' as *;
 @use 'variables' as *;
 @use 'app-layout';
-
 /* autoprefixer grid: on */
 html,
 body {
     height: 100%;
     overflow: hidden;
     margin: 0;
 }
-
 @include core();
 @include typography();
 @include theme(
     $palette: $palette,
     $schema: $schema
 );
+:root {
+    @include palette($palette);
+}
+.light-theme {
+    @include light-theme($palette);
+}
+.dark-theme {
+    background: #333;
+    color: #fff;
+    @include dark-theme(
+        $palette: $green-palette
+    );
+    .grid-chart-contextmenu-wrapper {
+        @include fluent-dark-theme($fluent-excel-palette);
+    }
+}
+
+.fin-dark-theme {
+    @include dark-theme($green-palette);
+    background: #333;
+
+    ::-moz-placeholder {
+        opacity: 1;
+    }
+}