Amend Streamlit's default colourway like on the spacy-streamlit App?

Using Streamlit
#1

Hi guys,

Is there an easy way to amend Streamlit’s default pink colourway via CSS like on the (amazing!) spacy-streamlit App?

image
image2448×1780 453 KB

I’ve tried various things yet no success thus far, so I thought I may just raise the question here! :slight_smile:

Thanks,
Charly

#2

You can just rely on what spacy-streamlit do to override the theme. By looking at the source code, it’s being done with:

def get_color_styles(color: str) -> str:
    """Compile some hacky CSS to override the theme color."""
    # fmt: off
    color_selectors = ["a", "a:hover", "*:not(textarea).st-ex:hover", ".st-en:hover"]
    bg_selectors = [".st-da", "*:not(button).st-en:hover"]
    border_selectors = [".st-ft", ".st-fs", ".st-fr", ".st-fq", ".st-ex:hover", ".st-en:hover"]
    # fmt: on
    css_root = "#root { --primary: %s }" % color
    css_color = ", ".join(color_selectors) + "{ color: %s !important }" % color
    css_bg = ", ".join(bg_selectors) + "{ background-color: %s !important }" % color
    css_border = ", ".join(border_selectors) + "{ border-color: %s !important }" % color
    other = ".decoration { background: %s !important }" % color
    return f"<style>{css_root}{css_color}{css_bg}{css_border}{other}</style>"


st.write(get_color_styles("#09A3D5"), unsafe_allow_html=True)
1 Like
#3

Thanks Synode.

Yes, I’ve seen the above function in spacy-streamlit, yet couldn’t find a way to override the default pink colour…

I’ll keep digging :slight_smile:

Charly

#4

The above snippet doesn’t override it as you expect?

EDIT: Hmm, indeed, it doesn’t work very well…

1 Like
#5

Hehe, I can’t make it work either :slight_smile:

EDIT - @randyzwitch @andfanilo, is there anything obvious that we’re missing to override Streamlit’s default colours?

Thanks,
Charly

#6

I did something like this the other day and it worked:


st.markdown(
    """
<style>
.reportview-container .markdown-text-container {
    font-family: monospace;
}
.sidebar .sidebar-content {
    background-image: linear-gradient(#2e7bcf,#2e7bcf);
    color: white;
}
.Widget>label {
    color: white;
    font-family: monospace;
}
[class^="st-b"]  {
    color: white;
    font-family: monospace;
}
.st-bb {
    background-color: transparent;
}
.st-at {
    background-color: #0c0080;
}
footer {
    font-family: monospace;
}
.reportview-container .main footer, .reportview-container .main footer a {
    color: #0c0080;
}
header .decoration {
    background-image: none;
}

</style>
""",
    unsafe_allow_html=True,
)

So much of it is just fooling around with Chrome DevTools or whatever other browsers provide, trying to find the right CSS selectors

2 Likes
Change backgroud
How can I enable Google Adsense inside streamlit
Removing Build-with Spacy-Streamlit
Radio button with more padding between the options
Table column in bold
Sidebar minor design is little off
#7

That works, fantastic hack Randy!

I’m wondering: is there a way to find what are the default CSS settings in Streamlit?

Charly

1 Like
#8

Well…your two best bets are :

  • studying Streamlit source code, which heavily uses Styletron for component styling so a lot of CSS attributes are going to be generated on the fly and impossible to select in a generic way,
  • or just figuring out the fixed CSS selector and applied settings to the element you want to style yourself using the Chrome/Firefox/other DevTools. This is, like @randyzwitch, my preferred way of doing…

In the source code, most Styletron widget overrides are in widgetTheme.ts and more global CSS if you really are interested though.

2 Likes
#9

Thanks Andfanilo, that’ useful, and I appreciate the detailed feedback! :slight_smile:

Charly

#10

Thank you. Looking for this :slight_smile: