Add settings UI for dark mode

This commit is contained in:
Michael Shamoon
2022-06-03 00:20:14 -07:00
parent 6e64ae09aa
commit 165f98dc09
4 changed files with 50 additions and 3 deletions
@@ -2,6 +2,21 @@
<mat-dialog-content class="mat-typography">
<div class="flex flex-col p-8 pb-0 overflow-hidden">
<div class="flex flex-col gt-md:flex-row">
<mat-slide-toggle class="mb-2" [(ngModel)]="darkModeUseSystem">Use system settings for dark mode</mat-slide-toggle>
<p [class.text-hint]="darkModeUseSystem">
Theme:
<mat-button-toggle-group class="ml-2" #group="matButtonToggleGroup" [(ngModel)]="theme" [disabled]="darkModeUseSystem">
<mat-button-toggle value="light" aria-label="Light mode">
<mat-icon>light_mode</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="dark" aria-label="Dark mode">
<mat-icon>dark_mode</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
</p>
</div>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Display Title</mat-label>