Adapt front for dark mode

front/utils.py

@@ -137,8 +137,8 @@ def make_html_figure_sources(source,i,img_str):
     <div class="card card-image">
         <div class="card-content">
             <h2>Image {i} - {title} - Page {int(meta['page_number'])}</h2>
-            <p class='ai-generated'>AI-generated description</p>
             <img src="data:image/png;base64, { img_str }" alt="Alt text" />
+            <p class='ai-generated'>AI-generated description</p>
 
             <p>{content}</p>
 

style.css

@@ -311,37 +311,35 @@ footer {
     /* ... add other mobile-specific styles ... */
 }
 
+@media (prefers-color-scheme: dark) {
+    .card{
+        background-color: #374151;
+    }
+    .card-image > .card-content{
+        background-color: rgb(55, 65, 81) !important;
+    }
 
-body.dark .container > .wrap{
-    background-color: #374151 !important;
-    color:white !important;
-}
-
-body.dark .card{
-    background-color: #374151;
-}
-
-
-body.dark .card-content h2{
-    color:#f4dbd3 !important;
-}
+    .card-footer {
+        background-color: #404652;
+    }
 
-body.dark .card-footer {
-    background-color: #404652;
+    .container > .wrap{
+        background-color: #374151 !important;
+        color:white !important;
+    }
+    .card-content h2{
+        color:#e7754f !important;
+    }
+    .doc-ref sup{
+        color:rgb(235 109 35)!important;
+        /* margin-right:1px; */
+    }
+    .card-footer span {
+        color:white !important;
+    }
+    
 }
 
-body.dark .card-footer span {
-    color:white !important;
-}
-body.dark .gradio-container .contain .card-image > .card-content{
-    background-color: #404652 !important;
-}
-body.dark .gradio-container .contain .card > .card-content{
-    background-color: #404652 !important;
-}
-body.dark .card-footer{
-    background-color: #24272e !important;
-}
 
 .doc-ref{
     color:#dc2626!important;
@@ -385,7 +383,7 @@ span.chatbot > p > img{
 }
 
 .card-image > .card-content{
-    background-color:#f1f7fa !important;
+    background-color:#f1f7fa;
 }
 
 
@@ -496,7 +494,7 @@ span.chatbot > p > img{
     border-top: 1px solid #db3434 !important; /* Blue color */
     border-right: 1px solid #3498db !important; /* Blue color */
     border-radius: 50%;
-    width: 20px;
+    width: 20px;    
     height: 20px;
     animation: spin 2s linear infinite;
     display:inline-block;