From dfd0353d74ccd362cd1cafe4a5eee74c6afa711e Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Thu, 14 Aug 2025 18:10:58 +0300
Subject: [PATCH] saved filters: fix dark theme

---
 .../saved-filters-dialog.component.css        | 27 +++++++++++++++--
 .../saved-filters-panel.component.css         | 29 +++++++++++++++++--
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css
index 6deec4ede..bd1f7c870 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css
+++ b/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;
 }
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
index 6863fb37e..2349c5918 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
+++ b/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;
 }