Update app.py

app.py

@@ -194,47 +194,70 @@ import os
 
 # Styling and Configuration
 st.set_page_config(
-    page_title="Sentiment Insight",
+    page_title="Sentiment Prediction with Aspects",
     page_icon="🧠",
     layout="wide",
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for enhanced styling
+# Custom CSS for enhanced dark mode styling
 st.markdown("""
 <style>
+    /* Dark Mode Base Styling */
     .stApp {
-        background-color: #f0f2f6;
+        background-color: #121212;
+        color: #e0e0e0;
     }
+
+    /* Sidebar Styling */
+    .css-1aumxhk {
+        background-color: #1e1e1e;
+        color: #e0e0e0;
+    }
+
+    /* Text Area Styling */
     .stTextArea > div > div > textarea {
-        background-color: white;
-        border: 2px solid #3498db;
+        background-color: #1e1e1e;
+        color: #e0e0e0;
+        border: 2px solid #4a4a4a;
         border-radius: 10px;
         padding: 10px;
     }
+
+    /* Button Styling */
     .stButton > button {
-        background-color: #3498db;
+        background-color: #2196f3;
         color: white;
         border-radius: 10px;
         border: none;
         padding: 10px 20px;
         transition: all 0.3s ease;
     }
+
     .stButton > button:hover {
-        background-color: #2980b9;
+        background-color: #1976d2;
         transform: scale(1.05);
     }
+
+    /* Result Card Styling */
     .result-card {
-        background-color: white;
+        background-color: #1e1e1e;
         border-radius: 10px;
         padding: 15px;
         margin-bottom: 10px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 6px rgba(255,255,255,0.1);
         transition: all 0.3s ease;
+        color: #e0e0e0;
     }
+
     .result-card:hover {
         transform: translateY(-5px);
-        box-shadow: 0 6px 8px rgba(0,0,0,0.15);
+        box-shadow: 0 6px 8px rgba(255,255,255,0.15);
+    }
+
+    /* Headings and Text */
+    h1, h2, h3, h4, p, div, span {
+        color: #e0e0e0 !important;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -246,11 +269,11 @@ SENTIMENT_EMOJIS = {
     'Positive': '😊'    # Smiling face for positive sentiment
 }
 
-# Sentiment Color Coding
+# Sentiment Color Coding (Updated for better visibility in dark mode)
 SENTIMENT_COLORS = {
-    'Negative': '#e74c3c',  # Red for negative
-    'Neutral': '#95a5a6',   # Gray for neutral
-    'Positive': '#2ecc71'   # Green for positive
+    'Negative': '#ff6b6b',  # Bright red for negative
+    'Neutral': '#4a4a4a',   # Gray for neutral
+    'Positive': '#4caf50'   # Bright green for positive
 }
 
 # Sentiment Prediction Model (Same as previous implementation)
@@ -388,7 +411,7 @@ def main():
     # Title with gradient and centered
     st.markdown("""
     <h1 style="text-align: center; 
-               background: linear-gradient(to right, #3498db, #2c3e50);
+               background: linear-gradient(to right, #2196f3, #1976d2);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 3rem;">
@@ -438,15 +461,15 @@ def main():
                         
                         # Custom styled result card
                         st.markdown(f"""
-                        <div class="result-card" style="border-left: 5px solid {SENTIMENT_COLORS.get(sentiment, '#3498db')};">
+                        <div class="result-card" style="border-left: 5px solid {SENTIMENT_COLORS.get(sentiment, '#2196f3')};">
                             <h4 style="margin-bottom: 10px;">
-                                <span style="color: {SENTIMENT_COLORS.get(sentiment, '#3498db')};">
+                                <span style="color: {SENTIMENT_COLORS.get(sentiment, '#2196f3')};">
                                     {clean_aspect}
                                 </span>
                             </h4>
                             <p>
                                 <strong>Sentiment:</strong> 
-                                <span style="color: {SENTIMENT_COLORS.get(sentiment, '#3498db')};">
+                                <span style="color: {SENTIMENT_COLORS.get(sentiment, '#2196f3')};">
                                     {sentiment} {SENTIMENT_EMOJIS.get(sentiment, '')}
                                 </span>
                             </p>