diff options
| author | asuyou <asuyou@users.noreply.github.com> | 2021-12-17 18:35:43 +0200 |
|---|---|---|
| committer | asuyou <asuyou@users.noreply.github.com> | 2021-12-17 18:35:43 +0200 |
| commit | 61900a7ba8b11beb2125f31072abe8bcd1d6a10c (patch) | |
| tree | dfc1a3e02d550aa77482576e60658ab58c303541 /ui/src | |
| parent | Made theme toggleable (diff) | |
| download | metube-61900a7ba8b11beb2125f31072abe8bcd1d6a10c.tar.gz metube-61900a7ba8b11beb2125f31072abe8bcd1d6a10c.tar.bz2 metube-61900a7ba8b11beb2125f31072abe8bcd1d6a10c.zip | |
Theme button is now material button
Diffstat (limited to 'ui/src')
| -rw-r--r-- | ui/src/app/app.component.html | 8 | ||||
| -rw-r--r-- | ui/src/styles.sass | 1 |
2 files changed, 7 insertions, 2 deletions
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html index 248ea76..3fc9bd2 100644 --- a/ui/src/app/app.component.html +++ b/ui/src/app/app.component.html @@ -13,8 +13,12 @@ </div> --> <div> - <span class="text-white">Toggle Theme</span> - <input style="margin: 1rem;" type="checkbox" [ngModel]="this.darkMode" aria-label="Toggle theme" (change)="themeChanged()"> + <button class="btn btn-secondary" aria-label="Toggle theme" (click)="themeChanged()"> + <i *ngIf="darkMode; else sunIcon" class="bi bi-sun-fill"></i> + <ng-template #sunIcon> + <i class="bi bi-moon-stars-fill"></i> + </ng-template> + </button> </div> </nav> diff --git a/ui/src/styles.sass b/ui/src/styles.sass index 5d54ecb..d4e5b6e 100644 --- a/ui/src/styles.sass +++ b/ui/src/styles.sass @@ -2,3 +2,4 @@ /* Importing Bootstrap SCSS file. */ @import '~bootstrap/scss/bootstrap' +@import '~bootstrap-icons/font/bootstrap-icons.css' |