Hi, I am new to streamlit and wanted to know that Is there any way to change the background of the streamlit app and add some custom colors or images to the background?

You can easily change the background color via theming nowadays. Just add the following text to your config file (in .streamlit/config.toml) to e.g. make the background orange: [theme] backgroundColor="#FFA421" There are also more options, see our theming docs

Hi @Prakash - If you’d like to change elements of the Streamlit theme, you can do the following: [image] Amend Streamlit's default colourway like on the spacy-streamlit App? Using Streamlit I did something like this the other day and it worked: st.markdown( """ <st…

Hi @randyzwitch !- Thank you for the solution. I tried your code and managed to change the sidebar color but couldn’t figure it out how to change the main screen theme and more specifically I want to add an image in the background . I also tried to edit the background-image tag in the sidebar CSS w…

Hi @Prakash , You can try doing this to change background of main content and sidebar, st.markdown( """ <style> .reportview-container { background: url("url_goes_here") } .sidebar .sidebar-content { background: url("url_goes_here") } </style> """, …

Hi @ash2shukla ! , Thank you for looking into it i tried your code as well but still don’t know where i am doing the things wrong. there is a little colored strip showing at the top but no image neither in the side bar nor in the main content [Screenshot from 2020-09-22 14-39-02] [Screenshot from 2…

Try putting a URL and it will work, Its not working because the client browser is unable to retrieve the image from your server as the server is not hosting static ( your images ) at root “/”. One workaround to this is to use base64 encoding of your images. Something like this- import streamlit a…

Thank You @ash2shukla it worked :blush:

hello , i would like to use elaborate css but it seems that only background-color worked . Let imagine i want to add this style to my background background: #ff0099; background: -webkit-linear-gradient(to right, #ff0099, #493240); background: linear-gradient(to right, #ff0099, #493240);" …

Hi @jeremy_ganem , welcome to the Streamlit community! This type of “hack” is pretty brittle, since it relies on the internal CSS selectors. Since this post was answered, we’ve been refactoring the Streamlit codebase, so it appears that the CSS selectors have changed. To fix this in the near-term, …

Using Night Eye plugin in Safari gave me a pretty good dark mode.

Thanks @ash2shukla :slight_smile:

Change backgroud

Using Streamlit

randyzwitch September 21, 2020, 12:54pm 2

Hi @Prakash -

If you’d like to change elements of the Streamlit theme, you can do the following:

Topic		Replies	Views
Change the Background color and text Using Streamlit layout	1	10252	October 31, 2019
How to set the background color of st.sidebar Using Streamlit	13	26767	May 17, 2024
Background-color Using Streamlit css	3	7256	June 3, 2020
How to set the backgroud for a streamlit web program? Using Streamlit windows	4	1877	February 2, 2021
How to change the background color of my Streamlit app? Using Streamlit	5	13667	July 20, 2023

Change backgroud

Related topics