Tweak / fix some dark mode colors

Update styles.scss

webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html

@@ -53,24 +53,24 @@
             <mat-tab-group mat-align-tabs="start">
                 <mat-tab label="Ata">
 
-                    <div matTooltip="not yet implemented" class="gray-200 flex flex-col mt-5 gt-md:flex-row">
+                    <div matTooltip="not yet implemented" class="flex flex-col mt-5 gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-md:pr-3">
-                            <mat-label>Critical Error Threshold</mat-label>
+                            <mat-label class="text-hint">Critical Error Threshold</mat-label>
                             <input disabled matInput [value]="'10%'">
                         </mat-form-field>
                         <mat-form-field class="flex-auto gt-md:pl-3">
-                            <mat-label>Critical Warning Threshold</mat-label>
+                            <mat-label class="text-hint">Critical Warning Threshold</mat-label>
                             <input disabled matInput>
                         </mat-form-field>
                     </div>
 
-                    <div matTooltip="not yet implemented" class="gray-200 flex flex-col gt-md:flex-row">
+                    <div matTooltip="not yet implemented" class="flex flex-col gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-md:pr-3">
-                            <mat-label>Error Threshold</mat-label>
+                            <mat-label class="text-hint">Error Threshold</mat-label>
                             <input disabled matInput [value]="'20%'">
                         </mat-form-field>
                         <mat-form-field class="flex-auto gt-md:pl-3">
-                            <mat-label>Warning Threshold</mat-label>
+                            <mat-label class="text-hint">Warning Threshold</mat-label>
                             <input disabled matInput [value]="'10%'">
                         </mat-form-field>
                     </div>
@@ -78,26 +78,26 @@
                 </mat-tab>
                 <mat-tab label="NVMe">
 
-                    <div matTooltip="not yet implemented" class="gray-200 flex flex-col mt-5 gt-md:flex-row">
+                    <div matTooltip="not yet implemented" class="flex flex-col mt-5 gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-md:pr-3">
-                            <mat-label>Critical Error Threshold</mat-label>
+                            <mat-label class="text-hint">Critical Error Threshold</mat-label>
                             <input disabled matInput [value]="'enabled'">
                         </mat-form-field>
                         <mat-form-field class="flex-auto gt-md:pl-3">
-                            <mat-label>Critical Warning Threshold</mat-label>
+                            <mat-label class="text-hint">Critical Warning Threshold</mat-label>
                             <input disabled matInput>
                         </mat-form-field>
                     </div>
 
                 </mat-tab>
                 <mat-tab label="SCSI">
-                    <div matTooltip="not yet implemented" class="gray-200 flex flex-col mt-5 gt-md:flex-row">
+                    <div matTooltip="not yet implemented" class="flex flex-col mt-5 gt-md:flex-row">
                         <mat-form-field class="flex-auto gt-md:pr-3">
-                            <mat-label>Critical Error Threshold</mat-label>
+                            <mat-label class="text-hint">Critical Error Threshold</mat-label>
                             <input disabled matInput [value]="'enabled'">
                         </mat-form-field>
                         <mat-form-field class="flex-auto gt-md:pl-3">
-                            <mat-label>Critical Warning Threshold</mat-label>
+                            <mat-label class="text-hint">Critical Warning Threshold</mat-label>
                             <input disabled matInput>
                         </mat-form-field>
                     </div>

webapp/frontend/src/styles/styles.scss

@@ -4,3 +4,15 @@
 // @ Styles from this file will override anything from 'vendors.scss' file allowing customizations and
 //  modifications of third party libraries.
 // -----------------------------------------------------------------------------------------------------
+
+.treo-theme-dark .yellow-50 {
+    background-color: #242b38 !important;
+
+    .mat-icon {
+        color: #6f4315 !important;
+    }
+
+    .text-secondary {
+        color: rgb(203 101 37 / 70%) !important
+    }
+}