support dark mode

app.py

@@ -55,7 +55,7 @@ class PaperManager:
 
         return f"""
         <tr class="athing">
-            <td align="right" valign="top" class="title"><span class="rank">{rank}.</span></td>
+            <td align="right" valign="top" class="rank"><span>{rank}.</span></td>
             <td valign="top" class="title">
                 <a href="{url}" class="storylink" target="_blank">{title}</a>
             </td>
@@ -108,97 +108,123 @@ def refresh_papers():
     else:
         return "<div class='no-papers'>Failed to refresh papers. Please try again later.</div>"
 
+# Dark Mode CSS
 css = """
+/* Base Styling */
 body {
-    background-color: white;
+    background-color: #121212; /* Dark background for the entire app */
     font-family: Verdana, Geneva, sans-serif;
     margin: 0;
     padding: 0;
+    color: #e0e0e0; /* Light text color for dark mode */
 }
 
+/* Links */
 a {
-    color: #0000ff;
+    color: #bb86fc; /* Light purple for links */
     text-decoration: none;
 }
 
 a:visited {
-    color: #551A8B;
+    color: #8f56c1; /* Darker purple for visited links */
 }
 
+/* Container */
 .container {
     width: 85%;
     margin: auto;
+    background-color: #1e1e1e; /* Dark background for the container */
+    padding: 20px;
+    border-radius: 8px;
 }
 
+/* Table */
 table {
     width: 100%;
+    background-color: #1e1e1e; /* Dark background for the table */
+    border-spacing: 0;
+    border-collapse: collapse;
 }
 
-.header-table {
-    width: 100%;
-    background-color: #ff6600;
-    padding: 2px 10px;
+tr.athing {
+    background-color: #2c2c2c; /* Slightly lighter dark color for rows */
 }
 
-.header-table a {
-    color: black;
-    font-weight: bold;
-    font-size: 14pt;
-    text-decoration: none;
+tr.athing:nth-child(even) {
+    background-color: #232323; /* Alternate row color */
 }
 
-.itemlist .athing {
-    background-color: #f6f6ef;
+.rank, .storylink, .subtext {
+    padding: 10px;
+    border-bottom: 1px solid #333; /* Border between rows */
 }
 
 .rank {
     font-size: 14pt;
-    color: #828282;
-    padding-right: 5px;
+    color: #bbbbbb;
+    padding-right: 10px;
 }
 
 .storylink {
-    font-size: 10pt;
+    font-size: 12pt;
+    color: #bb86fc; /* Light purple for story titles */
 }
 
 .subtext {
-    font-size: 8pt;
-    color: #828282;
-    padding-left: 40px;
+    font-size: 10pt;
+    color: #888888; /* Light gray for subtext */
 }
 
-.subtext a {
-    color: #828282;
+/* Header Styling */
+.header-table {
+    width: 100%;
+    background-color: #ff6600;
+    padding: 10px 20px;
+}
+
+.header-table a {
+    color: black;
+    font-weight: bold;
+    font-size: 18pt;
     text-decoration: none;
 }
 
+/* Refresh Button */
 #refresh-button {
-    background: none;
+    background: #ff6600;
     border: none;
     color: black;
     font-weight: bold;
     font-size: 14pt;
     cursor: pointer;
+    padding: 10px 20px;
+    border-radius: 5px;
 }
 
+#refresh-button:hover {
+    background-color: #e55b00; /* Slightly darker orange on hover */
+}
+
+/* No Papers Section */
 .no-papers {
     text-align: center;
-    color: #828282;
-    padding: 1rem;
-    font-size: 14pt;
+    color: #bbbbbb;
+    padding: 20px;
+    font-size: 16pt;
 }
 
+/* Responsive Styles */
 @media (max-width: 640px) {
     .header-table a {
-        font-size: 12pt;
+        font-size: 14pt;
     }
 
     .storylink {
-        font-size: 9pt;
+        font-size: 10pt;
     }
 
     .subtext {
-        font-size: 7pt;
+        font-size: 9pt;
     }
 }
 """
@@ -248,4 +274,4 @@ with demo:
     </script>
     """)
 
-demo.launch()
+demo.launch()