settings back to AppTopBarHex*

Author: sei-tspencer

src/app/app.component.ts

@@ -147,11 +147,16 @@ export class AppComponent implements OnDestroy {
 
   setTheme(theme: Theme) {
     document.body.classList.toggle('darkMode', theme === Theme.DARK);
-    const primaryColor = this.settingsService.settings?.AppPrimaryThemeColor || '#C41230';
-    if (primaryColor) {
-      document.documentElement.style.setProperty('--mat-sys-primary', primaryColor);
-      document.body.style.setProperty('--mat-sys-primary', primaryColor);
-      this.updateFavicon(primaryColor);
+    const topBarColor = this.settingsService.settings?.AppTopBarHexColor || '#C41230';
+    const topBarTextColor = this.settingsService.settings?.AppTopBarHexTextColor || '#FFFFFF';
+    if (topBarColor) {
+      document.documentElement.style.setProperty('--mat-sys-primary', topBarColor);
+      document.body.style.setProperty('--mat-sys-primary', topBarColor);
+      this.updateFavicon(topBarColor);
+    }
+    if (topBarTextColor) {
+      document.documentElement.style.setProperty('--mat-sys-on-primary', topBarTextColor);
+      document.body.style.setProperty('--mat-sys-on-primary', topBarTextColor);
     }
   }
 

src/app/components/shared/top-bar/topbar.component.html

@@ -7,14 +7,14 @@
   <mat-toolbar-row>
     <span class="margin-auto">
       @if (sidenav && sidenav?.opened) {
-      <button aria-label="close sidebar" (click)="sidenavToggleFn()" mat-icon-button
-        matTooltip="Close Sidebar" aria-label="Close Sidebar">
+      <button aria-label="close sidebar" (click)="sidenavToggleFn()" mat-icon-button matTooltip="Close Sidebar"
+        aria-label="Close Sidebar">
         <mat-icon svgIcon="ic_chevron_left_white_24px"></mat-icon>
       </button>
       }
       @if (sidenav && !sidenav?.opened) {
-      <button aria-label="open sidebar" (click)="sidenavToggleFn()" mat-icon-button
-        matTooltip="Open Sidebar" aria-label="Open Sidebar">
+      <button aria-label="open sidebar" (click)="sidenavToggleFn()" mat-icon-button matTooltip="Open Sidebar"
+        aria-label="Open Sidebar">
         <mat-icon svgIcon="ic_chevron_right_white_24px"></mat-icon>
       </button>
       }
@@ -51,7 +51,7 @@
     <div class="team-text">
       <button mat-button [matMenuTriggerFor]="menu" matTooltip="Menu" aria-label="Menu">
         <span class="username-text">{{ currentUser.profile.name }}</span>
-        <mat-icon svgIcon="ic_expand_more_white_24px"></mat-icon>
+        <mat-icon class="team-text" svgIcon="ic_expand_more_white_24px"></mat-icon>
       </button>
       <mat-menu #menu="matMenu" [overlapTrigger]="false" class="user-dropdown-menu">
         @if (team && showEditView$ | async) {

src/app/components/shared/top-bar/topbar.component.scss

@@ -49,3 +49,7 @@
 .mat-mdc-icon-button:not(:disabled) {
   color: var(--mat-sys-on-primary);
 }
+
+mat-icon, .mat-icon {
+  --mat-icon-color: var(--mat-sys-on-primary);
+}

src/assets/config/settings.json

@@ -19,7 +19,8 @@
   },
   "AppTitle": "Player",
   "AppTopBarText": "Player",
-  "AppPrimaryThemeColor": "#3B62A5",
+  "AppTopBarHexColor": "#3B62A5",
+  "AppTopBarHexTextColor": "#FFFFFF",
   "UseLocalAuthStorage": false,
   "DebugLogging": false
 }