Enhance TalkHeal User Experience with Theme Color Palette Selector and Dark/Light Mode Toggle

TalkHeal.py

@@ -41,16 +41,6 @@
 
 model = configure_gemini()
 
-col_toggle, col_main = st.columns([0.05, 0.95])
-
-with col_toggle:
-    if st.button("☰", key="persistent_sidebar_toggle", help="Toggle Sidebar"):
-        if st.session_state.sidebar_state == "expanded":
-            st.session_state.sidebar_state = "collapsed"
-        else:
-            st.session_state.sidebar_state = "expanded"
-        st.rerun()
-
 render_sidebar()
 
 render_header()

components/chat_interface.py

@@ -1,5 +1,6 @@
 import streamlit as st
 from core.utils import get_current_time, get_ai_response
+from core.theme import toggle_theme, get_current_theme
 
 import streamlit.components.v1 as components
 import streamlit as st

components/header.py

@@ -4,6 +4,24 @@
 
 def render_header():
     with st.container():
+        # Top bar with hamburger menu and theme toggle
+        col1, col2, col3 = st.columns([0.1, 0.8, 0.1])
+
+        with col1:
+            if st.button("☰", key="top_hamburger_menu", help="Toggle Sidebar", use_container_width=True):
+                if st.session_state.sidebar_state == "expanded":
+                    st.session_state.sidebar_state = "collapsed"
+                else:
+                    st.session_state.sidebar_state = "expanded"
+                st.rerun()
+
+        with col3:
+            is_dark = st.session_state.get('dark_mode', False)
+            if st.button("🌙" if is_dark else "☀️", key="top_theme_toggle", help="Toggle Light/Dark Mode", use_container_width=True):
+                st.session_state.dark_mode = not is_dark
+                st.session_state.theme_changed = True
+                st.rerun()
+
         st.markdown("""
         <div class="main-header">
             <h1>TalkHeal</h1>

components/sidebar.py

@@ -2,6 +2,7 @@
 import webbrowser
 from datetime import datetime
 from core.utils import create_new_conversation, get_current_time
+from core.theme import get_current_theme, toggle_theme, set_palette, PALETTES
 
 # Emergency contacts and resources
 emergency_resources = {
@@ -288,6 +289,44 @@ def render_sidebar():
                 for number in numbers:
                     st.markdown(f"• {number}")
 
+        # Theme toggle in sidebar
+        with st.expander("🎨 Theme Settings"):
+            current_theme = get_current_theme()
+            is_dark = current_theme["name"] == "Dark"
+
+            # Palette selector (only for light mode)
+            if not is_dark:
+                palette_names = [p["name"] for p in PALETTES]
+                selected_palette = st.selectbox(
+                    "Choose a soothing color palette:",
+                    palette_names,
+                    index=palette_names.index(st.session_state.get("palette_name", "Light")),
+                    key="palette_selector",
+                )
+                if selected_palette != st.session_state.get("palette_name", "Light"):
+                    set_palette(selected_palette)
+
+            # Current theme display with better styling
+            st.markdown("""
+            <div class="theme-info-box">
+                <strong>Current Theme:</strong><br>
+                <span>{} Mode</span>
+            </div>
+            """.format(current_theme['name']), unsafe_allow_html=True)
+
+            # Theme toggle button with better styling
+            button_text = "🌙 Dark Mode" if not is_dark else "☀️ Light Mode"
+            button_color = "primary" if not is_dark else "secondary"
+
+            if st.button(
+                button_text,
+                key="sidebar_theme_toggle",
+                use_container_width=True,
+                type=button_color
+            ):
+                toggle_theme()
+
+
         with st.expander("ℹ️ About TalkHeal"):
             st.markdown("""
             **TalkHeal** is your compassionate mental health companion, designed to provide:

components/theme_toggle.py

@@ -0,0 +1,68 @@
+import streamlit as st
+from core.theme import toggle_theme, get_current_theme
+
+def render_theme_toggle():
+    """Render the theme toggle button in the top right corner."""
+    current_theme = get_current_theme()
+    is_dark = current_theme["name"] == "Dark"
+
+    # Create a container for the theme toggle
+    with st.container():
+        # Use columns to position the toggle on the right
+        col1, col2, col3 = st.columns([0.7, 0.2, 0.1])
+
+        with col3:
+            # Theme toggle button
+            button_text = "🌙 Dark Mode" if is_dark else "☀️ Light Mode"
+            button_color = "primary" if is_dark else "secondary"
+
+            if st.button(
+                button_text,
+                key="theme_toggle",
+                help="Toggle Light/Dark Mode",
+                use_container_width=True,
+                type=button_color
+            ):
+                toggle_theme()
+
+        # Add some custom CSS to style the toggle button
+        st.markdown("""
+        <style>
+        /* Theme toggle button styling - consistent with sidebar */
+        [data-testid="stButton"] > button[key="theme_toggle"] {
+            background: var(--light-transparent-bg) !important;
+            color: var(--text-primary) !important;
+            border: 1px solid var(--light-transparent-border) !important;
+            border-radius: var(--radius) !important;
+            padding: 12px 16px !important;
+            font-weight: 600 !important;
+            transition: all 0.2s ease !important;
+            font-family: 'Inter', sans-serif !important;
+            box-shadow: 0 2px 8px var(--shadow) !important;
+            backdrop-filter: blur(5px) !important;
+            white-space: nowrap !important;
+            text-overflow: ellipsis !important;
+            overflow: hidden !important;
+            min-height: 44px !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            font-size: 0.9em !important;
+            line-height: 1.2 !important;
+            word-break: keep-all !important;
+        }
+
+        [data-testid="stButton"] > button[key="theme_toggle"]:hover {
+            background: var(--light-transparent-bg-hover) !important;
+            transform: translateY(-1px) !important;
+            box-shadow: 0 4px 12px var(--shadow-lg) !important;
+        }
+
+        /* Ensure button text doesn't wrap */
+        [data-testid="stButton"] > button[key="theme_toggle"] span {
+            white-space: nowrap !important;
+            overflow: hidden !important;
+            text-overflow: ellipsis !important;
+        }
+        </style>
+        """, unsafe_allow_html=True)