bluebeandatachatbot / src /css_input.py
krinya's picture
Refactor CSS handling: Move CSS styles to a separate file and update Streamlit app to use the new CSS variable
ffd8374
Raw
History Blame Contribute Delete
3.61 kB
# css_input.py
# Contains the CSS for the Streamlit app as a string
STREAMLIT_CSS = '''
<style>
/* Force light theme - completely override dark mode */
html, body, .stApp, [data-testid="stAppViewContainer"] {
background-color: #ffffff !important;
color: #262730 !important;
color-scheme: light !important;
}
@media (prefers-color-scheme: dark) {
html, body, .stApp, [data-testid="stAppViewContainer"] {
background-color: #ffffff !important;
color: #262730 !important;
}
}
* {
color-scheme: light !important;
}
:root {
--primary-color: #1976d2 !important;
--background-color: #ffffff !important;
--secondary-background-color: #f0f2f6 !important;
--text-color: #262730 !important;
color-scheme: light !important;
}
.stApp *, .stApp {
color: #262730 !important;
}
section[data-testid="stSidebar"], .css-1d391kg {
background-color: #f0f2f6 !important;
color: #262730 !important;
}
.main .block-container {
background-color: #ffffff !important;
color: #262730 !important;
}
/* Blue theme for Streamlit with dark mode compatibility */
.stApp {
background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%) !important;
color: #262730 !important;
}
.main-header {
text-align: center;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
border-bottom: 2px solid #1976d2;
margin-bottom: 1rem;
background: linear-gradient(135deg, #2196f3, #1976d2) !important;
color: white !important;
border-radius: 8px;
margin: -0.5rem -0.5rem 1rem -0.5rem;
}
.main-header h1, .main-header p {
color: white !important;
}
.chat-container {
max-height: 500px;
overflow-y: auto;
padding: 1rem;
border-radius: 10px;
background-color: #f9f9f9 !important;
border: 1px solid #e3f2fd;
}
.stChatMessage {
border-radius: 10px;
margin-bottom: 1rem;
color: #262730 !important;
}
.stChatMessage[data-testid="chat-message-user"] {
background-color: #e3f2fd !important;
border: 1px solid #2196f3;
color: #262730 !important;
}
.stChatMessage[data-testid="chat-message-assistant"] {
background-color: #ffffff !important;
border: 1px solid #1976d2;
color: #262730 !important;
}
.stChatMessage * {
color: #262730 !important;
}
.stButton > button {
background-color: #1976d2 !important;
color: white !important;
border: none;
border-radius: 5px;
transition: all 0.3s;
}
.stButton > button:hover {
background-color: #1565c0 !important;
color: white !important;
}
.css-1d391kg, [data-testid="stSidebar"] {
background-color: #e3f2fd !important;
}
.css-1d391kg *, [data-testid="stSidebar"] * {
color: #262730 !important;
}
.stSuccess {
background-color: #e8f5e8 !important;
border: 1px solid #4caf50;
border-radius: 5px;
color: #2e7d32 !important;
}
.stTextInput input, .stChatInput input {
background-color: white !important;
color: #262730 !important;
border: 1px solid #1976d2;
}
@media (prefers-color-scheme: dark) {
.stApp, .stApp * {
color: #262730 !important;
}
.stChatMessage * {
color: #262730 !important;
}
}
</style>
'''