Remove background image and apply a new clean theme

.streamlit/config.toml

@@ -1,18 +1,17 @@
 # .streamlit/config.toml
 
 [theme]
-# The primary color for interactive elements
-primaryColor = "#FF4B4B"  # A bright coral red
+# A professional blue for interactive elements
+primaryColor="#0068C9"
 
-# The background color for the main content area
-backgroundColor = "#FFFFFF" # White
+# A very light grey for the main background
+backgroundColor="#F0F2F6"
 
-# The background color for the sidebar and other secondary areas
-secondaryBackgroundColor = "#F0F2F6" # A light grey
+# A clean white for the sidebar and other elements
+secondaryBackgroundColor="#FFFFFF"
 
-# The color of the text
-textColor = "#31333F"
+# Dark text for high contrast and readability
+textColor="#0D1117"
 
-# The font family for the app
-# Can be "sans serif", "serif", or "monospace"
-font = "sans serif"
+# Standard font
+font="sans serif"

app.py

@@ -10,27 +10,6 @@ st.set_page_config(page_title="AI Constitution Bot", page_icon="🇮🇳", layou
 # --- SETUP ---
 load_dotenv()
 
-# --- BACKGROUND IMAGE FUNCTION ---
-def add_bg_from_local(image_file):
-    try:
-        with open(image_file, "rb") as image_file:
-            encoded_string = base64.b64encode(image_file.read()).decode()
-        st.markdown(
-            f"""
-            <style>
-            .stApp {{
-                background-image: url(data:image/{"png"};base64,{encoded_string});
-                background-size: cover;
-            }}
-            </style>
-            """,
-            unsafe_allow_html=True
-        )
-    except FileNotFoundError:
-        st.warning("Background image not found. Make sure 'background.png' is in the same folder as the app.")
-
-add_bg_from_local('background.png')
-
 # --- STYLING ---
 def local_css(file_name):
     try:

style.css

@@ -5,51 +5,23 @@ body {
     font-family: 'Poppins', sans-serif;
 }
 
-/* --- FROSTED GLASS EFFECT FOR MAIN CONTENT --- */
-[data-testid="stAppViewBlockContainer"] {
-    /* The magic: blur the background behind this element */
-    backdrop-filter: blur(10px) !important;
-
-    /* A semi-transparent white background */
-    background-color: rgba(255, 255, 255, 0.85) !important;
-
-    /* Add a subtle border and shadow for depth */
-    border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.18);
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-    
-    /* Add some padding */
-    padding: 2rem;
-}
-
-/* --- FROSTED GLASS EFFECT FOR SIDEBAR --- */
-[data-testid="stSidebar"] {
-    backdrop-filter: blur(10px);
-    background-color: rgba(248, 249, 250, 0.9); /* Semi-transparent light grey */
-    border-right: 1px solid rgba(255, 255, 255, 0.18);
-}
-
-
 /* --- BUTTONS --- */
 .stButton > button {
     border-radius: 8px;
     font-weight: 600;
     color: white;
-    background-image: linear-gradient(to right, #3b82f6, #6366f1);
+    background-color: #0068C9; /* Using the primaryColor from the theme */
     border: none;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     width: 100%;
     padding: 0.6rem 1rem;
 }
 
 .stButton > button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
-}
-
-.stButton > button:active {
-    transform: translateY(1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    background-color: #0055A4; /* A slightly darker blue on hover */
 }
 
 
@@ -58,13 +30,18 @@ body {
     border-radius: 0.75rem;
     padding: 1rem;
     margin: 0.5rem 0;
-    box-shadow: none; /* Removing shadow as the background is now distinct */
+    border: 1px solid #e1e4e8; /* Add a subtle border */
 }
 
 [data-testid="chat-message-container"]:has(div[data-testid="stChatMessageContent-user"]) {
-    background-color: #eff6ff; /* blue-50 */
+    background-color: #FFFFFF; /* White */
 }
 
 [data-testid="chat-message-container"]:has(div[data-testid="stChatMessageContent-assistant"]) {
-    background-color: #f0fdf4; /* green-50 */
+    background-color: #F6F8FA; /* Off-white */
+}
+
+/* --- SIDEBAR --- */
+[data-testid="stSidebar"] {
+    border-right: 1px solid #d1d5db;
 }