How to change the backgorund color of button widget

Using Streamlit
1

I like to know how I can change the background color of the Streamlit button widget.
In this Github issue (Change Background color of Button widget · Issue #406 · streamlit/streamlit · GitHub), it’s being told to use markdown. But I didn’t understand it. Can anyone kindly elaborate on how I can do it?
For example:

if st.button('Click here') is True:
       st.write('Great')

By default, the button border is highlighted when I hover over it. But I want to fill the button background with the custom primaryColor of the Streamlit theme.

2

HI @rafisics,

The st.markdown hack is described in this thread.

Note that this could easily break in future releases of streamlit.

1 Like
How to change the color of the st.download button
3

@rafisics
you can use this code and give more setting:

import streamlit as st
st.markdown(""" div.stButton > button:first-child {
background-color: #00cc00;color:white;font-size:20px;height:3em;width:30em;border-radius:10px 10px 10px 10px;
}
“”", unsafe_allow_html=True)

if st.button(“the notice you want to show”):
st.write(“content you want to show”)

1 Like
4

I like to set up the button’s background color in such a way that it changes automatically according to the change in the theme color.

For example, I have set up theme color in config.toml as:

[theme]
primaryColor="#FF7903"
backgroundColor="#0E1117"
secondaryBackgroundColor="#31333F"
textColor="#FAFAFA"
font="sans serif"

Now is it possible to call the primaryColor in the st.markdown of the button automatically so that whenever I change the color code in the theme, the button color will change too? In that case, what should I write in the code?

5

you can define the color of button’s background-color before be clicked and after be clicked:
just add this css code to my previous code:

.css-2trqyj:focus:not(:active) {
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}
.css-2trqyj:focus:(:active) {
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}
.css-2trqyj:focus:active){
background-color: #0066cc;
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}

2 Likes
6

Like this following?

import streamlit as st
st.markdown(""" 
div.stButton > button:first-child {
background-color: #00cc00;color:white;font-size:20px;height:3em;width:30em;border-radius:10px 10px 10px 10px;
}
.css-2trqyj:focus:not(:active) {
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}
.css-2trqyj:focus:(:active) {
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}
.css-2trqyj:focus:active){
background-color: #0066cc;
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}
""", unsafe_allow_html=True)
7

yes, change the color number as your plan and run program in browser to see the result.

1 Like
8

Yes, in that way, I can customize everything manually in my .py file. But what I wanted is to connect/call the color codes that are set in my config.toml file.

9

Please wait for the answer of professional support team in community.

1 Like
10

This looks like an automatically generated classname. This will probably break quite fast.

The css selector div.stButton > button:first-child is a bit more robust as the class name stButton is set in the react code. This is of course not a garantee that it won’t break in new streamlit releases as it’s a hack to change the color of a bottom.

You can read the config.toml file with toml python package and insert the color codes into the css string you enter in the markdown object.

1 Like
11

This is what I have come up with:

import streamlit as st
import toml
primaryColor = toml.load(".streamlit/config.toml")['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)

Is there any better/effective way to do it?

12

Looks good to me :+1:

13

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
14

@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
15

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

1 Like
16

Hey @rafisics,

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

1 Like
17

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

18

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
19

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!

20

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.