CSS Color access

[Jan3]

it seems i am unable to access the CSS variables for the default template colors.

Here is described that i can access them via background-color: var(–text-color);

Creating Custom Themes for Streamlit Apps

Can you point out where i am wrong ?

import streamlit as st

@st.dialog("Edit")
def edit_table_data(x):
    with st.popover("Edit"):
        st.write(f"Editing {x}")

def display_table(table_data, column_formating = None, edit_function=False, has_header = True, header_color = None, alternating_row_colors = False):
    modifier = 0 if not edit_function else 1
    st.html("""<style> .st-key-rnd_table { display: block;} </style>""")
    with st.container(key="rnd_table"):
        for j,row in enumerate(table_data):
            row_len = len(row) + modifier
            if j == 0 and header_color:
                style= f"{{background-color: {header_color};}}"
            else:
                if alternating_row_colors == True and ((j+1) % 2 != 0):
                    style = f"{{background-color: rgb(240, 242, 246);}}"
                else:
                    style = f"{{background-color: transparent;}}"
            
            with st.container(key=f"row_{j}"):

                columns = st.columns(row_len if not column_formating else column_formating)
                for i,col in enumerate(row):
                    columns[i].write(col)
                if edit_function and (j != 0 and has_header):
                    with columns[i+1]:
                        if st.button("Edit",key=f'edit_{j}'):
                            edit_function(j)
            st.html(f"""<style> .st-key-row_{j} {{ background-color: var(--text-color);}} </style>""") # should give a black/ white bar but just does nothing ?
#            st.html(f"""<style> .st-key-row_{j} {{ background-color: green;}} </style>""") -- works nicely




data = [['First', 'Second', 'Third'],
        ['A', 'B', 'C'],
        ['D', 'E', 'F'],
        ['G', 'H', 'I']]

display_table(
        data,
        edit_function=edit_table_data,
        header_color="var(--text-color)",
        alternating_row_colors=True,
    )

[Jan3]

I tried to get the color’s using st.get_option

st.get_option - Streamlit Docs

That ONLY works if you are using a CUSTOM Theme.

Is there a better way to get to the default value’s on the default light / dark theme ?

[Jan3]

In case SOMEONE stumbles over this again …this is HELPFULL should be considered as part of the main streamlit

New Component: st-theme, it returns the active theme of the Streamlit app

Streamlit Theme A component that returns the active theme of the Streamlit app. Installation pip install st-theme Usage The function immediately returns the active theme, when it is called. If the user manually changes the theme, after the web app is already running, it updates the returned value. The st_theme command must only be set once in the script. Parameters adjust : bool, default=True If set to True, which is the default, it makes a CSS adjustment and removes a space that would othe…

[Jan3]

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



@st.dialog("Edit")
def edit_table_data(x):
    st.write(f"We are editing dataset No {x}")

def display_table(table_data, column_formating = None, edit_function=False, has_header = True, alternating_row_colors = False):
    modifier = 0 if not edit_function else 1
    st.html("""<style> .st-key-rnd_table { display: block;} </style>""")
    with st.container(key="rnd_table"):
        for j,row in enumerate(table_data):
            row_len = len(row) + modifier
            if j == 0:
                style= f"{{background-color: {theme['darkenedBgMix100']};}}"
            else:
                if alternating_row_colors == True and ((j+1) % 2 != 0):
                    style = f"{{background-color: {theme['secondaryBackgroundColor']};}}"
                else:
                    style = f"{{background-color: transparent;}}"
            with st.container(key=f"row_{j}"):
                columns = st.columns(row_len if not column_formating else column_formating)
                for i,col in enumerate(row):
                    columns[i].write(col)
                if edit_function and (j != 0 and has_header):
                    with columns[i+1]:
                        if st.button("Edit",key=f'edit_{j}'):
                            edit_function(j)
            st.html(f"""<style> .st-key-row_{j} {style} </style>""") 

data = [['First', 'Second', 'Third'],
        ['A', 'B', 'C'],
        ['D', 'E', 'F'],
        ['G', 'H', 'I']]

display_table(
        data,
        edit_function=edit_table_data,
        alternating_row_colors=True,
    )

probably just talking to myself but that code now works nicely

[mathcatsand]

I’m glad you found a custom component to meet your needs. The blog post is a bit old…

Keep an eye out for new features. Advanced theming is on our roadmap! It’s definitely a highly requested feature.