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:
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')
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)