fix: Adapt all pages and components for dark and light mode support

Remove hardcoded colors from Plotly charts, HTML elements, and metric
boxes so Streamlit can auto-theme correctly in both dark and light modes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: chrisduvillard

Welcome.py

@@ -1,62 +1,42 @@
 import streamlit as st
 
-# Set the page configuration with a custom title, icon, and layout
 st.set_page_config(
     page_title="RiskSim: Risk Management Simulator",
     page_icon="🎲",
     layout="wide",
 )
 
-# Main title and subtitle with enhanced styling
 st.markdown("""
-    <style>
-    .main-title {
-        font-size: 3rem;
-        color: #2c3e50;
-        font-weight: bold;
-        text-align: center;
-    }
-    .sub-title {
-        font-size: 1.25rem;
-        color: #7f8c8d;
-        text-align: center;
-        margin-bottom: 25px;
-    }
-    </style>
-    <h1 class="main-title">Welcome to the Risk Management Simulator 🎲</h1>
-    <h3 class="sub-title">Empowering Your Trading Decisions Through Risk Analysis</h3>
+    <h1 style="font-size: 3rem; font-weight: bold; text-align: center;">
+        Welcome to the Risk Management Simulator 🎲
+    </h1>
+    <h3 style="font-size: 1.25rem; opacity: 0.6; text-align: center; margin-bottom: 25px;">
+        Empowering Your Trading Decisions Through Risk Analysis
+    </h3>
 """, unsafe_allow_html=True)
 
-# Place an image in the app
-# Replace 'header_image.jpg' with the path to your image file
-# st.image('docs/images/header_image.jpg', use_column_width=True, caption="Explore Risk and Portfolio Dynamics")
-# Display the image with a reduced size (width set to 700px)
-# st.image('docs/images/header_image.jpg', use_column_width=False, width=700, caption="Explore Risk and Portfolio Dynamics")
-# Use st.image to display the image with a specified width and centered alignment
 col1, col2, col3 = st.columns([2, 4, 2])
 with col2:
-    st.image('docs/images/header_image.jpg', width=700)
+    st.image("docs/images/header_image.jpg", width=700)
 
-
-# Explanations about the various pages
 st.markdown("""
 ---
-#### 🔍 Explore the Features of RiskSim:
+#### Explore the Features of RiskSim:
 **Navigate Through the App Using the Sidebar:**
 
-- **📊 Risk-Return Analysis**:
+- **Risk-Return Analysis**:
     - Simulate how various trading parameters, such as win rate, number of trades, and risk per trade, affect your overall performance.
     - Use Monte Carlo simulations to explore potential outcomes based on your trading strategy.
     - Visualize the trade-off between risk and return to optimize your approach.
 
-- **🔗 Asset Correlation Simulation**:
+- **Asset Correlation Simulation**:
     - Generate portfolios of assets with different correlation structures, and simulate their price evolution over time.
     - Adjust the number of assets, correlation range, and key return parameters to test portfolio performance.
     - Analyze performance metrics such as Sharpe Ratio, Maximum Drawdown, and Annualized Return to assess the strength of your portfolio under various correlation regimes.
 
 
 ---
-#### 📘 How to Get Started:
+#### How to Get Started:
 
 1. **Select a Page**: Use the sidebar on the left to navigate between different analyses.
 2. **Adjust Parameters**: Each page offers interactive controls to modify the simulation parameters.

pages/1_🎯_risk_return_analysis.py

@@ -36,13 +36,10 @@ def _add_expected_return_annotation(
         arrowsize=1.5,
         ax=0,
         ay=-30,
-        font=dict(family="Arial, sans-serif", size=14, color="black"),
+        font=dict(family="Arial, sans-serif", size=14),
         align="center",
-        arrowcolor="black",
-        bordercolor="black",
         borderwidth=1,
         borderpad=4,
-        bgcolor="rgba(255, 255, 255, 0.9)",
         opacity=0.9,
     )
 
@@ -62,7 +59,6 @@ def create_bar_chart_figure(
     y_tick_interval = y_range / 10 if y_range != 0 else 1
     y_ticks = np.arange(min_result, max_result + y_tick_interval, y_tick_interval)
 
-    # Single trace with per-bar colors so categorical axis works correctly
     fig = go.Figure(go.Bar(
         x=x_labels,
         y=averages,
@@ -72,7 +68,7 @@ def create_bar_chart_figure(
                    for (rpur, _), avg in zip(sorted_results, averages)],
         text=[f"{avg:.2f}%" for avg in averages],
         textposition="outside",
-        textfont=dict(size=12, color="black"),
+        textfont=dict(size=12),
     ))
 
     fig.update_layout(
@@ -81,12 +77,11 @@ def create_bar_chart_figure(
             title="Average Percentage Return (%)",
             tickvals=y_ticks,
             ticktext=[f"{t:.2f}%" for t in y_ticks],
-            showgrid=True, gridwidth=1, gridcolor="LightGrey",
+            showgrid=True, gridwidth=1,
         ),
         xaxis=dict(tickangle=-45, automargin=True),
         showlegend=False,
         height=600,
-        font=dict(family="Helvetica, sans-serif", size=12, color="#333"),
     )
     fig.add_hline(y=0, line_dash="dash", line_color="gray")
 
@@ -130,7 +125,6 @@ def create_win_rate_vs_return_chart(
         10,
     )
 
-    # Single trace with per-bar colors so categorical axis works correctly
     fig = go.Figure(go.Bar(
         x=x_labels,
         y=avg_returns,
@@ -154,11 +148,10 @@ def create_win_rate_vs_return_chart(
             title="Average Percentage Return (%)",
             tickvals=y_ticks,
             ticktext=[f"{t}%" for t in y_ticks],
-            showgrid=True, gridwidth=1, gridcolor="LightGrey",
+            showgrid=True, gridwidth=1,
             range=[np.floor(min_return / 10) * 10, np.ceil(max_return / 10) * 10],
         ),
         showlegend=False,
-        font=dict(family="Helvetica, sans-serif", size=12, color="#333"),
         height=600,
     )
     fig.add_hline(y=0, line_dash="dash", line_color="gray")
@@ -177,13 +170,10 @@ def create_win_rate_vs_return_chart(
 
 def app() -> None:
     """Main function for the Risk-Return Analysis page."""
-    st.markdown(
-        '<h1 style="color: #1c2e4a;">Risk-Return Analysis</h1>',
-        unsafe_allow_html=True,
-    )
+    st.header("Risk-Return Analysis")
     st.markdown("""
-        <div style="text-align: center; padding: 22px;">
-            <h4 style="color: #5D6D7E;">Stay Alive Long Enough to Get Lucky</h4>
+        <div style="text-align: center; padding: 12px 0 22px 0;">
+            <h4 style="opacity: 0.6;">Stay Alive Long Enough to Get Lucky</h4>
         </div>
     """, unsafe_allow_html=True)
 

utils/style.py

@@ -5,27 +5,12 @@
 
 
 def link(link, text, **style):
-    """
-    Create an HTML link element with given href and text.
-
-    Args:
-        link (str): The URL the link points to.
-        text (str): The text to display for the link.
-        **style: Additional CSS styles to apply to the link.
-
-    Returns:
-        HtmlElement: An HTML 'a' element.
-    """
+    """Create an HTML link element with given href and text."""
     return a(_href=link, _target="_blank", style=styles(**style))(text)
 
 
 def layout(*args):
-    """
-    Layout the footer at the bottom of the Streamlit app and inject custom JavaScript.
-
-    Args:
-        *args: Variable length argument list to include strings or HtmlElement objects in the footer.
-    """
+    """Layout the footer at the bottom of the Streamlit app."""
     style = """
     <style>
       #MainMenu {visibility: hidden;}
@@ -34,137 +19,115 @@ def layout(*args):
     </style>
     """
 
-    # Define styles for the footer container and horizontal line
     style_div = styles(
         position="fixed",
         left=0,
         bottom=0,
         margin=px(0, 0, 0, 0),
         width=percent(100),
-        color="black",
         text_align="center",
         height="auto",
-        opacity=1
+        opacity=1,
     )
 
     style_hr = styles(
         display="block",
         margin=px(0, 0, 0, 0),
         border_style="inset",
-        border_width=px(2)
+        border_width=px(2),
     )
 
-    # Create the footer body
     body = p(
-        id='myFooter',
+        id="myFooter",
         style=styles(
             margin=px(0, 0, 0, 0),
             padding=px(5),
             font_size="0.8rem",
-            color="rgb(51,51,51)"
-        )
-    )
-
-    # Combine the elements into the footer div
-    foot = div(
-        style=style_div
-    )(
-        hr(
-            style=style_hr
+            color="inherit",
         ),
-        body
     )
 
-    # Inject the custom style into the Streamlit app
+    foot = div(style=style_div)(hr(style=style_hr), body)
+
     st.markdown(style, unsafe_allow_html=True)
 
-    # Add the provided arguments to the body of the footer
     for arg in args:
-        if isinstance(arg, str):
-            body(arg)
-        elif isinstance(arg, HtmlElement):
+        if isinstance(arg, (str, HtmlElement)):
             body(arg)
 
-    # Render the footer in the Streamlit app
     st.markdown(str(foot), unsafe_allow_html=True)
 
-    # JavaScript code to dynamically change the footer text color based on the background color
-    js_code = '''
+    # JS to adapt footer color to Streamlit theme
+    js_code = """
     <script>
     function rgbReverse(rgb){
         var r = rgb[0]*0.299;
         var g = rgb[1]*0.587;
         var b = rgb[2]*0.114;
-
         if ((r + g + b)/255 > 0.5){
             return "rgb(49, 51, 63)"
-        }else{
+        } else {
             return "rgb(250, 250, 250)"
         }
-
     };
     var stApp_css = window.parent.document.querySelector("#root > div:nth-child(1) > div > div > div");
     window.onload = function () {
         var mutationObserver = new MutationObserver(function(mutations) {
-                mutations.forEach(function(mutation) {
-                    var bgColor = window.getComputedStyle(stApp_css).backgroundColor.replace("rgb(", "").replace(")", "").split(", ");
-                    var fontColor = rgbReverse(bgColor);
-                    var pTag = window.parent.document.getElementById("myFooter");
-                    pTag.style.color = fontColor;
-                });
-            });
-
-            /**Element**/
-            mutationObserver.observe(stApp_css, {
-                attributes: true,
-                characterData: true,
-                childList: true,
-                subtree: true,
-                attributeOldValue: true,
-                characterDataOldValue: true
+            mutations.forEach(function(mutation) {
+                var bgColor = window.getComputedStyle(stApp_css).backgroundColor.replace("rgb(", "").replace(")", "").split(", ");
+                var fontColor = rgbReverse(bgColor);
+                var pTag = window.parent.document.getElementById("myFooter");
+                if (pTag) { pTag.style.color = fontColor; }
             });
+        });
+        mutationObserver.observe(stApp_css, {
+            attributes: true,
+            characterData: true,
+            childList: true,
+            subtree: true,
+            attributeOldValue: true,
+            characterDataOldValue: true
+        });
     }
     </script>
-    '''
-    # Inject the JavaScript code into the Streamlit app
+    """
     components.html(js_code)
 
 
 def footer():
-    """
-    Display a footer with a custom message and link.
-    """
+    """Display a footer with a custom message and link."""
     myargs = [
         "Made with ❤️ by ",
         link("https://github.com/chrisduvillard", "Chris"),
     ]
     layout(*myargs)
 
 
-def metric_box(title, value):
+def metric_box(title: str, value: str) -> str:
+    """Return an HTML metric card that adapts to light/dark Streamlit themes."""
     return f"""
     <div style="
         padding: 20px;
         border-radius: 15px;
-        background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        background: color-mix(in srgb, currentColor 6%, transparent);
+        box-shadow: 0 2px 8px rgba(128, 128, 128, 0.15);
         text-align: center;
         margin: 10px;
         width: 100%;
         font-family: 'Arial', sans-serif;
-        transition: transform 0.2s ease-in-out;
     ">
         <h4 style="
-            color: #333333;
+            color: inherit;
+            opacity: 0.7;
             margin-bottom: 12px;
-            font-size: 16px;
+            font-size: 14px;
             text-transform: uppercase;
             letter-spacing: 1px;
         ">{title}</h4>
         <p style="
-            font-size: 18px;
+            font-size: 20px;
             font-weight: bold;
-            color: #355C7D;
+            color: inherit;
             margin: 0;
         ">{value}</p>
     </div>