fix(ui): Fix for dark theme (#191)

* Potential fix to show even table rows correctly * - Fixed the background of input fields. - Changed the brightness of warning color in dark-mode --------- Co-authored-by: Christoph Anderson <[email protected]>
kopia · Sep 17, 2023 · 417128d · 417128d
1 parent c266971
commit 417128d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 17 deletions.
diff --git a/src/css/App.css b/src/css/App.css
@@ -105,28 +105,25 @@ a:hover {
   filter: brightness(80%);
 }
 
-.table-striped>tbody>tr:nth-of-type(odd)>* {
+.table {
   color: var(--text-color-body);
-  background-color: var(--color-stripe);
 }
 
-.table-striped>tbody>tr:nth-of-type(even)>* {
+.table-hover>tbody>tr:hover>* {
   color: var(--text-color-body);
 }
 
-.navbar-light .navbar-nav .nav-link {
-  color: var(--text-color-nav);
-}
-
-.table {
+.table-striped>tbody>tr:nth-of-type(odd)>* {
   color: var(--text-color-body);
+  background-color: var(--color-stripe);
 }
 
-.table-hover>tbody>tr:hover>* {
+.table-striped>tbody>tr:nth-of-type(even)>* {
   color: var(--text-color-body);
+  background-color: var(--background-color);
 }
 
-.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
+.navbar-light .navbar-nav .nav-link {
   color: var(--text-color-nav);
 }
 
@@ -135,26 +132,49 @@ a:hover {
   filter: brightness(80%);
 }
 
-.accordion-body {
+.form-control, .form-control:focus, .form-control:active, .form-control:hover {
+  color: var(--text-color-body) !important;
+  background-color: var(--background-color) !important;
+}
+
+.form-select, .form-select:focus, .form-select:active, form-select:hover {
   color: var(--text-color-body);
   background-color: var(--background-color);
 }
 
-.accordion-button:not(.collapsed) {
-  color: var(--text-color-body)  !important;
-  background-color: var(--background-color) !important;
+.form-control-sm, .form-control-sm:focus, .form-control-sm:active, .form-control-sm:hover {
+  color: var(--text-color-body);
+  background-color: var(--background-color);
 }
 
-.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
-  background-color: var(--color-select) !important;
+.form-check-input, .form-check-input:focus, .form-check-input:active, .form-control-sm:hover {
+  color: var(--text-color-body);
+}
+
+.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
+  color: var(--text-color-nav);
+}
+
+.accordion-body {
   color: var(--text-color-body) !important;
+  background-color: var(--background-color) !important;
 }
 
 .accordion-button  {
   background-color: var(--background-color) !important;
   color: var(--text-color-body) !important;
 }
 
+.accordion-button:not(.collapsed) {
+  color: var(--text-color-body);
+  background-color: var(--background-color);
+}
+
+.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
+  background-color: var(--color-select);
+  color: var(--text-color-body);
+}
+
 .popover {
   max-width: 1000px;
 }

diff --git a/src/css/Theme.css b/src/css/Theme.css
@@ -21,7 +21,7 @@
   --background-color: #222222;
   --color-primary: #1162b1;
   --color-secondary: #0d9aab;
-  --color-warning: #b30996;
+  --color-warning: #7e0d6b;
   --color-success: #0d9aab;
   --color-submit: #00B4D8;
   --color-stripe: #323232;