Change Theme Light/Dark Button on client side

I got it!!

Now we can change light/dark theme from user interface independently throught an COI post message injection and one line streamlit variable modification…

Not only that, we can change between our custom themes, and not only over the properties streamlit provies. You can modify even the z-index and all the colors, styling…

To make the trick:

  • You have to use a script runner.py to up your app, not executed with streamlit run app.py
  • At the top of the runner.py, override de the variable streamlit.web.server.routes._DEFAULT_ALLOWED_MESSAGE_ORIGINS
  • Add the server you are using. This is because streamlit only wants to make custom post message from their servers. Also that means if you deploy your app on streamlit cloud you don’t need to do this.
  • And the magic behind the component button is a little bit complex, I will upload a custom component only to customize theme and change with a button. Now is available on my streamlit-plugins repo.
  • You can install with pip install streamlit-component-navbar

I start the idea with because of this post Streamlit on LinkedIn: 📜 Want a way to smoothly navigate your single-page apps? With John Pan's…

My Github Streamlit Plugins Repo: GitHub - quiradev/streamlit-plugins: Components and Frameworks to give new features to streamlit

Navbarplugin-ChangeTheme-ezgif.com-video-to-gif-converter

I will post on my Linkedin and here the updates. But the idea is to have a component that allows us to change multiple custom themes, the only limitations are trusted allowed origins, but it is only necessary for localhost runs or onpremise runs that are not on the default allowed streamlit list.

In the future, if that change, we can fix this issue, but we hope that at this time Streamlit will implement an official way.

1 Like