Check if the app is in dark mode or light mode at runtime

Using Streamlit
#1

TL;DR - How can I check if the app is in dark mode or light mode at runtime to match in-app theme to browser theme?
I’m creating a data app with a lot of custom styling in the visualizations. The issue I’m having is that the visuals look great in Light Mode but terrible in Dark Mode. I would like to develop a separate styling for each mode that can be applied based on which mode is active.

This can’t be done using the get_config_option utility because this (currently) only returns values from custom configurations, and I want to check which default theme configuration is being used.

Is there a way to do this?

Here is some pseudo-code of what I would like to do:

if st.check_is_dark_mode():
    theme = dict( <dark mode styling> )
else:
   theme = dict ( <light mode styling> )

st.plotly_chart(fig.update_layout(theme))
5 Likes
Know the theme in code
#2

This is useful. For instance, I want to place a logo on my Streamlit app. If I could check the theme at runtime, I would use specific image files for light and dark modes.

E.g.:

if st.theme() == 'Dark':
    st.image('dark_logo.png')
else:
    st.image('light_logo.png')

Thanks!

3 Likes
#3

Yes, it would be really helpful if st.theme() was implemented like you described! I keep running into this blocker when trying to build apps — if I’m developing custom code for my Streamlit app (but am not going as far as to build a whole Streamlit component) I haven’t found any way to style elements based on the current browser theme.

I’ve tried:

  • Accessing Streamlit config at runtime (this only stores manually set configurations)
  • Using javascript (only possible in a Streamlit component, which is way too much overhead)
  • Introspecting into Streamlit (it’s complicated, wasn’t able to find where this is stored, might not be possible)
1 Like
#4

+1 would like this functionality

1 Like