Merge pull request #3150 from IgniteUI/sstoychev/remove-dark-switch

removing the dark theme switch

Author: ChronosSF

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

@@ -1,9 +1,6 @@
 <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,7 +23,6 @@ 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" [class.fin-dark-theme]="darkTheme">
+<div class="main__wrapper igx-scrollbar">
     <app-finjs-controllers #controllers
         (switchChanged)="onSwitchChanged($event)"
         (volumeChanged)="onVolumeChanged($event)"

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

@@ -22,9 +22,6 @@ 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;
@@ -41,10 +38,6 @@ 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,18 +1,6 @@
 @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,9 +21,6 @@ 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;
@@ -162,19 +159,6 @@ 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,12 +36,3 @@ body {
         @include fluent-dark-theme($fluent-excel-palette);
     }
 }
-
-.fin-dark-theme {
-    @include dark-theme($green-palette);
-    background: #333;
-
-    ::-moz-placeholder {
-        opacity: 1;
-    }
-}