Streamlit 배경색 입히기 (CSS)

예쁜 CSS 예시를 찾아서 참고하려고 하였으나, 버튼 및 입력창은 색이 바뀌는데 배경색이 안 바뀌는 문제에 봉착

(style.css 경로는 streamlit 을 run 시키는 그 경로)

Creating a nicely formatted search field? - Using Streamlit - Streamlit

 

일반적으로 아래와 같은 방식을 추천해주었지만,

 st.markdown(
    """
    <style>
    .reportview-container {
        background: url("url_goes_here")
    }
   .sidebar .sidebar-content {
        background: url("url_goes_here")
    }
    </style>
    """,
    unsafe_allow_html=True
)

 

이걸 이용해서 <style> </style> 부분을 고쳐도 background 컬러는 바뀌지 않았다.

공식 문서에 .streamlit/config.toml 파일에 아래 내용을 추가하라는 것 같아서 이 방법으로 테스트해보았지만, 변경되지 않았다. 

[theme]
primaryColor="#FF4B4B"
backgroundColor="#FFFFFF"
secondaryBackgroundColor="#F0F2F6"
textColor="#31333F"
font="sans serif"

Theming - Streamlit Docs

 

그러다가 F12로 div 이름을 알아내고 그걸로 설정하니 변경되었다.

왼쪽 사이드바의 class 명은 stSidebar 였고,

style 부분에 .stSidebar 하고서 원하는 색으로 배경을 입혔다.

st.markdown("""
    <style>
    .stSidebar {
        color: #ffffff;
        background-color: #000000;
    }
    .eczjsme13 {
        color: #ffffff;
    }
    </style>
    """, unsafe_allow_html=True)

text 색이 흰색으로 안 바뀌었었는데, !important 넣어도 안 바뀌길래

html - What are the implications of using "!important" in CSS? - Stack Overflow

더 하위의 다른 class 명을 잡아서 color 를 흰색 (#ffffff) 로 바꿔주었다.

그래서 변경되었다.