bug #46565 [WebProfilerBundle] Fix dark theme selected line highlight color & reuse css vars (ogizanagi)

fabpot · fabpot · commit 573d3eaa7f5d · 2022-06-03T14:51:12.000+02:00
This PR was merged into the 4.4 branch. Discussion ---------- [WebProfilerBundle] Fix dark theme selected line highlight color & reuse css vars | Q | A | ------------- | --- | Branch? | 4.4  | Bug fix? | yes | New feature? | no  | Deprecations? | no  | Tickets | N/A | License | MIT | Doc PR | N/A When using the profiler with a dark theme, the Messenger panel was missing using the dedicated vars and was still using a light bg: ![Capture d’écran 2022-06-03 à 09 56 42](https://user-images.githubusercontent.com/2211145/171813241-7494009d-d4c2-4f8e-bafa-5bea6ceafb33.png) and the selected lines on file excerpts (for any panel) are not contrasted enough: ![Capture d’écran 2022-06-03 à 09 56 57](https://user-images.githubusercontent.com/2211145/171813271-5ca66891-989b-4e97-98a7-0dd4c24fd0b4.png) I suggest using a more contrasted highlight color for selected lines: ![Capture d’écran 2022-06-03 à 09 56 07](https://user-images.githubusercontent.com/2211145/171813357-4bac1e45-d1fa-4aaa-b7b2-0e17978f63e3.png) Commits ------- 5514bdf [WebProfilerBundle] Fix dark theme selected line highlight color & reuse css vars
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -39,6 +39,7 @@
     --highlight-default: #222222;
     --highlight-keyword: #a71d5d;
     --highlight-string: #183691;
+    --highlight-selected-line: rgba(255, 255, 153, 0.5);
     --base-0: #fff;
     --base-1: #f5f5f5;
     --base-2: #e0e0e0;
@@ -80,6 +81,7 @@
     --highlight-default: var(--base-6);
     --highlight-keyword: #ff413c;
     --highlight-string: #70a6fd;
+    --highlight-selected-line: rgba(14, 14, 14, 0.5);
     --base-0: #2e3136;
     --base-1: #444;
     --base-2: #666;
@@ -1091,15 +1093,15 @@ table.logs .metadata {
     padding: 0;
 }
 #collector-content .sf-validator .trace li.selected {
-    background: rgba(255, 255, 153, 0.5);
+    background: var(--highlight-selected-line);
 }
 
 {# Messenger panel
    ========================================================================= #}
 
 #collector-content .message-bus .trace {
-    border: 1px solid #DDD;
-    background: #FFF;
+    border: var(--border);
+    background: var(--base-0);
     padding: 10px;
     margin: 0.5em 0;
     overflow: auto;
@@ -1112,7 +1114,7 @@ table.logs .metadata {
     padding: 0;
 }
 #collector-content .message-bus .trace li.selected {
-    background: rgba(255, 255, 153, 0.5);
+    background: var(--highlight-selected-line);
 }
 
 {# Dump panel
