Change backgroud

Using Streamlit
1

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?

1 Like
2

Hi @Prakash -

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

1 Like
3

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 with replacing the color gradient with url(" ") to import an image from the local folder but it didn’t do anything the sidebar became white again.

4

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>
    """,
    unsafe_allow_html=True
)

Hope it helps!

1 Like
5

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 2020-09-22 14-39-021365×454 6.65 KB
Screenshot from 2020-09-22 14-37-43

here both the “bg.jpg” and “download.jpeg” are in same folder with app.py file

6

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 as st
import base64

main_bg = "sample.jpg"
main_bg_ext = "jpg"

side_bg = "sample.jpg"
side_bg_ext = "jpg"

st.markdown(
    f"""
    <style>
    .reportview-container {{
        background: url(data:image/{main_bg_ext};base64,{base64.b64encode(open(main_bg, "rb").read()).decode()})
    }}
   .sidebar .sidebar-content {{
        background: url(data:image/{side_bg_ext};base64,{base64.b64encode(open(side_bg, "rb").read()).decode()})
    }}
    </style>
    """,
    unsafe_allow_html=True
)
4 Likes
7

Thank You @ash2shukla it worked :blush:

1 Like
8

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);"

st.markdown("""
<style>
body {
  background: #ff0099; 
  background: -webkit-linear-gradient(to right, #ff0099, #493240); 
  background: linear-gradient(to right, #ff0099, #493240); 
}
</style>
    """, unsafe_allow_html=True)

i tried this but it don’t worked 
 any advice ? thks :wink:

9

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, you would need to figure out what the new selectors would be. As a longer-term, more permanent solution, we’re working on releasing themeing in Streamlit, which will allow users to customize things in a safer way via Python.

Best,
Randy

3 Likes
10

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

11

Thanks @ash2shukla :slight_smile:

12

thanks ! it worked ! Do you know how to also automatically resize the image for every browser? so that there are not duplicated images to fulfill the screen


13

Hello @randyzwitch and everyone who may know answer,

How can I change the font color when theme is changed from settings.

Scenario am looking to have blue color instead of white when dark mode mode is selected and green when light theme is selected.

TIA

14

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