Update app.py

app.py

@@ -18,79 +18,113 @@ bedrock = boto3.client("bedrock-runtime", region_name=AWS_REGION)
 # ───────────────────────────────────────────────────────────────────────────────
 # Page configuration
 st.set_page_config(
-    page_title="📰 News Summarizer Agent",
+    page_title="📰 News Summarizer Agent (Dark Mode)",
     page_icon="📰",
     layout="wide",              # wide layout for more room
     initial_sidebar_state="expanded"
 )
 
 # ───────────────────────────────────────────────────────────────────────────────
-# Custom CSS for vibrant UI
+# Custom CSS for dark UI
 st.markdown(
     """
     <style>
-    /* Change background color of the main area */
+    /* Set dark background for the entire app */
     .stApp {
-        background-color: #F7F9FC;
+        background-color: #121212;
+        color: #E0E0E0;
+    }
+    /* Sidebar background and text */
+    [data-testid="stSidebar"] {
+        background-color: #1E1E1E;
+        color: #E0E0E0;
+    }
+    [data-testid="stSidebar"] .stMarkdown, 
+    [data-testid="stSidebar"] .stText, 
+    [data-testid="stSidebar"] .stHeader {
+        color: #E0E0E0;
+    }
+    /* Change default input box background/text in dark mode */
+    .stTextInput > div > div > input {
+        background-color: #2A2A2A;
+        color: #E0E0E0;
+        border: 1px solid #444444;
+    }
+    /* Button styling */
+    .stButton > button {
+        background-color: #0078D7;
+        color: #FFFFFF;
+        border: none;
+    }
+    .stButton > button:hover {
+        background-color: #005FA1;
+        color: #FFFFFF;
     }
     /* Style for the title */
     .app-title {
         font-size: 2.5rem;
-        color: #1E3A8A;
+        color: #BB86FC;
         font-weight: 700;
         margin-bottom: 0.2rem;
     }
     /* Style for the subtitle/description */
     .app-subtitle {
         font-size: 1.1rem;
-        color: #374151;
+        color: #CCCCCC;
         margin-bottom: 1.5rem;
     }
-    /* Card container styling */
+    /* Card container styling (dark card) */
     .news-card {
-        background-color: #FFFFFF;
+        background-color: #1F1F1F;
         border-radius: 10px;
         padding: 1rem;
         margin-bottom: 1.5rem;
-        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
     }
-    /* Header style inside each card */
+    /* Header style inside each card (slightly lighter than card) */
     .news-header {
-        background-color: #E0F2FE;
+        background-color: #272727;
         border-radius: 8px;
         padding: 0.5rem 1rem;
         margin-bottom: 0.8rem;
     }
     .news-header h4 {
         margin: 0;
-        color: #0369A1;
+        color: #BB86FC;
     }
     /* Article title style */
     .article-title {
         font-size: 1.2rem;
         font-weight: 600;
-        color: #1F2937;
+        color: #FFFFFF;
         margin-bottom: 0.5rem;
     }
     /* Summary text style */
     .article-summary {
         font-size: 1rem;
-        color: #4B5563;
+        color: #CCCCCC;
         margin-bottom: 0.7rem;
     }
     /* “Read more” link style */
     .read-link {
         font-size: 0.95rem;
-        color: #1D4ED8;
+        color: #BB86FC;
         text-decoration: none;
         font-weight: 500;
     }
     .read-link:hover {
         text-decoration: underline;
     }
-    /* Spinner/loading text */
+    /* Spinner/loading text background override */
     .stSpinner > div {
-        background-color: #FFFFFF !important;
+        background-color: #1F1F1F !important;
+    }
+    /* Footer styling */
+    .footer-text {
+        text-align: center;
+        font-size: 0.9rem;
+        color: #888888;
+        padding-top: 1rem;
     }
     </style>
     """,
@@ -103,9 +137,9 @@ with st.sidebar:
     st.markdown("## ℹ️ About This App")
     st.markdown(
         """
-        - Enter any **topic**, **company name**, or **keywords** above and click **Get News**.
-        - This app will fetch up to 3 articles from **NewsAPI** and 2 from **Serper**, then summarize them using AWS Bedrock (Claude).
-        - You need valid `NEWS_API_KEY`, `SERPER_API_KEY`, and AWS credentials / region configured.
+        - Enter any **topic**, **company name**, or **keywords** above and click **Get News**.  
+        - This app will fetch up to 3 articles from **NewsAPI** and 2 from **Serper**, then summarize them using AWS Bedrock (Claude).  
+        - You need valid `NEWS_API_KEY`, `SERPER_API_KEY`, and AWS credentials / region configured.  
         """
     )
     st.markdown("---")
@@ -129,7 +163,7 @@ with st.sidebar:
 
 # ─────────────────────────────────────────────────────���─────────────────────────
 # Main Title / Header
-st.markdown('<div class="app-title">📰 News Summarizer Agent</div>', unsafe_allow_html=True)
+st.markdown('<div class="app-title">📰 News Summarizer Agent (Dark Mode)</div>', unsafe_allow_html=True)
 st.markdown(
     '<div class="app-subtitle">Get the top 5 latest news with concise summaries on any topic or company you choose.</div>',
     unsafe_allow_html=True
@@ -214,7 +248,7 @@ def summarize_with_bedrock(title: str, content: str) -> str:
 if btn and query:
     st.info(f"🔍 Searching for news on <b>{query}</b>...", unsafe_allow_html=True)
 
-    # Fetch articles concurrently / sequentially
+    # Fetch articles
     newsapi_articles = get_newsapi_articles(query)
     serper_articles = get_serper_articles(query)
 
@@ -261,8 +295,8 @@ if btn and query:
 # Footer (optional)
 st.markdown(
     """
-    <hr>
-    <div style="text-align:center; font-size:0.9rem; color:#6B7280; padding-top:1rem;">
+    <hr style="border-color: #333333; margin-top: 2rem;">
+    <div class="footer-text">
         Built with ❤️ using Streamlit • Data sources: NewsAPI.org, Serper.dev • Summarization via AWS Bedrock Claude
     </div>
     """,