Repository: traefik/traefik (language: go)

Issue:
Color contrast for the dashboard in dark mode is too low
### Welcome!

- [X] Yes, I've searched similar issues on [GitHub](https://github.com/traefik/traefik/issues) and didn't find any.
- [X] Yes, I've searched similar issues on the [Traefik community forum](https://community.traefik.io) and didn't find any.

### What did you do?

When using Traefik's dark mode dashboard, the low color contrast between the dark background and the dark text (and dark colors on dark background) makes it VERY difficult to actually read anything in dark mode.

In light mode, although the contrast is not as high as I'd like, I can at least read the text:
<img width="600" alt="image" src="https://user-images.githubusercontent.com/24810585/209862446-f024b8a5-98c9-4fe3-80e2-9c5267bd10e4.png">


### What did you see instead?

...but in dark mode, the text is just straight up unreadable, especially when the image isn't as zoomed in as this.

<img width="500" alt="image" src="https://user-images.githubusercontent.com/24810585/209862487-6f1b7fff-6b58-4714-9801-9ea41be14064.png">

From a UX standpoint, this definitely needs some attention.

### What version of Traefik are you using?

2.9.6

### What is your environment & configuration?

```yaml
api:
  dashboard: true
```

### If applicable, please paste the log output in DEBUG level

_No response_


Discussion / hints:
Hello @JaneJeon,

Thanks for your interest in Traefik!

I do agree that the webui is not well readable / accessible on dark mode. We could use a tool like https://github.com/dequelabs/axe-core to test this in the CI.
Agreed, dark mode is great, but that contrast is a bit weak.
Here is quick temporary solution with uBlock Origin's filter:

```
traefik.local##div.app-chip-accent:style(color:#fff !important; background-color:transparent !important;)
traefik.local##div.app-chip-rule:style(color:#fff !important; background-color:transparent !important;)
traefik.local##div.app-chip-entry-points:style(color:#fff !important; background-color:transparent !important;)
traefik.local##div.app-chip-name:style(color:#fff !important; background-color:transparent !important;)
traefik.local##div.app-chip-purple:style(color:#fff !important; background-color:transparent !important;)
traefik.local##div.app-chip-service:style(color:#fff !important; background-color:transparent !important;)
traefik.local##div.app-chip-warning:style(color:#fff !important; background-color:transparent !important;)
```

This override makes text white.
Don't forget to modify domain to match yours.
Where would I put this code?  In my compose file? I am new to this sorry
> Where would I put this code? In my compose file? I am new to this sorry

You need browser's plugin named uBlock Origin.
Go to settings and place the code in "My Filters".
"traefik.local" defines domain, you may change it to match yours.

uBlock Origin is simply altering css style on-the-fly.
This browser plugin is great, not only for this purpose. Check it out!

Fix patch:
diff --git a/webui/src/components/_commons/ToolBarTable.vue b/webui/src/components/_commons/ToolBarTable.vue
index 3a7e67d25c..03d4b6a522 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 0bdc9ba3b1..e62f06bd71 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%);
   }
 }


Test patch: