Fix dark theme bugs

heyxkhoa · Feb 21, 2023 · ea5602f · ea5602f
1 parent a556ce8
commit ea5602f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css
@@ -30,6 +30,9 @@
     --loading-bg: rgba(255, 255, 255, 0.48);
     --font-family-monospace: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
     --font-size-disable-autozoom: 1rem;
+    --alert-message-color: #24426c;
+    --alert-message-border: #cbdbf2;
+    --alert-message-bg: #dae5f5;
 }
 
 [data-theme="dark"] {
@@ -59,6 +62,9 @@
     --detailed-info-color: #fff;
     --gray300: #f3f3f3;
     --loading-bg: #131313;
+    --alert-message-color: #e6e6e6;
+    --alert-message-border: #363648;
+    --alert-message-bg: #363648;
 }
 
 body {

diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
@@ -130,6 +130,10 @@
     background-color: transparent !important;
 }
 
+[data-theme="dark"] .form-control--transparent option {
+    background-color: var(--card-bgcolor);
+}
+
 .input-group-search {
     background-color: transparent;
     position: relative;
@@ -400,6 +404,10 @@
     background-color: var(--logs__row--blue-bgcolor);
 }
 
+[data-theme="dark"] .logs__row--blue .logs__text--link {
+    color: var(--white);
+}
+
 .logs__row--green {
     background-color: var(--green-pale);
 }

diff --git a/client/src/components/ui/Tabler.css b/client/src/components/ui/Tabler.css
@@ -5047,9 +5047,9 @@ tbody.collapse.show {
 }
 
 .alert-primary {
-    color: #24426c;
-    background-color: #dae5f5;
-    border-color: #cbdbf2;
+    color: var(--alert-message-color);
+    background-color: var(--alert-message-bg);
+    border-color: var(--alert-message-border);
 }
 
 .alert-primary hr {