splitting style and layout

app.py

@@ -1,95 +1,39 @@
 import streamlit as st
 import streamlit_ace as st_ace
-from utils import execute_code, export_session
+from utils import execute_code
 from chatbot import render_chatbot
-import json
+from styles import get_theme_colors, inject_global_css
+from layout import init_session_state
 
-# 1️⃣ Page configuration
-st.set_page_config(
-    page_title="Pro Code Playground",
-    page_icon="💻",
-    layout="wide"
-)
+# Page configuration
+st.set_page_config(page_title="Pro Code Playground", page_icon="💻", layout="wide")
 
-# 2️⃣ Dark mode toggle
-if 'dark_mode' not in st.session_state:
-    st.session_state.dark_mode = False  # Default is light mode
+# Session init
+init_session_state()
 
+# Dark mode toggle
 dm = st.checkbox("🌙 Dark mode", value=st.session_state.dark_mode)
 st.session_state.dark_mode = dm
 
-# 3️⃣ Theme settings
-BG = "#0f1620" if dm else "#f5f5f5"
-PANEL_BG = "#1c2330" if dm else "#ffffff"
-TEXT = "#e3e8f1" if dm else "#1a1a1a"
-ACCENT = "#ff5252"
-BORDER = "#2a3240" if dm else "#dddddd"
-SHADOW = "rgba(0,0,0,0.3)" if dm else "rgba(0,0,0,0.1)"
-ACE_THEME = "monokai" if dm else "chrome"
+# Theme + CSS injection
+colors = get_theme_colors(dm)
+inject_global_css(colors)
 
-# 4️⃣ CSS
-st.markdown(f"""
-<style>
-  .stApp {{ background-color: {BG}; color: {TEXT}; }}
-  [data-testid="stSidebar"] {{ background-color: {PANEL_BG} !important; }}
-  .ace_editor, .ace_scroller {{
-      background: {PANEL_BG} !important;
-      box-shadow: 0 4px 8px {SHADOW} !important;
-      border-radius: 8px !important;
-  }}
-  textarea, input, .stTextArea textarea {{
-      background: {PANEL_BG} !important;
-      color: {TEXT} !important;
-      border: 1px solid {BORDER} !important;
-      border-radius: 4px !important;
-  }}
-  button, .stDownloadButton > button {{
-      background-color: {ACCENT} !important;
-      color: #fff !important;
-      border-radius: 6px !important;
-      transition: transform 0.1s;
-  }}
-  button:hover {{ transform: scale(1.02) !important; }}
-  .chat-container {{
-      background: {PANEL_BG} !important;
-      border: 1px solid {BORDER} !important;
-      border-radius: 8px !important;
-      padding: 1rem;
-      max-height: 480px;
-      overflow-y: auto;
-  }}
-  .chat-message {{ margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 12px; }}
-  .user-message {{ background: rgba(100,149,237,0.2); align-self: flex-end; }}
-  .bot-message {{ background: rgba(200,200,200,0.2); align-self: flex-start; }}
-  pre code {{ display: block; padding: 0.5rem; background: rgba(0,0,0,0.1); border-radius: 4px; overflow-x: auto; }}
-  label[data-testid="stMarkdownContainer"] > div > div {{
-      color: {TEXT} !important;
-  }}
-</style>
-""", unsafe_allow_html=True)
-
-# 5️⃣ Session state initialization
-if 'code' not in st.session_state:
-    st.session_state.code = ""
-
-if 'stdin' not in st.session_state:
-    st.session_state.stdin = ""
-
-# 6️⃣ App header
+# Header
 st.title("Pro Code Playground")
 st.markdown("Write, execute & export Python snippets, with built‑in AI assistance.")
 
-# 7️⃣ Layout
-gen, bot = st.columns((2,1), gap="large")
+# Layout
+gen, bot = st.columns((2, 1), gap="large")
 
 with gen:
     st.subheader("Editor")
-
+    
     code = st_ace.st_ace(
         value=st.session_state.code,
         placeholder="Start typing your Python code…",
         language="python",
-        theme=ACE_THEME,
+        theme=colors["ACE_THEME"],
         keybinding="vscode",
         font_size=14,
         min_lines=20,
@@ -102,7 +46,7 @@ with gen:
         st.session_state.code = code
 
     user_input = st.text_area(
-        "📥 Input (stdin)", 
+        "📥 Input (stdin)",
         value=st.session_state.stdin,
         placeholder="Enter input() values here, one per line",
         height=100,
@@ -130,9 +74,9 @@ with bot:
         st.session_state.get("error_output", "")
     )
 
-# 8️⃣ Footer
+# Footer
 st.markdown(f"""
-<div style='text-align:center; margin-top:1rem; color:{TEXT}66;'>
+<div style='text-align:center; margin-top:1rem; color:{colors["TEXT"]}66;'>
   Built with ❤️ & Streamlit by Vaibhav
 </div>
 """, unsafe_allow_html=True)