Animation when toggle themes

Using Streamlit
, ,
1

Hi, I’m writing some code for a page that contains a button that when pressed changes the theme from light to dark. The code works as expected and no problems occur. There is only one thing I do not like: the sudden change of theme.

I would like to know if there is a way to add an animation to the button click that smooth the transition from dark to light. By adding the execution of some query in javascript or maybe if there is something proprietary inside the library.
Unfortunately from my searches I have not found anything. I hope that someone could help me and thank you for your time.

I will paste my code below for a reference.

import streamlit as st

st.set_page_config(layout='wide')

ms = st.session_state

if "themes" not in ms:
    ms.themes = {
        "current_theme": "light",
        "refreshed": False,
        "light": {
            "theme.base": "light",
            "theme.backgroundColor": "white",
            "theme.primaryColor": "#5591f5",
            "theme.secondaryBackgroundColor": "#82E1D7",
            "theme.textColor": "#0a1464",
            "button_face": "🌙",
        },
        "dark": {
            "theme.base": "dark",
            "theme.backgroundColor": "black",
            "theme.primaryColor": "#c98bdb",
            "theme.secondaryBackgroundColor": "#5591f5",
            "theme.textColor": "white",
            "button_face": "☀️",
        },
    }

def apply_theme(theme_key):
    theme = ms.themes[theme_key]
    for k, v in theme.items():
        if k.startswith("theme"):
            st._config.set_option(k, v)

def ChangeTheme():
    new_theme = "dark" if ms.themes["current_theme"] == "light" else "light"
    ms.themes["current_theme"] = new_theme
    apply_theme(new_theme)
    ms.themes["refreshed"] = False

apply_theme(ms.themes["current_theme"])

col1, col2, col3 = st.columns([1, 12, 1])
with col3:
    face = ms.themes[ms.themes["current_theme"]]["button_face"]
    st.button(face, on_click=ChangeTheme)

if not ms.themes["refreshed"]:
    ms.themes["refreshed"] = True
    st.rerun()
2

Just so you’re aware, by changing the theme within Streamlit’s configuration, you will be changing it for all users simultaneously. So if two people are viewing the app and one changes the theme, they will both see the new theme.

As for animating the change, no, I can’t think of a nice way to do that when you’re assigning the theme values through Streamlit’s internal configuration commands. If you want to introduce a smooth transition, I think you’d have to inject JS that incrementally applies the new colors everywhere.