Skip to content

Commit

Permalink
add theme toggle button to top toolbar
Browse files Browse the repository at this point in the history
JaxonWright committed Feb 10, 2024
1 parent 4fd6436 commit 55034dd
Showing 4 changed files with 10 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<div class="app-frame">
<mat-toolbar>
<app-logo></app-logo>
<button mat-icon-button class="theme-button" (click)="theme.themeType == ThemeType.Light ? setTheme(ThemeType.Dark) : setTheme(ThemeType.Light)">
<mat-icon [fontIcon]="theme.themeType == ThemeType.Light ? 'brightness_5' : 'dark_mode'"></mat-icon>
</button>
</mat-toolbar>
<div class="content">
<app-sidebar [ngClass]="theme.themeType"></app-sidebar>
4 changes: 4 additions & 0 deletions src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -27,4 +27,8 @@ app-sidebar {
display: block;
height: calc(100vh - 64px);
width: 325px;
}

button.theme-button {
margin-left: auto;
}
1 change: 1 addition & 0 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ import { OverlayContainer } from "@angular/cdk/overlay";
})
export class AppComponent implements OnInit {
@HostBinding('class') componentCssClass = ThemeType.Dark;
ThemeType = ThemeType;

constructor(public overlayContainer : OverlayContainer,
public theme: ThemeService) {}
2 changes: 2 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatSliderModule } from '@angular/material/slider';
import { MatButtonModule } from "@angular/material/button";

@NgModule({
declarations: [
@@ -32,6 +33,7 @@ import { MatSliderModule } from '@angular/material/slider';
MatInputModule,
MatIconModule,
MatSliderModule,
MatButtonModule,
],
providers: [],
bootstrap: [AppComponent],

0 comments on commit 55034dd

Please sign in to comment.