@@ -17,7 +17,7 @@ export class AngularMaterialComponent implements OnInit {
1717 public dialog : IgxDialogComponent ;
1818
1919 @HostBinding ( 'class' )
20- public themesClass = 'light' ;
20+ public themesClass : 'light' | 'dark' = 'light' ;
2121
2222 firstFormGroup : FormGroup ;
2323 secondFormGroup : FormGroup ;
@@ -26,17 +26,32 @@ export class AngularMaterialComponent implements OnInit {
2626 private _dialogOverlaySettings2 ;
2727
2828 constructor ( private _formBuilder : FormBuilder , private overlayContainer : OverlayContainer ) {
29- overlayContainer . getContainerElement ( ) . classList . add ( 'menu-theme' ) ;
29+ overlayContainer . getContainerElement ( ) . classList . add ( 'light- menu-theme' ) ;
3030 }
3131
3232 public lightTheme ( ) {
3333 this . themesClass = 'light' ;
34- this . overlayContainer . getContainerElement ( ) . classList . remove ( 'dark-menu-theme' ) ;
34+ this . toggleOverlayClasses ( this . themesClass ) ;
3535 }
3636
3737 public darkTheme ( ) {
3838 this . themesClass = 'dark' ;
39- this . overlayContainer . getContainerElement ( ) . classList . add ( 'dark-menu-theme' ) ;
39+ this . toggleOverlayClasses ( this . themesClass ) ;
40+ }
41+
42+ private toggleOverlayClasses ( theme : 'light' | 'dark' ) {
43+ const overlayClasses = this . overlayContainer . getContainerElement ( ) . classList ;
44+
45+ switch ( theme ) {
46+ case 'light' :
47+ overlayClasses . remove ( 'dark-menu-theme' ) ;
48+ overlayClasses . add ( 'light-menu-theme' ) ;
49+ break ;
50+ case 'dark' :
51+ overlayClasses . remove ( 'light-menu-theme' ) ;
52+ overlayClasses . add ( 'dark-menu-theme' ) ;
53+ break ;
54+ }
4055 }
4156
4257 public openDialog ( ) {
0 commit comments