fix dark theme UI

app/main.py

@@ -36,6 +36,36 @@ st.markdown("""
         --border-color: #30363d;
     }
 
+    /* Main background */
+    html, body {
+        background-color: var(--bg-darker) !important;
+        color: var(--text-primary) !important;
+    }
+
+    /* Streamlit containers */
+    .main, [data-testid="stAppViewContainer"] {
+        background-color: var(--bg-dark) !important;
+    }
+
+    [data-testid="stSidebar"] {
+        background-color: #0d1117 !important;
+        border-right: 1px solid var(--border-color);
+    }
+
+    /* Text colors */
+    p, span, div, h1, h2, h3, h4, h5, h6 {
+        color: var(--text-primary) !important;
+    }
+
+    /* Metric card styling */
+    [data-testid="metric-container"] {
+        background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
+        border: 1px solid var(--border-color) !important;
+        border-radius: 10px !important;
+        padding: 1.5rem !important;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
+    }
+
     .metric-card {
         background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
         padding: 1.5rem;
@@ -65,6 +95,114 @@ st.markdown("""
         margin-top: 2rem;
         margin-bottom: 1.5rem;
     }
+
+    /* Button styling */
+    [data-testid="baseButton-primary"] {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
+        color: #fff !important;
+        border: none !important;
+        border-radius: 8px !important;
+        padding: 0.5rem 1.5rem !important;
+        font-weight: 600 !important;
+        transition: all 0.3s ease !important;
+    }
+
+    [data-testid="baseButton-primary"]:hover {
+        box-shadow: 0 0 20px rgba(0, 102, 255, 0.4) !important;
+        transform: translateY(-2px) !important;
+    }
+
+    /* Input fields */
+    [data-testid="stTextInput"] input,
+    [data-testid="stSlider"] input {
+        background-color: #161b22 !important;
+        border: 1px solid var(--border-color) !important;
+        color: var(--text-primary) !important;
+        border-radius: 6px !important;
+    }
+
+    [data-testid="stTextInput"] input::placeholder {
+        color: var(--text-secondary) !important;
+    }
+
+    /* Slider */
+    [data-testid="stSlider"] {
+        color: var(--primary-color) !important;
+    }
+
+    /* Tabs */
+    [data-testid="stTabs"] [role="tablist"] {
+        background-color: transparent !important;
+        border-bottom: 2px solid var(--border-color) !important;
+    }
+
+    [data-testid="stTabs"] [role="tab"] {
+        color: var(--text-secondary) !important;
+        background-color: transparent !important;
+        border: none !important;
+        padding: 1rem 1.5rem !important;
+    }
+
+    [data-testid="stTabs"] [role="tab"][aria-selected="true"] {
+        color: var(--primary-color) !important;
+        border-bottom: 3px solid var(--primary-color) !important;
+    }
+
+    /* Dataframe */
+    [data-testid="dataframe"] {
+        background-color: #0d1117 !important;
+    }
+
+    .dataframe {
+        background-color: #0d1117 !important;
+        color: var(--text-primary) !important;
+    }
+
+    /* Info/Error boxes */
+    [data-testid="stInfo"],
+    [data-testid="stSuccess"],
+    [data-testid="stWarning"],
+    [data-testid="stError"] {
+        background-color: rgba(0, 102, 255, 0.1) !important;
+        border-left: 4px solid var(--primary-color) !important;
+        border-radius: 6px !important;
+    }
+
+    [data-testid="stError"] {
+        background-color: rgba(255, 56, 56, 0.1) !important;
+        border-left-color: var(--danger-color) !important;
+    }
+
+    /* Markdown */
+    [data-testid="stMarkdown"] {
+        color: var(--text-primary) !important;
+    }
+
+    /* Expander */
+    [data-testid="stExpander"] {
+        background-color: #161b22 !important;
+        border: 1px solid var(--border-color) !important;
+        border-radius: 6px !important;
+    }
+
+    /* Scrollbar */
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #0d1117;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: var(--border-color);
+        border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--primary-color);
+    }
     </style>
 """, unsafe_allow_html=True)