style_metric_cards bug on dark mode

[4r7hu3]

Description

style_metric_cards does not display values when the dark mode is enabled, hiding the metric, delta and help options from the default st.metric method. I tested in three different browsers, with both dark and white mode, and got the same results in all of them: for the white theme, works fine, but has a bug when dark mode is enabled.

Reproduction steps

1. Apply style_metric_cards function to the code
2. create the metrics with st.metric
3. load the page with streamlit run file.py
4. notice the bug

Logs

No response

Version of streamlit

streamlit==1.33.0

Version of streamlit-extras

streamlit-extras==0.4.2

[arnaudmiribel]

Hey @4r7hu3! That's a good catch.

It's hard for anyone to contribute new streamlit components that look great both on light and dark or custom themes because streamlit doesn't offer a native way to detect app's theme (you want to upvote the issue in here). That being said, we're lucky and @gabrieltempass just contributed his component to do exactly that into streamlit-extras, see #222.

We should come up with different colors for style_metric_cards when in dark mode. Do you have suggestions? You're welcome to hit a PR. I think it should basically just look like that:

from streamlit_extras.theme import st_theme

basis_theme = st_theme["basis"]
if basis_theme == "light":
    # the current code
elif basis_theme == "dark":
    # some new code with other colors

Let me know how that sounds! Also cc-ing @dataprofessor who created these custom cards in the first place and might have ideas.

[arnaudmiribel]

Closing this issue since there's a proposed fix above.