Code_editor / styles.py
vsj0702's picture
Updating
9fbd263 verified
raw
history blame
2.57 kB
import streamlit as st
def get_theme_colors(dark_mode: bool) -> dict:
"""Return a color palette based on dark mode preference."""
return {
"BG": "#0f1620" if dark_mode else "#f5f5f5",
"PANEL_BG": "#1c2330" if dark_mode else "#ffffff",
"TEXT": "#e3e8f1" if dark_mode else "#1a1a1a",
"ACCENT": "#ff5252",
"BORDER": "#2a3240" if dark_mode else "#dddddd",
"SHADOW": "rgba(0,0,0,0.3)" if dark_mode else "rgba(0,0,0,0.1)",
"ACE_THEME": "monokai" if dark_mode else "chrome",
}
def inject_global_css(colors: dict) -> None:
"""Inject global styling overrides into the Streamlit app based on theme colors."""
st.markdown(f"""
<style>
.stApp {{
background-color: {colors["BG"]};
color: {colors["TEXT"]};
}}
[data-testid="stSidebar"] {{
background-color: {colors["PANEL_BG"]} !important;
}}
.ace_editor, .ace_scroller {{
background: {colors["PANEL_BG"]} !important;
box-shadow: 0 4px 8px {colors["SHADOW"]} !important;
border-radius: 8px !important;
}}
textarea, input, .stTextArea textarea {{
background: {colors["PANEL_BG"]} !important;
color: {colors["TEXT"]} !important;
border: 1px solid {colors["BORDER"]} !important;
border-radius: 4px !important;
}}
button, .stDownloadButton > button {{
background-color: {colors["ACCENT"]} !important;
color: #fff !important;
border-radius: 6px !important;
transition: transform 0.1s;
}}
button:hover {{
transform: scale(1.02) !important;
}}
.chat-container {{
background: {colors["PANEL_BG"]} !important;
border: 1px solid {colors["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: {colors["TEXT"]} !important;
}}
</style>
""", unsafe_allow_html=True)