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))
6 Likes
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!

4 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)
2 Likes
4

+1 would like this functionality

2 Likes
5

+1

1 Like
6

Hi all :wave:

I would highly encourage all of you to upvote the following GitHub issue to show your support for this feature request:

3 Likes
8

+1 would help a lot when styling charts as default styling inverts color in dark vs light mode.

EDIT: If one is comfortable using streamlit_javascript then this code will return the user’s system preference on load. So if light/dark mode is forced in streamlit it will still return system preference and neither will toggling it in system settings adjust the value dynamically but only on browser load, ie a browser refresh must be forced. Just tried on Mac and will try on Windows tomorrow.


from streamlit_javascript import st_javascript
return_value = st_javascript("""function darkMode(i){return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)}(1)""")
st.write(return_value)
1 Like
9

@PZ1 thanks for the suggestion! I came up with a variation on your snippet where it would read the selected theme from CSS of streamlit div. It seem to work with whatever the use choose, but still unfortunately require a page refresh, because Streamlit does not trigger re-run when the settings are changed

from streamlit_javascript import st_javascript
st_theme = st_javascript("""window.getComputedStyle(window.parent.document.getElementsByClassName("stApp")[0]).getPropertyValue("color-scheme")""")
if st_theme == "dark":
    ...
else:
    ...

Offtopic: This is how I use it with a canvas widget

image
image1290×1404 60.3 KB
image
image1290×1404 52.6 KB

2 Likes
10

@joelbecker I created a component to get the active theme of the Streamlit app. To install it, run the command:

pip install st-theme

Here is a basic example of usage:

import streamlit as st
from streamlit_theme import st_theme
theme = st_theme()
st.write(theme)

And its output:

Example
[App] [Source]

I also recommend you to read about how the adjust parameter works, and take a look at the Notes and Requirements sections, in the GitHub repository:

6 Likes
11

this works perfectly! thank you!

2 Likes