Customize theme

Using Streamlit
1

Hello,
is it possible to create a toggle button, to allow users Switch between light and dark mode ?
If it’s possible, can anyone help me about that ?

In my current app, i created a config.toml, but i don’t know how can i allow two types of themes.

Thank you all !

1 Like
2

Check this guide on how to resolve issues. It might help your case.

1 Like
3

Apps made with streamlit already come with a function to change the theme, at the top right > setting > theme,

image

just to confirm, why is this option not enough? Are you trying to change a specific element?

1 Like
4

I am just trying to make something more simple for the users, where they can easily switch between two themes by a single click.
Maybe using this feature : https://extras.streamlit.app/Toggle%20Switch
?

5

Ok, you can use CSS classes to change properties from the Streamlit UI, it’s not officially supported and can break with future changes and updates, that’s why the theme option and the config.toml are the best way to do this.

To know the CSS classes that Streamlit uses, you need to use the browser dev tools and inspect the elements.

Here is an example using the main .stApp

import streamlit as st

dark = '''
<style>
    .stApp {
    background-color: black;
    }
</style>
'''

light = '''
<style>
    .stApp {
    background-color: white;
    }
</style>

st.markdown(light, unsafe_allow_html=True)

# Create a toggle button
toggle = st.button("Toggle theme")

# Use a global variable to store the current theme
if "theme" not in st.session_state:
    st.session_state.theme = "light"

# Change the theme based on the button state
if toggle:
    if st.session_state.theme == "light":
        st.session_state.theme = "dark"
    else:
        st.session_state.theme = "light"

# Apply the theme to the app
if st.session_state.theme == "dark":
    st.markdown(dark, unsafe_allow_html=True)
else:
    st.markdown(light, unsafe_allow_html=True)

# Display some text
st.write("This is a streamlit app with a toggle button for themes.")
3 Likes
6

Thank you so much for your reply, it helps me a lot !

7

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.