Update app.py

app.py

@@ -72,7 +72,7 @@ translations = {
     }
 }
 
-# 5. Language selection with flags in an accordion
+# 5. Wybór języka z flagami w akordeonie
 if 'language' not in st.session_state:
     st.session_state.language = 'Polish'
 
@@ -95,7 +95,7 @@ selected_language = st.session_state.language
 
 st.markdown(f"**{translations[selected_language]['language_selected']} {selected_language}**")
 
-# 6. Fetch translated menu options
+# 6. Pobranie przetłumaczonych opcji menu
 menu_keys = ['menu_analysis_sms', 'menu_about', 'menu_education', 'menu_statistics', 'menu_contact']
 menu_options = [translations[selected_language][key] for key in menu_keys]
 
@@ -107,23 +107,46 @@ custom_css = """
         display: flex;
         justify-content: center;
         align-items: center;
-        background-color: var(--st-secondary-background-color);
         padding: 10px 0;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
 
-    /* Podświetlenie wybranej zakładki jako przycisk */
-    .streamlit-option-menu .selected {
-        background-color: var(--st-primary-color) !important;  /* Użyj koloru podstawowego motywu */
-        color: var(--st-text-color) !important;             /* Użyj koloru tekstu motywu */
+    /* Light theme styles */
+    html[data-theme="light"] .streamlit-option-menu {
+        background-color: #f0f0f0; /* Jasne tło */
+    }
+
+    html[data-theme="light"] .streamlit-option-menu .menu-item {
+        background-color: transparent;
+        color: #333;
+        border: none;
         border-radius: 5px;
         padding: 8px 16px;
+        margin: 0 5px;
+        transition: background-color 0.3s, color 0.3s;
+        cursor: pointer;
     }
 
-    /* Stylizacja przycisków menu */
-    .streamlit-option-menu .menu-item {
+    html[data-theme="light"] .streamlit-option-menu .menu-item:hover {
+        background-color: #02ab21 !important;  /* Zielone tło podczas hover */
+        color: #ffffff !important;             /* Biały tekst podczas hover */
+    }
+
+    html[data-theme="light"] .streamlit-option-menu .selected {
+        background-color: #02ab21 !important;  /* Zielone tło dla wybranej zakładki */
+        color: #ffffff !important;             /* Biały tekst dla wybranej zakładki */
+        border-radius: 5px;
+        padding: 8px 16px;
+    }
+
+    /* Dark theme styles */
+    html[data-theme="dark"] .streamlit-option-menu {
+        background-color: #333; /* Ciemne tło */
+    }
+
+    html[data-theme="dark"] .streamlit-option-menu .menu-item {
         background-color: transparent;
-        color: var(--st-text-color);
+        color: #ffffff;
         border: none;
         border-radius: 5px;
         padding: 8px 16px;
@@ -132,10 +155,16 @@ custom_css = """
         cursor: pointer;
     }
 
-    /* Efekt hover dla elementów menu */
-    .streamlit-option-menu .menu-item:hover {
-        background-color: var(--st-primary-color) !important;  /* Użyj koloru podstawowego motywu */
-        color: var(--st-text-color) !important;             /* Użyj koloru tekstu motywu */
+    html[data-theme="dark"] .streamlit-option-menu .menu-item:hover {
+        background-color: #02ab21 !important;  /* Zielone tło podczas hover */
+        color: #ffffff !important;             /* Biały tekst podczas hover */
+    }
+
+    html[data-theme="dark"] .streamlit-option-menu .selected {
+        background-color: #02ab21 !important;  /* Zielone tło dla wybranej zakładki */
+        color: #ffffff !important;             /* Biały tekst dla wybranej zakładki */
+        border-radius: 5px;
+        padding: 8px 16px;
     }
 
     /* Zmiana koloru ikon w menu */