fix: Fixed settings UI in dark mode (#282)

When running the native app with dark mode, the settings dialog was not properly showing some of the text.

Author: ctasada

src/stonks_overwatch/templates/components/brokers/ibkr_settings.html

@@ -82,7 +82,6 @@ <h6 class="fw-bold mt-4 mb-2">OAuth Credentials:</h6>
             {% endif %}
         </span>
     </div>
-    <hr class="my-2">
 
     <div class="settings-form-group">
         <label for="ibkr-encryption-key">Private Key (PEM format)</label>
@@ -155,7 +154,6 @@ <h6 class="fw-bold mt-4 mb-2">OAuth Credentials:</h6>
             {% endif %}
         </span>
     </div>
-    <hr class="my-2">
 
     <div class="settings-form-group">
         <label for="ibkr-signature-key">Private Key (PEM format)</label>

src/stonks_overwatch/templates/components/settings_content.html

@@ -17,13 +17,14 @@
     <style>
         /* Set CSS custom properties for theme colors */
         :root {
-            --settings-bg-color: {{ bg_color|default:"#f8f9fa" }};
-            --settings-text-color: {{ text_color|default:"#000000" }};
-            --settings-border-color: {% if is_dark_mode %}#555{% else %}#dee2e6{% endif %};
-            --settings-hover-bg: {% if is_dark_mode %}#4a4a4a{% else %}#f8f9fa{% endif %};
-            --settings-active-bg: {% if is_dark_mode %}#4a5568{% else %}#D0E0FF{% endif %};
-            --settings-form-bg: {% if is_dark_mode %}#4a4a4a{% else %}#fff{% endif %};
-            --settings-form-border: {% if is_dark_mode %}#555{% else %}#dee2e6{% endif %};
+            --settings-bg-color: {{ bg_color }};
+            --settings-text-color: {{ text_color }};
+            --settings-border-color: {{ border_color }};
+            --settings-hover-bg: {{ hover_bg }};
+            --settings-active-bg: {{ active_bg }};
+            --settings-form-bg: {{ form_bg }};
+            --settings-form-border: {{ form_border }};
+            --bs-secondary-color: {{ secondary_color }};
         }
         html, body {
             margin: 0;
@@ -37,13 +38,14 @@
 <style>
     /* Set CSS custom properties for theme colors (fragment mode) - scoped to settings content */
     .settings-content {
-        --settings-bg-color: {{ bg_color|default:"#f8f9fa" }};
-        --settings-text-color: {{ text_color|default:"#000000" }};
-        --settings-border-color: {% if is_dark_mode %}#555{% else %}#dee2e6{% endif %};
-        --settings-hover-bg: {% if is_dark_mode %}#4a4a4a{% else %}#f8f9fa{% endif %};
-        --settings-active-bg: {% if is_dark_mode %}#4a5568{% else %}#D0E0FF{% endif %};
-        --settings-form-bg: {% if is_dark_mode %}#4a4a4a{% else %}#fff{% endif %};
-        --settings-form-border: {% if is_dark_mode %}#555{% else %}#dee2e6{% endif %};
+        --settings-bg-color: {{ bg_color }};
+        --settings-text-color: {{ text_color }};
+        --settings-border-color: {{ border_color }};
+        --settings-hover-bg: {{ hover_bg }};
+        --settings-active-bg: {{ active_bg }};
+        --settings-form-bg: {{ form_bg }};
+        --settings-form-border: {{ form_border }};
+        --bs-secondary-color: {{ secondary_color }};
     }
 </style>
 {% endif %}

src/stonks_overwatch/utils/core/theme.py

@@ -13,18 +13,34 @@ def get_theme_colors(is_dark_mode: bool) -> Dict[str, str]:
         is_dark_mode (bool): Whether dark mode is enabled.
 
     Returns:
-        Dict[str, str]: Dictionary with keys 'bg_color', 'text_color', 'code_bg', 'blockquote_bg'.
+        Dict[str, str]: Dictionary with theme colors for all UI components.
     """
     if is_dark_mode:
         return {
+            # Base colors
             "bg_color": "#3B3B3B",
             "text_color": "#FFFFFF",
             "code_bg": "#696969",
             "blockquote_bg": "#101010",
+            # Settings-specific colors
+            "secondary_color": "#B0B0B0",
+            "border_color": "#555555",
+            "hover_bg": "#4a4a4a",
+            "active_bg": "#4a5568",
+            "form_bg": "#4a4a4a",
+            "form_border": "#555555",
         }
     return {
+        # Base colors
         "bg_color": "#FFFFFF",
         "text_color": "#000000",
         "code_bg": "#F5F5F5",
         "blockquote_bg": "#F0F0F0",
+        # Settings-specific colors
+        "secondary_color": "#6c757d",
+        "border_color": "#dee2e6",
+        "hover_bg": "#f8f9fa",
+        "active_bg": "#D0E0FF",
+        "form_bg": "#FFFFFF",
+        "form_border": "#dee2e6",
     }

src/stonks_overwatch/views/settings.py

@@ -56,8 +56,8 @@ def get(self, request) -> HttpResponse:
             "ibkr_config": ibkr_config,
             "is_dark_mode": is_dark_mode,
             "is_standalone": not is_ajax_request,  # Wrap in HTML structure for non-AJAX requests
-            "bg_color": theme_colors["bg_color"],
-            "text_color": theme_colors["text_color"],
+            # Pass all theme colors from theme.py
+            **theme_colors,
         }
 
         # Always return the content component (it handles standalone vs fragment internally)