CSS Color access

Using Streamlit
1

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);

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,
    )
2

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

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 ?

3

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

4 
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 :smiley: but that code now works nicely

5

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

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