Adding dark mode on entire application

app.py

@@ -1,22 +1,76 @@
 import streamlit as st
+import streamlit_ace as st_ace
+from utils import execute_code, export_session
+from chatbot import render_chatbot
+import json
 
-# ——————————————————————————————————————————————
-# 1️⃣ PAGE CONFIG (MUST BE FIRST)
+# —————————————————————————————————————————————————————————————
+# 1️⃣ PAGE CONFIG (MUST be the first Streamlit call)
 st.set_page_config(
     page_title="Interactive Code Editor with AI Assistant",
     page_icon="💻",
     layout="wide"
 )
-# ——————————————————————————————————————————————
+# —————————————————————————————————————————————————————————————
 
 # 2️⃣ THEME SELECTOR
-theme = st.sidebar.selectbox("🎨 Editor Theme", ["Light", "Dark"])
-ace_theme = "chrome" if theme == "Light" else "monokai"
+theme = st.sidebar.selectbox("🎨 App Theme", ["Light", "Dark"])
+is_dark = (theme == "Dark")
+
+# 3️⃣ MAP TO ACE EDITOR THEME
+ace_theme = "monokai" if is_dark else "chrome"
+
+# 4️⃣ DEFINE COLORS FOR GLOBAL CSS
+bg_color       = "#1e1e1e" if is_dark else "#ffffff"
+text_color     = "#e5e5e5" if is_dark else "#000000"
+sidebar_bg     = "#252526" if is_dark else "#f0f2f6"
+button_bg      = "#3a3d41" if is_dark else "#e7eaf0"
+chat_bg        = "#2e2e2e" if is_dark else "#f9f9f9"
+border_color   = "#444444" if is_dark else "#dddddd"
+user_bg        = "#3d5a80" if is_dark else "#e3f2fd"
+bot_bg         = "#555555" if is_dark else "#f5f5f5"
+
+# 5️⃣ INJECT GLOBAL CSS
+st.markdown(f"""
+    <style>
+    /* Main app background and text */
+    .stApp {{
+        background-color: {bg_color};
+        color: {text_color};
+    }}
+    /* Sidebar styling */
+    .css-1d391kg .css-1d391kg {{  /* wrapper class Streamlit uses for sidebar */
+      background-color: {sidebar_bg} !important;
+      color: {text_color};
+    }}
+    /* Buttons */
+    .stButton>button {{
+        background-color: {button_bg} !important;
+        color: {text_color} !important;
+    }}
+    /* Chat container and messages */
+    .chat-container {{
+        background-color: {chat_bg} !important;
+        color: {text_color} !important;
+        border: 1px solid {border_color} !important;
+    }}
+    .user-message {{
+        background-color: {user_bg} !important;
+        color: {text_color} !important;
+    }}
+    .bot-message {{
+        background-color: {bot_bg} !important;
+        color: {text_color} !important;
+    }}
+    /* Text area output box */
+    textarea {{
+        background-color: {chat_bg} !important;
+        color: {text_color} !important;
+    }}
+    </style>
+""", unsafe_allow_html=True)
 
-import streamlit_ace as st_ace
-from utils import execute_code, export_session
-from chatbot import render_chatbot
-import json
+# —————————————————————————————————————————————————————————————
 
 # Initialize session state
 if 'code_output' not in st.session_state:
@@ -40,7 +94,7 @@ with col1:
     code = st_ace.st_ace(
         placeholder="Write your Python code here...",
         language="python",
-        theme=ace_theme,        # ← use the selected theme
+        theme=ace_theme,        # ← use the selected ACE theme
         keybinding="vscode",
         font_size=14,
         min_lines=25,
@@ -99,6 +153,6 @@ with col2_export:
 # Footer
 st.markdown("""
 <div style='text-align: center'>
-    <p>Built with Streamlit ❤️</p>
+    <p>Built with Streamlit By Vibhav with ❤️</p>
 </div>
 """, unsafe_allow_html=True)