Problem of text fill color when using custom theme

Using Streamlit
1

Hello! I’m trying out the new theme function with different colors. However I notice that when I use colors other than the examples (the green one or the blue one in the blog post), the background color of the text for my radio button selection always goes with the primary color. Is there a way to fix this problem?
Screen Shot 2021-03-23 at 1.49.12 PM

The example theme doesn’t have this problem:
Screen Shot 2021-03-23 at 1.51.22 PM

Thanks a lot!!

2

Hey @kfh,

First welcome to the Streamlit community!! :partying_face: :tada: :star2: :tada: :partying_face: :tada: :star2:

To make sure I understand correctly:

  • You copied the code from the examples
  • When you change the colours, the background on the selected radio button is not the secondaryBackgroundColor but the same color as the backgroundColor
    • does this happen when your using the UI or when you are changing the colours in the config.toml file or both?

Can you tell me your:

  • python version
  • environment (pip / conda)
  • operating system
  • browser

Once I know these I can pass this on to the team!

Thanks,
Marisa

3

Hello Marisa, thank you very much! Yes exactly. When I copied the code from the examples they look fine. But whenever I make a change (even just one) on one of the four colors, I would see a background color for the selected radio button text different from the sidebar background color (with more experiments, I found out that text background color may not be the same as the main background color; sometimes it’s just a lighter or darker shade). And this happens both when I change it from UI and from the config.toml file.
I’m using python 3.8.5 and pip on macOS big sur (11.0.1). Browser is Chrome.
Thanks again!

4

Hey @kfh,

Sorry for my slow reply, I just wanted to let you know I have sent this on to the core team and we will see what they dig up!

Thanks,
Marisa

5

@kfh: The primaryColor dictates the color of the radio button while the textColor dictates the color of the text next to the radio button. So in the official example, we have

[theme]
primaryColor = "#E694FF"
backgroundColor = "#00172B"
secondaryBackgroundColor = "#0083B8"
textColor = "#DCDCDC"
font = "sans-serif"

In the official app, the primaryColor = "#E694FF" is different from the textColor = "#DCDCDC".

So that we can try to reproduce your issue, can you share what’s in the [theme] section of your .streamlit/config.toml file?

1 Like
6

@abhi Thank you for the reply. My problem is when I select the radio button, the selected text would have a different color background (there’s no problem with textColor itself). Here is my config file:

[theme]
primaryColor="#827A98"
backgroundColor="#C0DAD9"
secondaryBackgroundColor="#7EBABF"
textColor="#4b496f"
font=“sans serif”

Thank you very much!