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:
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.
Accessing Streamlit config at runtime (this only stores manually set configurations)
Introspecting into Streamlit (it’s complicated, wasn’t able to find where this is stored, might not be possible)