Update app.py

app.py

@@ -18,36 +18,35 @@ st.set_page_config(
 )
 
 # -------------------------------
-# CUSTOM CSS FOR STYLING
+# CUSTOM CSS FOR STYLING (DARK MODE)
 # -------------------------------
-def local_css(file_name):
-    with open(file_name) as f:
-        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
-
-# You would create a style.css file for this, but for a single script, we can inject it directly.
 st.markdown("""
 <style>
+    /* Google Font */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
     /* Main App Font and Background */
     html, body, [class*="st-"] {
         font-family: 'Inter', sans-serif;
     }
     .stApp {
-        background-color: #F0F2F6;
+        background-color: #0E1117; /* Streamlit Dark Background */
+        color: #FAFAFA;
     }
     /* Main Title */
     h1 {
         font-size: 3rem;
         font-weight: 700;
-        color: #1E293B;
+        color: #FFFFFF;
         text-align: center;
         padding-top: 1rem;
     }
     /* Subheader Styling */
     h2 {
-        color: #334155;
+        color: #E2E8F0;
         font-weight: 600;
     }
-    /* Custom Containers */
+    /* Custom Containers & Tabs */
     .stTabs [data-baseweb="tab-list"] {
         gap: 24px;
     }
@@ -56,12 +55,14 @@ st.markdown("""
         white-space: pre-wrap;
         background-color: transparent;
         border-radius: 4px 4px 0px 0px;
+        color: #A0AEC0;
         gap: 1px;
         padding-top: 10px;
         padding-bottom: 10px;
     }
     .stTabs [aria-selected="true"] {
-        background-color: #FFFFFF;
+        background-color: #1E293B;
+        color: #FFFFFF;
     }
     /* Styled Buttons */
     .stButton>button {
@@ -79,17 +80,18 @@ st.markdown("""
     }
     /* Result Card Styling */
     .result-card {
-        background-color: white;
+        background-color: #1E293B;
         border-radius: 12px;
         padding: 20px;
         margin-bottom: 10px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-        border: 1px solid #E2E8F0;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        border: 1px solid #334155;
         text-align: center;
+        height: 100%;
     }
     .result-card h3 {
         font-size: 1.25rem;
-        color: #1E293B;
+        color: #E2E8F0;
         margin-bottom: 15px;
     }
     .result-verdict {
@@ -98,15 +100,19 @@ st.markdown("""
         margin-bottom: 15px;
     }
     .result-verdict.fake {
-        color: #DC2626; /* Red */
+        color: #F87171; /* Lighter Red for dark mode */
     }
     .result-verdict.real {
-        color: #16A34A; /* Green */
+        color: #4ADE80; /* Lighter Green for dark mode */
     }
     /* Custom Progress Bar for Confidence */
     .stProgress > div > div > div > div {
         background-image: linear-gradient(to right, #6366F1 , #4F46E5);
     }
+    /* Sidebar styling */
+    [data-testid="stSidebar"] {
+        background-color: #1E293B;
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -350,6 +356,7 @@ with tab2:
 
 
 
+
 # import streamlit as st
 # import joblib
 # from pathlib import Path