💬 How to configure themes in Streamlit

In Streamlit, there is no direct configuration option to change the background color of the entire page. Streamlit's theming capabilities are currently limited to light and dark modes, which can be configured via the config.toml file or the app's settings. However, you cannot directly set a custom background color using configurations alone.

That said, you can combine configuration settings with custom CSS to achieve a more personalized look. Here's how:

---

1. Use config.toml to Set Light/Dark Mode

You can create a config.toml file in a .streamlit folder to set the default theme (light or dark). While this doesn't directly change the background color, it sets the overall theme.

Steps:

1. Create a .streamlit folder in your project directory.
2. Inside the folder, create a config.toml file with the following content:

[theme]
primaryColor = "#ff4b4b"
backgroundColor = "#f0f2f6"  # This only affects some components, not the entire page
secondaryBackgroundColor = "#ffffff"
textColor = "#31333f"
font = "sans serif"

1. Run your Streamlit app. The backgroundColor setting will affect some components, but not the entire page.

---

2. Inject Custom CSS for Full Background Color

Since the config.toml file doesn't allow you to change the entire page's background color, you can use custom CSS (as shown earlier) to achieve this.

Example:

import streamlit as st

# Inject custom CSS to change the background color
st.markdown(
    """
    <style>
    .stApp {
        background-color: #f0f2f6;  /* Replace with your desired color */
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Your app content
st.title("My ChatGPT 🤖")
st.write("Welcome to My app!")

---

3. Combine Both Approaches

You can use the config.toml file to set the theme and then use custom CSS to override the background color for the entire page.

Example config.toml:

[theme]
primaryColor = "#ff4b4b"
backgroundColor = "#ffffff"  # Affects some components
secondaryBackgroundColor = "#f0f2f6"
textColor = "#31333f"
font = "sans serif"

Streamlit App Code:

import streamlit as st

# Custom CSS to override the background color
st.markdown(
    """
    <style>
    .stApp {
        background-color: #e6f7ff;  /* Light blue background */
    }
    </style>
    """,
    unsafe_allow_html=True
)

# App content
st.title("My ChatGPT 🤖")
st.write("Welcome to the My ChatGPT app!")

---

Limitations:

• Streamlit's theming is still evolving, and full customization of the background color is not natively supported via configurations.
• Custom CSS is the most flexible way to achieve this, but it requires careful handling to avoid breaking the app's layout.