Update figure factories for dark theme support #32

New Issue

lmiranda · 2026-01-15T06:51:45Z

lmiranda commented

2026-01-15 06:51:45 +00:00

Description

Update Plotly figure factories to work well with dark backgrounds. This includes transparent backgrounds, dark-friendly map styles, and theme-aware text colors.

Files to Modify

portfolio_app/figures/choropleth.py
portfolio_app/figures/time_series.py
portfolio_app/figures/summary_cards.py

Changes Required

1. choropleth.py

Update Default Map Style

# Change default from carto-positron to carto-darkmatter
def create_choropleth_figure(
    ...,
    map_style: str = "carto-darkmatter",  # Changed from carto-positron
    ...
):

Add Transparent Backgrounds

fig.update_layout(
    ...,
    paper_bgcolor="rgba(0,0,0,0)",
    plot_bgcolor="rgba(0,0,0,0)",
    font_color="#c9c9c9",  # Light gray for dark backgrounds
)

Update Annotation Colors

fig.add_annotation(
    ...,
    font={"size": 14, "color": "#c9c9c9"},  # Changed from "gray"
)

2. time_series.py

Add Transparent Backgrounds to All Functions

For create_price_time_series:

fig.update_layout(
    ...,
    paper_bgcolor="rgba(0,0,0,0)",
    plot_bgcolor="rgba(0,0,0,0)",
    font_color="#c9c9c9",
    xaxis=dict(gridcolor="rgba(255,255,255,0.1)"),
    yaxis=dict(gridcolor="rgba(255,255,255,0.1)"),
)

For create_volume_time_series:

fig.update_layout(
    ...,
    paper_bgcolor="rgba(0,0,0,0)",
    plot_bgcolor="rgba(0,0,0,0)",
    font_color="#c9c9c9",
)

For create_market_comparison_chart:

fig.update_layout(
    ...,
    paper_bgcolor="rgba(0,0,0,0)",
    plot_bgcolor="rgba(0,0,0,0)",
    font_color="#c9c9c9",
    legend_font_color="#c9c9c9",
)

3. summary_cards.py

Already has transparent background (paper_bgcolor="rgba(0,0,0,0)"), but needs font color update:

fig.update_layout(
    ...,
    paper_bgcolor="rgba(0,0,0,0)",
    font={"family": "Inter, sans-serif", "color": "#c9c9c9"},
)

Color Reference

Element	Dark Theme Color
Text	#c9c9c9 (light gray)
Grid lines	rgba(255,255,255,0.1)
Background	rgba(0,0,0,0) (transparent)
Axis lines	rgba(255,255,255,0.2)

Optional: Theme-Aware Parameter

Consider adding a dark_mode parameter to figure factories for future light theme support:

def create_choropleth_figure(
    ...,
    dark_mode: bool = True,
):
    map_style = "carto-darkmatter" if dark_mode else "carto-positron"
    font_color = "#c9c9c9" if dark_mode else "#333333"
    ...

Acceptance Criteria

All charts readable on dark background
Maps use carto-darkmatter style
No white/light backgrounds visible
Text is light gray for readability
Grid lines are subtle (low opacity)
Charts maintain visual hierarchy
KPI indicator cards look good on dark

Part of Sprint 7 (#27)

## Description Update Plotly figure factories to work well with dark backgrounds. This includes transparent backgrounds, dark-friendly map styles, and theme-aware text colors. ## Files to Modify - `portfolio_app/figures/choropleth.py` - `portfolio_app/figures/time_series.py` - `portfolio_app/figures/summary_cards.py` ## Changes Required ### 1. choropleth.py #### Update Default Map Style ```python # Change default from carto-positron to carto-darkmatter def create_choropleth_figure( ..., map_style: str = "carto-darkmatter", # Changed from carto-positron ... ): ``` #### Add Transparent Backgrounds ```python fig.update_layout( ..., paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)", font_color="#c9c9c9", # Light gray for dark backgrounds ) ``` #### Update Annotation Colors ```python fig.add_annotation( ..., font={"size": 14, "color": "#c9c9c9"}, # Changed from "gray" ) ``` ### 2. time_series.py #### Add Transparent Backgrounds to All Functions For `create_price_time_series`: ```python fig.update_layout( ..., paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)", font_color="#c9c9c9", xaxis=dict(gridcolor="rgba(255,255,255,0.1)"), yaxis=dict(gridcolor="rgba(255,255,255,0.1)"), ) ``` For `create_volume_time_series`: ```python fig.update_layout( ..., paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)", font_color="#c9c9c9", ) ``` For `create_market_comparison_chart`: ```python fig.update_layout( ..., paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)", font_color="#c9c9c9", legend_font_color="#c9c9c9", ) ``` ### 3. summary_cards.py Already has transparent background (`paper_bgcolor="rgba(0,0,0,0)"`), but needs font color update: ```python fig.update_layout( ..., paper_bgcolor="rgba(0,0,0,0)", font={"family": "Inter, sans-serif", "color": "#c9c9c9"}, ) ``` ## Color Reference | Element | Dark Theme Color | |---------|------------------| | Text | #c9c9c9 (light gray) | | Grid lines | rgba(255,255,255,0.1) | | Background | rgba(0,0,0,0) (transparent) | | Axis lines | rgba(255,255,255,0.2) | ## Optional: Theme-Aware Parameter Consider adding a `dark_mode` parameter to figure factories for future light theme support: ```python def create_choropleth_figure( ..., dark_mode: bool = True, ): map_style = "carto-darkmatter" if dark_mode else "carto-positron" font_color = "#c9c9c9" if dark_mode else "#333333" ... ``` ## Acceptance Criteria - [ ] All charts readable on dark background - [ ] Maps use carto-darkmatter style - [ ] No white/light backgrounds visible - [ ] Text is light gray for readability - [ ] Grid lines are subtle (low opacity) - [ ] Charts maintain visual hierarchy - [ ] KPI indicator cards look good on dark ## Part of Sprint 7 (#27)

lmiranda referenced this issue

2026-01-15 06:52:05 +00:00

Sprint 7: Navigation & Theme Modernization #27

lmiranda closed this issue

2026-01-15 19:16:03 +00:00

lmiranda added this to the Launch: Host, Bio and Toronto House Market Analysis project 2026-01-16 14:51:54 +00:00

lmiranda self-assigned this 2026-01-16 14:51:59 +00:00

lmiranda moved this to Done in Launch: Host, Bio and Toronto House Market Analysis on 2026-01-16 14:52:17 +00:00

Sign in to join this conversation.