HUD commit details: fix css colors in dark mode (#6451)

In both commit details and minihud:

move css background colors to vars and add dark versions

before:

![image](https://github.com/user-attachments/assets/c269047f-5b76-48c8-9c6d-76e627685e82)

![image](https://github.com/user-attachments/assets/cd6036e9-b79b-4bcc-a9ac-96df571d1fc1)


after:
<img width="1092" alt="image"
src="https://github.com/user-attachments/assets/0639d88b-ebe2-4c5a-ba5d-1942ea1e499b"
/>

![image](https://github.com/user-attachments/assets/5aa5ccda-fb3c-4e60-b8bb-c6739a38b53b)

Author: wdvr

torchci/components/commit.module.css

@@ -1,5 +1,5 @@
 .commitMessage {
-  background-color: whitesmoke;
+  background-color: var(--commit-message-bg);
   white-space: pre;
   max-height: 13em;
   overflow: scroll;
@@ -16,20 +16,20 @@
   border: 1px solid gray;
   padding: 10px;
   border-radius: 5px;
-  background-color: mistyrose;
+  background-color: var(--workflow-box-fail-bg);
 }
 
 .workflowBoxSuccess {
   border: 1px solid gray;
   padding: 10px;
   border-radius: 5px;
-  background-color: azure;
+  background-color: var(--workflow-box-success-bg);
 }
 
 .buttonBorder {
   border: 1px solid;
 }
 
 .buttonBorder:hover {
-  background-color: lightgrey;
+  background-color: var(--button-hover-bg);
 }

torchci/components/minihud.module.css

@@ -123,9 +123,9 @@
 
 /* Add even/odd row styling for better readability in tables */
 .tableWrapper :global(tbody tr:nth-child(odd)) {
-  background-color: #f5f5f5;
+  background-color: var(--table-row-odd-bg);
 }
 
 .tableWrapper :global(tbody tr:nth-child(even)) {
-  background-color: rgba(125, 125, 125, 0.1);
+  background-color: var(--table-row-even-bg);
 }

torchci/components/utilization/components/TestSectionView/ToggleTestsGroup.tsx

@@ -33,7 +33,7 @@ export const TestList = styled(Paper)({
   maxHeight: 300,
   maxWidth: 800,
   overflow: "auto",
-  backgroundColor: "#f5f5f5",
+  backgroundColor: "var(--table-row-odd-bg)",
 });
 const defaultTestViewValue = "chart";
 

torchci/styles/globals.css

@@ -17,6 +17,10 @@
   --forced-merge-failure-bg: #ffe0b3;
   --selected-row-bg: lightblue;
   --highlight-bg: #ffa;
+  --commit-message-bg: whitesmoke;
+  --button-hover-bg: lightgrey;
+  --table-row-odd-bg: #f5f5f5;
+  --table-row-even-bg: rgba(125, 125, 125, 0.1);
 
   /* MiniHud specific colors */
   --workflow-box-none-bg: lightgray;
@@ -78,12 +82,16 @@
   --forced-merge-failure-bg: #a06200;
   --selected-row-bg: #164863;
   --highlight-bg: #555500;
+  --commit-message-bg: #2a2a2a;
+  --button-hover-bg: #4a4a4a;
+  --table-row-odd-bg: #2a2a2a;
+  --table-row-even-bg: rgba(125, 125, 125, 0.1);
 
   /* MiniHud specific colors - dark mode variants */
   --workflow-box-none-bg: #383838;
   --workflow-box-fail-bg: #4b2c2c;
   --workflow-box-pending-bg: #1e3540;
-  --workflow-box-success-bg: #1e4020;
+  --workflow-box-success-bg: #0d3010;
   --workflow-box-classified-bg: #3b332a;
   --workflow-box-highlight-border: #1e7e82;
   --workflow-box-highlight-shadow: rgba(26, 98, 117, 0.7);