Streamlit defined css variables are not working properly

Using Streamlit
,
1

Hi everyone,
I’m working on a Streamlit application and am trying to dynamically adjust the background color of a custom element based on the user’s preferred color scheme (light or dark mode). However, I’m encountering issues where the background color css variables are set to some transparent rgba values.
This occurs when using the --background-color and --secondary-background-color but not with --text-color.
I got these variables from this blog post.
This is the code used to generate a footer with --background-color

    with st.sidebar:
        st.sidebar.markdown(
            body=f"""
                <style>
                [class='custom-caption-container'] {{
                    width:280px;
                    position: fixed;
                    bottom: 0;
                    left: 2em;
                    right: 2em;
                    color: rgb(163, 168, 184);
                    background-color: var(--background-color);
                    margin-right:1em;
                    padding-top: 1em;
                    padding-left: 1em;
                    padding-right: 1em;
                    padding-bottom: 1em;
                }}
                </style>

            <div data-testid="element-container" class="custom-caption-container">
            <p class='footer_row'><strong>App Version</strong>: v{app_version} | <strong>Model</strong>: v{data_model_version}</p>\n
            <p class='footer_row'><strong>Streamlit</strong>: v{streamlit_version} | <strong>DB</strong>: {get_displayed_dataframe_type()}</p> \n
            </div>
            """,
            unsafe_allow_html=True,
        )

image
This is how the footer looks, as you can see the background of the div is transparent, just as the dev tools show above.
image
and this is how the footer should look like, if it helps.
image

I’m running streamlit v1.36.0 on python 3.10.14, as a note, i’m only using streamlit-aggrid
and streamlit-authenticator as third party streamlit packages, i have tried this both locally (with and without docker) and on streamlit cloud.
This issue appeared a few versions ago, i don’t recall which one specifically but this worked before, so this probably is a “recent bug”, if a bug at all.
Any insights or suggestions would be greatly appreciated. Thanks in advance for your help!