Merge pull request #1307 from rocket-admin/saved-filters-2

saved filters: fix dark theme

Author: lyubov-voloshko

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css

@@ -35,17 +35,40 @@
 .section-title {
     grid-column: 1 / span 6;
     margin: 16px 0 8px 0;
-    color: rgba(0, 0, 0, 0.87);
+
     font-weight: 500;
 }
 
+@media (prefers-color-scheme: light) {
+    .section-title {
+        color: rgba(0, 0, 0, 0.87);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .section-title {
+        color: rgba(255, 255, 255, 0.87);
+    }
+}
+
 .section-description {
     grid-column: 1 / span 6;
     margin: 0 0 16px 0;
-    color: rgba(0, 0, 0, 0.6);
     font-size: 14px;
 }
 
+@media (prefers-color-scheme: light) {
+    .section-description {
+        color: rgba(0, 0, 0, 0.6);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .section-description {
+        color: rgba(255, 255, 255, 0.6);
+    }
+}
+
 .full-width {
     grid-column: 1 / -1;
 }

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css

@@ -18,13 +18,28 @@
 .saved-filters-tabs ::ng-deep .mat-mdc-standard-chip {
     --mdc-chip-container-shape-radius: 4px;
     --mdc-chip-outline-width: 1px;
-    --mdc-chip-outline-color: rgba(0,0,0,0.24);
     --mdc-chip-elevated-container-color: transparent !important;
     --mdc-chip-elevated-selected-container-color: var(--color-accentedPalette-500) !important;
     --mdc-chip-container-height: 32px;
     --mdc-chip-label-text-color: rgba(0,0,0,0.64);
 }
 
+@media (prefers-color-scheme: light) {
+    .saved-filters-tabs ::ng-deep .mat-mdc-standard-chip {
+        --mdc-chip-outline-color: rgba(0,0,0,0.24);
+        --mdc-chip-elevated-selected-container-color: var(--color-accentedPalette-500) !important;
+        --mdc-chip-label-text-color: rgba(0,0,0,0.64);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .saved-filters-tabs ::ng-deep .mat-mdc-standard-chip {
+        --mdc-chip-outline-color: rgba(255,255,255,0.24);
+        --mdc-chip-elevated-selected-container-color: var(--color-accentedPalette-500) !important;
+        --mdc-chip-label-text-color: rgba(255,255,255,0.64);
+    }
+}
+
 .filters-container {
     display: flex;
     gap: 20px;
@@ -40,10 +55,20 @@
 }
 
 .column-name {
-    color: rgba(0,0,0,0.64);
     margin-top: -8px;
 }
 
+@media (prefers-color-scheme: light) {
+    .column-name {
+        color: rgba(0,0,0,0.64);
+    }
+}
+@media (prefers-color-scheme: dark) {
+    .column-name {
+        color: rgba(255,255,255,0.64);
+    }
+}
+
 .column-name strong {
     margin-left: 8px;
 }