Skip to content

Commit 56d9f9b

Browse files
committed
refactor(angular-material): apply requested changes
1 parent 525a3c8 commit 56d9f9b

2 files changed

Lines changed: 20 additions & 5 deletions

File tree

src/app/theming/angular/angular-sample.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ $custom-mat-dark-theme: mat.define-dark-theme((
6767
::ng-deep {
6868
@include mat.core();
6969

70-
.menu-theme {
70+
.light-menu-theme {
7171
@include mat.menu-theme($custom-mat-light-theme);
7272
}
7373

src/app/theming/angular/angular-sample.component.ts

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)