From 0c40682ef6abd1477d0c4f0f63353ee37c2838d1 Mon Sep 17 00:00:00 2001
From: mht <tohidihassan9@gmail.com>
Date: Sun, 13 Jul 2025 16:04:41 +0330
Subject: [PATCH] UI: Add dark mode theme to HTML report generated by
 compare_models.py

---
 test/compare_models.py | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)
diff --git a/test/compare_models.py b/test/compare_models.py
index 528a5b8..724eb42 100644
--- a/test/compare_models.py
+++ b/test/compare_models.py
@@ -1082,17 +1082,17 @@ class ComparisonRunner:
         <head>
             <title>Model Comparison Report</title>
             <style>
-                body { font-family: sans-serif; margin: 20px; }
-                h1, h2, h3 { color: #333; }
-                table { border-collapse: collapse; width: 90%; margin-bottom: 20px; }
-                th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
-                th { background-color: #f2f2f2; }
+                body { font-family: sans-serif; margin: 20px; background: #181a1b; color: #e8e6e3; }
+                h1, h2, h3 { color: #ffcc00; }
+                table { border-collapse: collapse; width: 90%; margin-bottom: 20px; background: #23272a; color: #e8e6e3; }
+                th, td { border: 1px solid #444; padding: 8px; text-align: left; }
+                th { background-color: #282c34; color: #ffcc00; }
                 .plot-container { margin-bottom: 30px; page-break-inside: avoid; }
-                img { max-width: 100%; height: auto; border: 1px solid #ccc; }
+                img { max-width: 100%; height: auto; border: 1px solid #555; background: #23272a; }
                 .nan { color: #999; font-style: italic; }
                 .collapsible {
-                    background-color: #f2f2f2;
-                    color: #444;
+                    background-color: #23272a;
+                    color: #ffcc00;
                     cursor: pointer;
                     padding: 10px;
                     width: 100%;
@@ -1104,23 +1104,30 @@ class ComparisonRunner:
                     margin-bottom: 5px;
                 }
                 .active, .collapsible:hover {
-                    background-color: #ddd;
+                    background-color: #282c34;
                 }
                 .content {
                     padding: 0 18px;
                     display: none;
                     overflow: hidden;
-                    background-color: #f9f9f9;
+                    background-color: #23272a;
                 }
-                .metric-explanation { margin-bottom: 20px; padding: 10px; border: 1px solid #eee; background-color: #f9f9f9; }
+                .metric-explanation { margin-bottom: 20px; padding: 10px; border: 1px solid #333; background-color: #23272a; color: #e8e6e3; }
                 .metric-explanation dt { font-weight: bold; }
                 .metric-explanation dd { margin-left: 20px; margin-bottom: 5px; }
+                a { color: #ffcc00; }
+                /* Auto dark mode for browsers that support it */
+                @media (prefers-color-scheme: dark) {
+                    body { background: #181a1b; color: #e8e6e3; }
+                    table { background: #23272a; color: #e8e6e3; }
+                    th { background-color: #282c34; color: #ffcc00; }
+                    td { color: #e8e6e3; }
+                }
             </style>
         </head>
         <body>
             <h1>Model Comparison Report</h1>
             <p>Number of samples per model component: {self.num_samples}</p>
-
             <div class="metric-explanation">
                 <h3>Understanding the Metrics:</h3>
                 <dl>
