Change Color Scheme

[jordan-tadeo]

Hello, I'm looking to change the colors of this wonderful tree dropdown to match the rest of my project. Is there currently a way to do this? If not, I will implement it myself, but just wanted to make sure I'm not missing it first. Thank you!

[flucas96]

Hey,

it is possible to pass some custom css to the component to change the whole look by adressing the parameter overall_css.

I have created this function for instance to make the style more similar to the native streamlit style.

@st.cache_data(show_spinner=False)
def get_toml_config(file_name=".streamlit/config.toml"):
    """
    if os.path.exists(file_name):
        with open(file_name) as file:
            config = toml.load(file)
            return config
    else:
        st.write("Config file not found")
        return None
def st_ant_tree_css(config_toml=None):

    # Read the config.tonl
    config = get_toml_config() if config_toml is None else config_toml

    # Default theme settings
    primary_color = "#FF4B4B"
    background_color = "#0E1117"
    secondaryBackgroundColor = "#262730"
    text_color = "#FF4B4B"
    font_family = "sans-serif"

    # Update colors from config if available
    if config and "theme" in config:
        theme = config["theme"]
        primary_color = theme.get("primaryColor", primary_color)
        background_color = theme.get("backgroundColor", background_color)
        secondaryBackgroundColor = theme.get(
            "secondaryBackgroundColor", secondaryBackgroundColor
        )
        text_color = theme.get("textColor", text_color)
        font_family = theme.get("font", font_family)

    # CSS with dynamic colors
    TREE_SELECTOR_CSS = f"""
    .ant-select {{
        padding: 0px;
        font-family: "{font_family}", sans-serif !important;
        line-height: 25.6px;
        font-size: 16px !important;
    }}

    .ant-select-selector {{
        padding-left: 8px !important;
        background-color: {secondaryBackgroundColor} !important;
        font-family: "{font_family}", sans-serif !important;
        border: 0px !important;
        min-height: 2.5rem;
        width: 100%; 
        display: flex; 
        flex-wrap: wrap;

    }}
    .ant-select-selection-placeholder {{
        color: rgba(49, 51, 63, 0.6) !important;
        font-family: "{font_family}", sans-serif !important;
        font-size: 1rem !important;
        font-weight: normal;
        line-height: 1.6;
        flex: inherit;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }}
    .ant-select.ant-select-disabled .ant-select-selection-placeholder {{
        color:  rgba(15, 41, 29, 0.3) !important;
    }}
    .ant-select.ant-select-disabled .ant-select-arrow {{
        color: rgba(15, 41, 29, 0.4) !important;
    }}

    .ant-select-selector:focus {{
        border: 2px solid {primary_color} !important;
    }}
    .ant-select-focused .ant-select-selector {{
        border: 2px solid {primary_color} !important;
    }}

    .ant-select .ant-select-arrow {{
        color: Black !important;
        font-size: 13px;
    }}

    .ant-select.ant-select-disabled .ant-select-selection-item {{
        background: rgba(15, 41, 29, 0.1) !important;

    }}

    .ant-select.ant-select-disabled .ant-select-selection-item-content {{
        cursor: not-allowed;
    }}

    .ant-select-selection-item {{
        background-color: {primary_color} !important;
        align-items: center;
        border-left-width: 0px;
        font-size: 14px;
        border-radius: 2px;
        padding: 0px 5px;
        color: {background_color}
    }}
    .ant-select-selection-overflow-item {{
        margin-right: 6px;
    }}
    .ant-select-selection-item-content {{
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        font-family: "{font_family}", sans-serif;
        text-size-adjust: 100%;
        cursor: pointer;
        vertical-align: 0.0em;
    }}
    .ant-select-selection-item-remove {{
        cursor: pointer;
        font-weight: 900;
    }}

    .ant-select-selection-item-remove .anticon-close svg {{
        width: 1.0em; 
        height: 1.0em; 
        vertical-align: 0.0em;
        color: {background_color}
    }} 

    .ant-select .ant-select-clear {{
        inset-inline-end: 35px;
        background-color: transparent;
        opacity: 10;
        width: 14px; 
        height: 14px; 
    }}
    .ant-select .ant-select-clear .anticon.anticon-close-circle {{
        color: #808495 !important;
        position: relative;
        vertical-align: 0.3em; 
    }}
    .ant-select .ant-select-clear .anticon.anticon-close-circle:hover {{
        color: black !important;  
    }}
    .ant-select-tree-switcher .anticon {{
      position: relative;
      top: -1.5px; 
      transform: translateY(-1.5px); 
    }}
    .ant-select-single .ant-select-selector .ant-select-selection-item {{
        background-color: #e6e9ef !important;
        color: black !important;
        align-content: center;
    }}

    .ant-tree-select-dropdown .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {{
        background-color: {primary_color};
        border-color: {primary_color};
    }}
    .ant-tree-select-dropdown .ant-select-tree-checkbox:hover .ant-select-tree-checkbox-inner {{
        background-color: #F0F2F6; 
    }}

    .ant-tree-select-dropdown .ant-select-tree-checkbox-wrapper:not(.ant-select-tree-checkbox-wrapper-disabled):hover .ant-select-tree-checkbox-inner,
    .ant-tree-select-dropdown .ant-select-tree-checkbox:not(.ant-select-tree-checkbox-disabled):hover .ant-select-tree-checkbox-inner {{
        border-color: grey;
    }}

    .ant-tree-select-dropdown .ant-select-tree-checkbox-wrapper-checked:not(.ant-select-tree-checkbox-wrapper-disabled):hover .ant-select-tree-checkbox-inner,
    .ant-tree-select-dropdown .ant-select-tree-checkbox-checked:not(.ant-select-tree-checkbox-disabled):hover .ant-select-tree-checkbox-inner {{
        background-color:  {primary_color};
        color: grey !important;
    }}
    .ant-tree-select-dropdown .ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner:after {{
        background-color: {primary_color};
        color: grey !important;
    }}

    .ant-select-single .ant-select-selector .ant-select-selection-placeholder {{
      position: absolute;
      top: 50%;
      inset-inline-start: 11px;
      inset-inline-end: 11px;
      transform: translateY(-50%);
      transition: all 0.3s;
    }}
    .ant-select.ant-select-disabled .ant-select-selector .ant-select-selection-item {{
      color:  rgba(15, 41, 29, 0.3) !important;
    }}
    """
    return TREE_SELECTOR_CSS

You can adjust the CSS to your needs :)

I copied the code out of a larger project and adjusted it a little bit to make it work by itself but have not tested anything.

[jordan-tadeo]

Thank you! @flucas96