dark mode friendly

app.py

@@ -42,9 +42,11 @@ def main():
             return
 
         with prediction_result_placeholder.container():
-            #with st.expander("Show result of prediction"):
-                #with st.spinner('Waiting for result display...'):
-            display_options(st.session_state.crop_image, st.session_state.score_threshold, is_mobile, int(5/6*screen_width))
+            if is_mobile:
+                display_options(st.session_state.crop_image, st.session_state.score_threshold, is_mobile, int(5/6*screen_width))
+            else:
+                with st.expander("Show result of prediction"):
+                    display_options(st.session_state.crop_image, st.session_state.score_threshold, is_mobile, int(5/6*screen_width))
 
         if not is_mobile:
             with additional_options_placeholder.container():

modules/streamlit_utils.py

@@ -187,11 +187,27 @@ def configure_page():
     is_mobile = screen_width is not None and screen_width < 800
     return is_mobile, screen_width
 
+from streamlit_js_eval import streamlit_js_eval
+
 def display_banner(is_mobile):
+    # JavaScript expression to detect dark mode
+    dark_mode_js = """
+    (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    """
+    
+    # Evaluate JavaScript in Streamlit to check for dark mode
+    is_dark_mode = streamlit_js_eval(js_expressions=dark_mode_js, key='dark_mode')
+
     if is_mobile:
-        st.image("./images/banner_mobile.png", use_column_width=True)
+        if is_dark_mode:
+            st.image("./images/banner_mobile_dark.png", use_column_width=True)
+        else:
+            st.image("./images/banner_mobile.png", use_column_width=True)
     else:
-        st.image("./images/banner_desktop.png", use_column_width=True)
+        if is_dark_mode:
+            st.image("./images/banner_desktop_dark.png", use_column_width=True)
+        else:
+            st.image("./images/banner_desktop.png", use_column_width=True)
 
 def display_title(is_mobile):
     title = "Welcome on the BPMN AI model recognition app"