Unable to change text color of Page Navigation elements in sidebar

[johnsnow09]

I am trying to change color of sidebar background and also of the text of all the content in it including page navigations.

1. Referring this streamlit link I was able to change background color by theme settings secondaryBackgroundColor but this doesn’t provide changing any text color options only for sidebar so if background is black then text there is not visible.

2. Referring this streamlit link2 I was able to change background color to black and also the content color to white but it didn’t change the page navigation color.

3. I have tried below code and they too didn’t change the page navigation colors.

st.markdown(    """
<style>
[data-testid="stSidebarContent"] {
    color: white;
    background-color: #111;
}
</style>
""", unsafe_allow_html=True)

st.markdown(    """
<style>
[data-testid="stSidebarNav"] {
    color: white;
    background-color: #111;
}
</style>
""", unsafe_allow_html=True)

below is the snapshot:

Please suggest how to change the color of all the elements in the sidebar including Page Navigations and Subheaders.

Thanks !!

[blackary]

Adding a span to the selector seems to do the trick:

import streamlit as st

st.html("""
<style>
[data-testid="stSidebarContent"] {
    color: white;
    background-color: #111;
}
</style>
""")

st.html("""
<style>
[data-testid="stSidebarNav"] span {
    color: white;
    background-color: #111;
}
</style>
""")

st.sidebar.subheader("Hello")

[johnsnow09]

Thank you for the quick response … that worked well. Appreciate your help