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

1 Like
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

4 Likes
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: