From 15f50553e90c3683f5c2d4e80808502ed9e81261 Mon Sep 17 00:00:00 2001
From: Andrea Cappuccio <hood@null.net>
Date: Tue, 5 Mar 2024 15:10:05 +0100
Subject: [PATCH] Make text more readable in dark mode

---
 webui/src/components/_commons/ToolBarTable.vue | 4 ++++
 webui/src/css/sass/app.scss                    | 7 +++++++
 2 files changed, 11 insertions(+)

diff --git a/webui/src/components/_commons/ToolBarTable.vue b/webui/src/components/_commons/ToolBarTable.vue
index 3a7e67d25..03d4b6a52 100644
--- a/webui/src/components/_commons/ToolBarTable.vue
+++ b/webui/src/components/_commons/ToolBarTable.vue
@@ -107,6 +107,10 @@ export default defineComponent({
         &.bg-app-toggle {
           color: $accent !important;
         }
+
+        .body--dark &.bg-app-toggle {
+          color: lighten($accent, 25%) !important;
+        }
       }
     }
     :deep(.bar-search) {
diff --git a/webui/src/css/sass/app.scss b/webui/src/css/sass/app.scss
index 0bdc9ba3b..e62f06bd7 100644
--- a/webui/src/css/sass/app.scss
+++ b/webui/src/css/sass/app.scss
@@ -173,23 +173,30 @@ body {
 .body--dark .app-chip {
   &-accent, &-rule {
     background-color: rgba($accent, 0.25);
+    color: lighten($accent, 25%);
   }
   &-green, &-entry-points {
     background-color: rgba($app-text-green, 0.25);
+    color: lighten($app-text-green, 25%);
   }
   &-purple, &-name {
     background-color: rgba($app-text-purple, 0.25);
+    color: lighten($app-text-purple, 25%);
   }
   &-warning, &-service {
     background-color: rgba($warning, 0.25);
+    color: lighten($warning, 25%);
   }
   &-negative, &-error {
     background-color: rgba($negative, 0.25);
+    color: lighten($negative, 25%);
   }
   &-green-2, &-options {
     background-color: rgba($app-text-green-2, 0.25);
+    color: lighten($app-text-green-2, 25%);
   }
   &-marine, &-interval {
     background-color: rgba($app-text-grey, 0.25);
+    color: lighten($app-text-grey, 25%);
   }
 }