How to change the backgorund color of button widget

Looks good to me :+1:

Hey @rafisics,

If your looking to access the colours from your config file in your Streamlit app code you can easily do this with st.get_option

In fact, I actually cover this in the Theming tutorial on Youtube (checkout 5:32 for the exact time on when I go over this):

2 Likes

@Marisa_Smith Thanks a lot.
I have accessed and used the config color in the following way now:

import streamlit as st
primaryColor = st.get_option("theme.primaryColor")
s = f"""
<style>
div.stButton > button:first-child {{ border: 5px solid {primaryColor}; border-radius:20px 20px 20px 20px; }}
<style>
"""
st.markdown(s, unsafe_allow_html=True)

Does there exist any better way to use the colors except using string formatting?

1 Like

I can not open the video url, do we have a text intruction for this, thank you.

1 Like

Hey @rafisics,

No that is currently the best way to have full control over the button appearance and behaviour.

1 Like

Hey,

Yes here is the code I used in the tutorial:

primary_clr = st.get_option("theme.primaryColor")
txt_clr = st.get_option("theme.textColor")

Also, not sure why the YouTube link isn’t playing for you, but here are direct links to the theming tutorial and our general YouTube channel.

We are trying to create a repository of videos that would be helpful to the community, so if you have any suggestions please add them to this thread:

Happy Streamlit-ing
Marisa

Hi, I got the reason, because youtube website can not be access when I am in China.
Will we have text instruction on own streamlit website?
thank you.

1 Like

Hey @BeyondMyself,

Yes, we will be putting the YouTube tutorials on our website (we are in the process of redesigning and adding more content to the docs!).

If we embed the videos on our website as well, would you be able to see them then?

Also, I update the forum post (the one linked above) with the new short each time one comes out, it has the code there that you can copy-paste and try yourself!

I can look the video when the media file is locating on streamlit server machine; if the video is just a link to youtube, I will can not look it.
Maybe you can download the video from youtube and upload it to streamlit website if it is possible.

Hi @Marisa_Smith

Is it possible to set the color options in the app.py file?

You mentioned:
primary_clr = st.get_option(“theme.primaryColor”)

Is this a way to retrieve the settings from the config.toml file or is it possible to do it without the config.toml file?

I entered the code in my app however, your example doesn’t explain how to change the color using st.get_option without changing the config.toml file.

One other question; is there a way to change the color of st.success? It doesn’t work with my colors.

Thanks!

Hey @chefnewman,

No, it’s not possible to set the colours from the app.py file, just access them with the st.get_option function. To change the colour you can directly try out colour options in the config.toml file or you can use the more convenient (in my opinion) UI from the hamburger menu to dynamically try different colour options until you find one you like!

You can use the UI by going to the hamburger menu in the top right corner → settings and then clicking the edit active theme button!

Happy Streamlit-ing
Marisa

Thanks for confirming, that’s what I thought.

1 Like

you can change the button background color and text color like this:

import streamlit as st
m = st.markdown("""
<style>
div.stButton > button:first-child {
    background-color: #0099ff;
    color:#ffffff;
}
div.stButton > button:hover {
    background-color: #00ff00;
    color:#ff0000;
    }
</style>""", unsafe_allow_html=True)

b = st.button("点我开始运行程序")

before click:
image
hover effect:
image

2 Likes

BeyondMyself’s answer helps me much, but I elaborated it to make INDIVIDUAL buttons coloured differently.

    st.markdown("""<style>
    
    div:nth-child(7) > [class^="css-"] > div:nth-child(1) > div > div > div > button {
        background-color: #DD3300;
        color:#eeffee;
        border-radius: 0.75rem;
        }

    div[id^="bui-"] > button:nth-child(1) {
    background-color: #33DD00;
    color: #EEFFFF;
    }
    </style>""", unsafe_allow_html=True)

image

the most challenging part is to identify the individual CSS selectors of buttons.
You may get them by “Inspect” and then copy “CSS selector” with a browser’s developer mode. You will get something like:
.css-1qipfyj > div:nth-child(1) > button:nth-child(1)
this part 1qipfyj is random session to session, so you will need to use regex to replace this part with a match formula.
Also worth using the parent of the class as an additional separation tool.
Then, it will work reliably.

Worked without hussles, thanks :+1:t5:

Just an observation and not a criticism of the solution because I use it here in my tests too!

One of the things I mentioned in another post is that this is not very cool to do, because if Streamlit decides to refactor your classes by renaming them, what will happen is a general crash in the users’ apps.

That’s why I think that Streamlit should always allow this to be done by a proprietary function, because that’s the only way it will guarantee a good operation.

Here’s the tip!

Yes, you absolutely right. Even when new elements appear on the screen, the injected selector will stop working (as the path changes or the classes’ sequence is shifted).
So the better way would be adding a streamlit widget key as “a class” to element classes — in such case, using individual style becomes possible.
———
I would suggest adding a style property to the element arguments:

st.button(label="My button", style="background-color: #DD3300; color:#eeffee; border-radius: 0.75rem;")

And the streamlit would append it to something like custom.css

2 Likes

I agree, it’s an alternative that I think is valid.

Maybe Streamlit could use a NAME or ID field for all elements, giving a little more flexibility, being able to use a type method:

st.css( name, my_custom_css )

so that you can set the css at any time through some conditional

Hello!! Needing help in generating the regex!!

do you have an example of the full path to your button?