From 1254c63ecee95e1c0f7f001bd4a53ccc42103a36 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 17 May 2026 17:03:13 +0000
Subject: [PATCH 1/4] fix(ui): Support theme switching and solid backgrounds in
 settings dialog

- Inject active application theme (`treo-theme-dark` / `treo-theme-light`) into Angular Material dialog components dynamically when opening the dashboard, detail, and mobile settings dialogs.
- Apply `panelClass="theme-select-panel"` to all `mat-select` elements across settings templates.
- Explicitly style backgrounds and option text colors for settings overlays depending on the active theme in `styles.scss` to prevent transparent overlay readability issues.

Co-authored-by: WyattGorman <444043+WyattGorman@users.noreply.github.com>
---
 .../dashboard-settings.component.html         | 54 +++++++++----------
 .../detail-settings.component.html            |  4 +-
 .../modules/dashboard/dashboard.component.ts  |  3 +-
 .../app/modules/detail/detail.component.ts    |  2 +
 .../mobile-settings.component.ts              |  3 +-
 webapp/frontend/src/styles/styles.scss        | 23 ++++++++
 6 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
index b009470f9..037309279 100644
--- a/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
+++ b/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
@@ -6,7 +6,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Dark Mode</mat-label>
-                <mat-select [(ngModel)]="theme">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="theme">
                     <mat-option value="system">System</mat-option>
                     <mat-option value="dark">Dark</mat-option>
                     <mat-option value="light">Light</mat-option>
@@ -17,7 +17,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>
-                <mat-select [(ngModel)]="dashboardDisplay">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="dashboardDisplay">
                     <mat-option value="name">Name</mat-option>
                     <mat-option value="serial_id">Serial ID</mat-option>
                     <mat-option value="uuid">UUID</mat-option>
@@ -27,7 +27,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pl-3">
                 <mat-label>Sort By</mat-label>
-                <mat-select [(ngModel)]="dashboardSort">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="dashboardSort">
                     <mat-option value="status_desc">Status (Failed First)</mat-option>
                     <mat-option value="status_asc">Status (Passed First)</mat-option>
                     <mat-option value="title_asc">Title (A-Z)</mat-option>
@@ -45,7 +45,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Temperature</mat-label>
-                <mat-select [(ngModel)]="temperatureUnit">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="temperatureUnit">
                     <mat-option value="celsius">Celsius</mat-option>
                     <mat-option value="fahrenheit">Fahrenheit</mat-option>
                 </mat-select>
@@ -53,7 +53,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Time Format</mat-label>
-                <mat-select [(ngModel)]="timeFormat">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="timeFormat">
                     <mat-option value="24">24-hour (15:00)</mat-option>
                     <mat-option value="12">12-hour (3:00 PM)</mat-option>
                 </mat-select>
@@ -63,7 +63,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>File Size</mat-label>
-                <mat-select [(ngModel)]="fileSizeSIUnits">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="fileSizeSIUnits">
                     <mat-option [value]=true>SI Units (GB)</mat-option>
                     <mat-option [value]=false>Binary Units (GiB)</mat-option>
                 </mat-select>
@@ -73,7 +73,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Powered On Format</mat-label>
-                <mat-select [(ngModel)]="poweredOnHoursUnit">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="poweredOnHoursUnit">
                     <mat-option value="humanize">Humanize</mat-option>
                     <mat-option value="device_hours">Device Hours</mat-option>
                 </mat-select>
@@ -81,7 +81,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 
             <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                 <mat-label>Line stroke</mat-label>
-                <mat-select [(ngModel)]="lineStroke">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="lineStroke">
                     <mat-option value="smooth">Smooth</mat-option>
                     <mat-option value="straight">Straight</mat-option>
                     <mat-option value="stepline">Stepline</mat-option>
@@ -92,7 +92,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Device Status - Thresholds</mat-label>
-                <mat-select [(ngModel)]=statusThreshold>
+                <mat-select panelClass="theme-select-panel" [(ngModel)]=statusThreshold>
                     <mat-option [value]=1>Smart</mat-option>
                     <mat-option [value]=2>Scrutiny</mat-option>
                     <mat-option [value]=3>Both</mat-option>
@@ -104,7 +104,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Notify - Level</mat-label>
-                <mat-select [(ngModel)]=notifyLevel>
+                <mat-select panelClass="theme-select-panel" [(ngModel)]=notifyLevel>
                     <mat-option [value]=1>Warn</mat-option>
                     <mat-option [value]=2>Fail</mat-option>
                 </mat-select>
@@ -115,7 +115,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Notify - Filter Attributes</mat-label>
-                <mat-select [(ngModel)]=statusFilterAttributes>
+                <mat-select panelClass="theme-select-panel" [(ngModel)]=statusFilterAttributes>
                     <mat-option [value]=0>All</mat-option>
                     <mat-option [value]=1>Critical</mat-option>
                 </mat-select>
@@ -125,7 +125,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Repeat Notifications</mat-label>
-                <mat-select [(ngModel)]=repeatNotifications>
+                <mat-select panelClass="theme-select-panel" [(ngModel)]=repeatNotifications>
                     <mat-option [value]=true>Always</mat-option>
                     <mat-option [value]=false>Only when the value has changed</mat-option>
                 </mat-select>
@@ -135,7 +135,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Retrieve SCT Temperature History</mat-label>
-                <mat-select [(ngModel)]=retrieveSCTTemperatureHistory>
+                <mat-select panelClass="theme-select-panel" [(ngModel)]=retrieveSCTTemperatureHistory>
                     <mat-option [value]=true>Enabled</mat-option>
                     <mat-option [value]=false>Disabled</mat-option>
                 </mat-select>
@@ -146,7 +146,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Notify on Collector smartctl Errors</mat-label>
-                <mat-select [(ngModel)]="notifyOnCollectorError">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="notifyOnCollectorError">
                     <mat-option [value]="true">Enabled</mat-option>
                     <mat-option [value]="false">Disabled</mat-option>
                 </mat-select>
@@ -158,7 +158,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Notify on Missed Collector Ping</mat-label>
-                <mat-select [(ngModel)]="notifyOnMissedPing">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="notifyOnMissedPing">
                     <mat-option [value]="true">Enabled</mat-option>
                     <mat-option [value]="false">Disabled</mat-option>
                 </mat-select>
@@ -215,7 +215,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Heartbeat Notifications</mat-label>
-                <mat-select [(ngModel)]="heartbeatEnabled">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="heartbeatEnabled">
                     <mat-option [value]="true">Enabled</mat-option>
                     <mat-option [value]="false">Disabled</mat-option>
                 </mat-select>
@@ -235,7 +235,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
         <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>Uptime Kuma Push Monitor</mat-label>
-                <mat-select [(ngModel)]="uptimeKumaEnabled">
+                <mat-select panelClass="theme-select-panel" [(ngModel)]="uptimeKumaEnabled">
                     <mat-option [value]="true">Enabled</mat-option>
                     <mat-option [value]="false">Disabled</mat-option>
                 </mat-select>
@@ -291,7 +291,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
                 <div class="flex flex-col gt-md:flex-row">
                     <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                         <mat-label>Scheduled Reports</mat-label>
-                        <mat-select [(ngModel)]="reportEnabled">
+                        <mat-select panelClass="theme-select-panel" [(ngModel)]="reportEnabled">
                             <mat-option [value]="true">Enabled</mat-option>
                             <mat-option [value]="false">Disabled</mat-option>
                         </mat-select>
@@ -303,7 +303,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
                     <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>Daily Report</mat-label>
-                            <mat-select [(ngModel)]="reportDailyEnabled">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="reportDailyEnabled">
                                 <mat-option [value]="true">Enabled</mat-option>
                                 <mat-option [value]="false">Disabled</mat-option>
                             </mat-select>
@@ -319,7 +319,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
                     <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>Weekly Report</mat-label>
-                            <mat-select [(ngModel)]="reportWeeklyEnabled">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="reportWeeklyEnabled">
                                 <mat-option [value]="true">Enabled</mat-option>
                                 <mat-option [value]="false">Disabled</mat-option>
                             </mat-select>
@@ -327,7 +327,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
 
                         <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pl-3" *ngIf="reportWeeklyEnabled">
                             <mat-label>Day of Week</mat-label>
-                            <mat-select [(ngModel)]="reportWeeklyDay">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="reportWeeklyDay">
                                 <mat-option [value]="0">Sunday</mat-option>
                                 <mat-option [value]="1">Monday</mat-option>
                                 <mat-option [value]="2">Tuesday</mat-option>
@@ -347,7 +347,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
                     <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>Monthly Report</mat-label>
-                            <mat-select [(ngModel)]="reportMonthlyEnabled">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="reportMonthlyEnabled">
                                 <mat-option [value]="true">Enabled</mat-option>
                                 <mat-option [value]="false">Disabled</mat-option>
                             </mat-select>
@@ -368,7 +368,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
                     <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>PDF Generation</mat-label>
-                            <mat-select [(ngModel)]="reportPDFEnabled">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="reportPDFEnabled">
                                 <mat-option [value]="true">Enabled</mat-option>
                                 <mat-option [value]="false">Disabled</mat-option>
                             </mat-select>
@@ -450,7 +450,7 @@ <h4 class="mb-4 font-medium">Add New Override</h4>
                     <div class="flex flex-wrap gap-4">
                         <mat-form-field class="flex-1 min-w-[120px]">
                             <mat-label>Protocol</mat-label>
-                            <mat-select [(ngModel)]="newOverride.protocol">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="newOverride.protocol">
                                 <mat-option *ngFor="let p of protocols" [value]="p">{{p}}</mat-option>
                             </mat-select>
                         </mat-form-field>
@@ -463,7 +463,7 @@ <h4 class="mb-4 font-medium">Add New Override</h4>
 
                         <mat-form-field class="flex-1 min-w-[120px]">
                             <mat-label>Action</mat-label>
-                            <mat-select [(ngModel)]="newOverride.action">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="newOverride.action">
                                 <mat-option *ngFor="let a of actions" [value]="a.value">{{a.label}}</mat-option>
                             </mat-select>
                         </mat-form-field>
@@ -471,7 +471,7 @@ <h4 class="mb-4 font-medium">Add New Override</h4>
                         <mat-form-field class="flex-1 min-w-[120px]"
                                         *ngIf="newOverride.action === 'force_status'">
                             <mat-label>Status</mat-label>
-                            <mat-select [(ngModel)]="newOverride.status">
+                            <mat-select panelClass="theme-select-panel" [(ngModel)]="newOverride.status">
                                 <mat-option *ngFor="let s of statuses" [value]="s">{{s}}</mat-option>
                             </mat-select>
                         </mat-form-field>
@@ -588,7 +588,7 @@ <h4 class="mb-4 font-medium">Add Notification Channel</h4>
 
                     <mat-form-field class="w-full mb-2">
                         <mat-label>Service</mat-label>
-                        <mat-select [(ngModel)]="selectedService">
+                        <mat-select panelClass="theme-select-panel" [(ngModel)]="selectedService">
                             <mat-option value="custom">Custom Shoutrrr URL</mat-option>
                             <mat-option value="smtp">SMTP Email</mat-option>
                             <mat-option value="discord">Discord</mat-option>
diff --git a/webapp/frontend/src/app/layout/common/detail-settings/detail-settings.component.html b/webapp/frontend/src/app/layout/common/detail-settings/detail-settings.component.html
index 8c7617ad0..3c20fb851 100644
--- a/webapp/frontend/src/app/layout/common/detail-settings/detail-settings.component.html
+++ b/webapp/frontend/src/app/layout/common/detail-settings/detail-settings.component.html
@@ -13,7 +13,7 @@ <h2 mat-dialog-title>Device Settings</h2>
         <div class="flex flex-col gt-xs:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3">
                 <mat-label>Threshold Data</mat-label>
-                <mat-select [value]="'scrutiny'">
+                <mat-select panelClass="theme-select-panel" [value]="'scrutiny'">
                     <mat-option  value="scrutiny">Scrutiny</mat-option>
                     <mat-option value="name" disabled>Manufacturer</mat-option>
                 </mat-select>
@@ -23,7 +23,7 @@ <h2 mat-dialog-title>Device Settings</h2>
         <div class="flex flex-col gt-xs:flex-row">
             <mat-form-field class="flex-auto gt-xs:pr-3">
                 <mat-label>Notifications</mat-label>
-                <mat-select [(value)]="muted">
+                <mat-select panelClass="theme-select-panel" [(value)]="muted">
                     <mat-option [value]="false">Enabled</mat-option>
                     <mat-option [value]="true">Disabled</mat-option>
                 </mat-select>
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
index 0212a39ba..2bac62eb9 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
@@ -442,7 +442,8 @@ export class DashboardComponent implements OnInit, OnDestroy
     }
 
     openDialog(): void {
-        const dialogRef = this.dialog.open(DashboardSettingsComponent, {width: '800px', maxWidth: '95vw'});
+        const theme = document.body.classList.contains('treo-theme-dark') ? 'treo-theme-dark' : 'treo-theme-light';
+        const dialogRef = this.dialog.open(DashboardSettingsComponent, {width: '800px', maxWidth: '95vw', panelClass: theme});
 
         dialogRef.afterClosed().subscribe();
     }
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.ts b/webapp/frontend/src/app/modules/detail/detail.component.ts
index 3816a3e5a..d1ff2fbbf 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.ts
+++ b/webapp/frontend/src/app/modules/detail/detail.component.ts
@@ -729,9 +729,11 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
         if (!this.device) return;
 
         const globalMissedPingTimeout = this.config?.metrics?.missed_ping_timeout_minutes || 15;
+        const theme = document.body.classList.contains('treo-theme-dark') ? 'treo-theme-dark' : 'treo-theme-light';
 
         const dialogRef = this.dialog.open(DetailSettingsComponent, {
             width: '600px',
+            panelClass: theme,
             data: {
                 curMuted: this.device.muted,
                 curLabel: this.device.label,
diff --git a/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts b/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts
index 35f4cbfc9..a40fbb890 100644
--- a/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts
+++ b/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts
@@ -16,11 +16,12 @@ export class MobileSettingsComponent {
     constructor(private readonly dialog: MatDialog) {}
 
     openSettings(): void {
+        const theme = document.body.classList.contains('treo-theme-dark') ? 'treo-theme-dark' : 'treo-theme-light';
         this.dialog.open(DashboardSettingsComponent, {
             width: '100vw',
             maxWidth: '100vw',
             height: '100vh',
-            panelClass: 'mobile-settings-dialog'
+            panelClass: ['mobile-settings-dialog', theme]
         });
     }
 }
diff --git a/webapp/frontend/src/styles/styles.scss b/webapp/frontend/src/styles/styles.scss
index d8ff2d63c..6d54eb499 100644
--- a/webapp/frontend/src/styles/styles.scss
+++ b/webapp/frontend/src/styles/styles.scss
@@ -31,3 +31,26 @@
         color: #CFD8E3 !important;
     }
 }
+
+// Mat-Select dropdown panel in dark mode (passed to panelClass)
+.treo-theme-dark .theme-select-panel {
+    background-color: #1e293b !important;
+}
+.treo-theme-light .theme-select-panel {
+    background-color: #ffffff !important;
+}
+
+// Ensure proper dialog background and text color for settings dialogs
+.treo-theme-dark.mat-mdc-dialog-container .mdc-dialog__surface,
+.treo-theme-dark .mat-mdc-dialog-surface {
+    background-color: #1e293b !important;
+    color: #e2e8f0 !important;
+}
+
+// Ensure option text color is readable in dark mode
+.treo-theme-dark .theme-select-panel .mat-mdc-option {
+    color: #e2e8f0 !important;
+}
+.treo-theme-dark .theme-select-panel .mat-mdc-select-value-text {
+    color: #e2e8f0 !important;
+}

From a9b3984233c6e77e677305f53cc8dfb288a12710 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 17 May 2026 23:06:54 +0000
Subject: [PATCH 2/4] fix(ui): Support theme switching and solid backgrounds in
 settings dialog

- Inject active application theme (`treo-theme-dark` / `treo-theme-light`) into Angular Material dialog components dynamically when opening the dashboard, detail, and mobile settings dialogs.
- Apply `panelClass="theme-select-panel"` to all `mat-select` elements across settings templates.
- Explicitly style backgrounds and option text colors for settings overlays depending on the active theme in `styles.scss` to prevent transparent overlay readability issues.

Co-authored-by: WyattGorman <444043+WyattGorman@users.noreply.github.com>
---
 webapp/npm_output.log | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 webapp/npm_output.log

diff --git a/webapp/npm_output.log b/webapp/npm_output.log
new file mode 100644
index 000000000..058a3a35d
--- /dev/null
+++ b/webapp/npm_output.log
@@ -0,0 +1,7 @@
+
+> @treo/starter@1.0.1 start
+> ng serve --open
+
+Prebundling has been configured but will not be used because scripts optimization is enabled.
+An unhandled exception occurred: Port 4200 is already in use. Use '--port' to specify a different port.
+See "/tmp/ng-AhRfce/angular-errors.log" for further details.

From 4c2db8fc6a6de590459728a1c016913b195ed4c7 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 18 May 2026 02:37:14 +0000
Subject: [PATCH 3/4] fix(ui): Support theme switching and solid backgrounds in
 dialogs/menus

- Inject active application theme (`treo-theme-dark` / `treo-theme-light`) into Angular Material dialog components dynamically when opening the dashboard, detail, and mobile settings dialogs.
- Apply `panelClass="theme-select-panel"` to all `mat-select` elements across settings templates.
- Explicitly style backgrounds and option text colors for settings overlays depending on the active theme in `styles.scss` to prevent transparent overlay readability issues.
- Apply dark and light backgrounds respectively to dashboard `mat-menu` components ensuring readable text.

Co-authored-by: WyattGorman <444043+WyattGorman@users.noreply.github.com>
---
 webapp/frontend/src/styles/styles.scss | 15 +++++++++++++++
 webapp/npm_output.log                  |  7 -------
 2 files changed, 15 insertions(+), 7 deletions(-)
 delete mode 100644 webapp/npm_output.log

diff --git a/webapp/frontend/src/styles/styles.scss b/webapp/frontend/src/styles/styles.scss
index 6d54eb499..5415effae 100644
--- a/webapp/frontend/src/styles/styles.scss
+++ b/webapp/frontend/src/styles/styles.scss
@@ -54,3 +54,18 @@
 .treo-theme-dark .theme-select-panel .mat-mdc-select-value-text {
     color: #e2e8f0 !important;
 }
+
+// Fix transparency on Mat-Menu panels
+.treo-theme-dark .mat-mdc-menu-panel {
+    background-color: #1e293b !important;
+}
+.treo-theme-dark .mat-mdc-menu-item {
+    color: #e2e8f0 !important;
+}
+.treo-theme-dark .mat-mdc-menu-item .mat-icon {
+    color: #e2e8f0 !important;
+}
+
+.treo-theme-light .mat-mdc-menu-panel {
+    background-color: #ffffff !important;
+}
diff --git a/webapp/npm_output.log b/webapp/npm_output.log
deleted file mode 100644
index 058a3a35d..000000000
--- a/webapp/npm_output.log
+++ /dev/null
@@ -1,7 +0,0 @@
-
-> @treo/starter@1.0.1 start
-> ng serve --open
-
-Prebundling has been configured but will not be used because scripts optimization is enabled.
-An unhandled exception occurred: Port 4200 is already in use. Use '--port' to specify a different port.
-See "/tmp/ng-AhRfce/angular-errors.log" for further details.

From 8db02789d853aee16f38b0fe9e3edc714f6e12c5 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 18 May 2026 13:52:14 +0000
Subject: [PATCH 4/4] fix: theme inheritance and transparent dropdown
 backgrounds in settings

- Pass current theme class dynamically to mat-dialog instances via panelClass.
- Add theme-select-panel class to mat-select components for explicit styling.
- Update styles.scss to provide solid backgrounds for mat-select and mat-menu.
- Fix dark mode text readability in dialogs by targeting the cdk-overlay-container and settings-dialog-panel.

Co-authored-by: WyattGorman <444043+WyattGorman@users.noreply.github.com>
---
 .../modules/dashboard/dashboard.component.ts   |  2 +-
 .../src/app/modules/detail/detail.component.ts |  2 +-
 .../mobile-settings.component.ts               |  2 +-
 webapp/frontend/src/styles/styles.scss         | 18 ++++++++++++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
index 2bac62eb9..e07d36fec 100644
--- a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
+++ b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
@@ -443,7 +443,7 @@ export class DashboardComponent implements OnInit, OnDestroy
 
     openDialog(): void {
         const theme = document.body.classList.contains('treo-theme-dark') ? 'treo-theme-dark' : 'treo-theme-light';
-        const dialogRef = this.dialog.open(DashboardSettingsComponent, {width: '800px', maxWidth: '95vw', panelClass: theme});
+        const dialogRef = this.dialog.open(DashboardSettingsComponent, {width: '800px', maxWidth: '95vw', panelClass: [theme, 'settings-dialog-panel']});
 
         dialogRef.afterClosed().subscribe();
     }
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.ts b/webapp/frontend/src/app/modules/detail/detail.component.ts
index d1ff2fbbf..4a113a4f8 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.ts
+++ b/webapp/frontend/src/app/modules/detail/detail.component.ts
@@ -733,7 +733,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
 
         const dialogRef = this.dialog.open(DetailSettingsComponent, {
             width: '600px',
-            panelClass: theme,
+            panelClass: [theme, 'settings-dialog-panel'],
             data: {
                 curMuted: this.device.muted,
                 curLabel: this.device.label,
diff --git a/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts b/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts
index a40fbb890..1c4272dd3 100644
--- a/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts
+++ b/webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts
@@ -21,7 +21,7 @@ export class MobileSettingsComponent {
             width: '100vw',
             maxWidth: '100vw',
             height: '100vh',
-            panelClass: ['mobile-settings-dialog', theme]
+            panelClass: ['mobile-settings-dialog', theme, 'settings-dialog-panel']
         });
     }
 }
diff --git a/webapp/frontend/src/styles/styles.scss b/webapp/frontend/src/styles/styles.scss
index 5415effae..a04b4ad18 100644
--- a/webapp/frontend/src/styles/styles.scss
+++ b/webapp/frontend/src/styles/styles.scss
@@ -69,3 +69,21 @@
 .treo-theme-light .mat-mdc-menu-panel {
     background-color: #ffffff !important;
 }
+
+// Target overlay container specifically
+.cdk-overlay-container {
+    .settings-dialog-panel.treo-theme-dark {
+        .mat-mdc-dialog-surface, .mdc-dialog__surface {
+            background-color: var(--treo-card-background, #1e293b) !important;
+            color: var(--treo-text-default, #e2e8f0) !important;
+
+            h2, span, mat-label, .mat-mdc-dialog-title, .mat-mdc-select-value-text, .mdc-button__label, input, .mat-mdc-form-field-label {
+                color: var(--treo-text-default, #e2e8f0) !important;
+            }
+
+            .mat-mdc-form-field-hint {
+                color: var(--treo-text-secondary, #94a3b8) !important;
+            }
+        }
+    }
+}