feat: Revamp UI theme and styling for improved dark mode experience

- Updated the custom theme to utilize a dark base with a cohesive color palette, enhancing visual appeal.
- Adjusted tab and button styles for better contrast and readability in dark mode.
- Refined sidebar and expander header styles to align with the new theme.
- Added a footer for consistent branding and information display.

app.py

@@ -26,10 +26,11 @@ def create_custom_theme():
         f.write(
             """
 [theme]
-primaryColor = "#444444"  # Dark Grey
-backgroundColor = "#FFFFFF" # White
-secondaryBackgroundColor = "#F0F2F6" # Light Grey
-textColor = "#000000" # Black
+base = "dark" # Use Streamlit's dark theme as a base
+primaryColor = "#CCCCCC"  # Light Grey accent
+backgroundColor = "#0E1117" # Default Streamlit dark bg
+secondaryBackgroundColor = "#262730" # Slightly lighter dark grey
+textColor = "#FAFAFA" # Light text
 font = "sans serif"
         """
         )
@@ -79,73 +80,78 @@ hide_st_style = """
             #MainMenu {visibility: hidden;}
             footer {visibility: hidden;}
             header {visibility: hidden;}
-            /* Body background */
-            .stApp {
-                background-color: #FFFFFF; /* Set solid white background */
-            }
+            /* Body background - Already set by theme config */
+            /* .stApp {
+                background-color: #0E1117; 
+            } */
             /* Tab styling */
             .stTabs [data-baseweb="tab-list"] {
                 gap: 8px; /* Slightly reduced gap */
-                border-bottom: 1px solid #CCCCCC; /* Add a subtle border */
+                border-bottom: 1px solid #333333; /* Darker border */
             }
             .stTabs [data-baseweb="tab"] {
                 background-color: transparent; /* Make tabs transparent */
                 border-radius: 0; /* Remove border radius */
                 padding: 10px 15px;
-                color: #555555; /* Grey text */
+                color: #AAAAAA; /* Lighter Grey text */
                 border-bottom: 2px solid transparent; /* Prepare for selected indicator */
                 transition: all 0.3s ease;
             }
             .stTabs [data-baseweb="tab"]:hover {
-                background-color: #F0F2F6; /* Light grey hover */
-                color: #000000; /* Black text on hover */
+                background-color: #262730; /* Dark grey hover */
+                color: #FAFAFA; /* White text on hover */
             }
             .stTabs [aria-selected="true"] {
                 background-color: transparent !important;
-                color: #000000 !important; /* Black text for selected */
-                border-bottom: 2px solid #444444 !important; /* Dark grey underline for selected */
+                color: #FAFAFA !important; /* White text for selected */
+                border-bottom: 2px solid #CCCCCC !important; /* Light grey underline for selected */
                 font-weight: 600; /* Make selected tab bold */
             }
-            /* Sidebar styling */
-            .css-1d391kg { /* Target sidebar specifically */
-                 background-color: #F0F2F6 !important; /* Light grey sidebar */
-            }
-             /* Ensure sidebar text is readable */
-            .css-1d391kg .stMarkdown, .css-1d391kg .stCheckbox, .css-1d391kg .stExpander, .css-1d391kg .stText, .css-1d391kg .stButton > button {
-                color: #000000 !important;
-            }
+            /* Sidebar styling - Mostly handled by theme config */
+            /* .css-1d391kg { 
+                 background-color: #262730 !important; 
+            } */
+             /* Ensure sidebar text is readable - Mostly handled by theme config */
+            /* .css-1d391kg .stMarkdown, .css-1d391kg .stCheckbox, .css-1d391kg .stExpander, .css-1d391kg .stText, .css-1d391kg .stButton > button {
+                color: #FAFAFA !important;
+            } */
             /* Button styling */
             .stButton>button {
-                background-color: #FFFFFF !important;
-                color: #000000 !important;
-                border: 1px solid #CCCCCC !important;
+                background-color: #262730 !important; /* Dark grey background */
+                color: #FAFAFA !important; /* Light text */
+                border: 1px solid #444444 !important; /* Slightly lighter border */
                 transition: all 0.3s ease !important;
                 box-shadow: none !important; /* Remove default shadow */
             }
             .stButton>button:hover {
-                background-color: #F0F2F6 !important; /* Light grey on hover */
-                border-color: #AAAAAA !important;
+                background-color: #3a3c44 !important; /* Lighter grey on hover */
+                border-color: #666666 !important;
                 transform: none !important; /* Remove hover transform */
                 box-shadow: none !important;
             }
             .stButton>button:active {
-                 background-color: #E0E0E0 !important; /* Slightly darker grey on click */
+                 background-color: #444444 !important; /* Slightly darker grey on click */
             }
              /* Expander header styling */
             .stExpander > div:first-child {
-                background-color: #F0F2F6; /* Light grey background for expander header */
+                background-color: #262730; /* Dark grey background for expander header */
                 border-radius: 4px;
             }
             .stExpander header { /* Target expander header specifically */
-                color: #000000 !important; /* Black text for expander header */
+                color: #FAFAFA !important; /* Light text for expander header */
                 font-weight: 600;
             }
             /* General adjustments for minimalist feel */
             h1, h2, h3, h4, h5, h6 {
-                color: #000000; /* Ensure headers are black */
+                color: #FAFAFA; /* Ensure headers are light */
             }
             .stMarkdown p {
-                color: #333333; /* Slightly lighter black for paragraph text */
+                color: #CCCCCC; /* Slightly darker light color for paragraph text */
+            }
+            /* Color Preview Text */
+            .color-preview-text {
+                color: #1E1E1E !important; /* Ensure text is visible on light/dark previews */
+                text-shadow: 0 0 2px #FFFFFF; /* Add a subtle white shadow for contrast */
             }
             </style>
             """
@@ -280,8 +286,8 @@ with main_tabs[0]:  # Camera Feed Tab
                 st.markdown(
                     f"""
                 <div style="background-color: {preview_color_hsl}; width: 100%; height: 30px;
-                            border: 1px solid #CCCCCC; border-radius: 5px; margin-top: 10px;">
-                    <p style='text-align: center; color: #333; line-height: 30px; font-size: 12px; font-weight: bold;'>
+                            border: 1px solid #555555; border-radius: 5px; margin-top: 10px;">
+                    <p class='color-preview-text' style='text-align: center; line-height: 30px; font-size: 12px; font-weight: bold;'>
                         Preview (Lower Bound)
                     </p>
                 </div>
@@ -371,7 +377,7 @@ with main_tabs[0]:  # Camera Feed Tab
                     "border-radius": "8px",
                     "margin": "0 auto",
                     "display": "block",
-                    "border": "2px solid #444444",  # Changed border to dark grey
+                    "border": "2px solid #AAAAAA",  # Changed border to lighter grey
                 },
             ),
         )
@@ -524,3 +530,14 @@ with main_tabs[2]:  # Documentation Tab
     """
     )
 
+st.markdown(
+    """
+<div style="position: fixed; bottom: 0; width: 100%; background-color: #0E1117;
+            padding: 8px; text-align: center; border-top: 1px solid #262730;">
+    <p style="margin: 0; font-size: 13px; color: #AAAAAA;">
+    OpenCV Explorer | Built with Streamlit | © 2024
+    </p>
+</div>
+""",
+    unsafe_allow_html=True,
+)