| """Dark theme CSS styles for the financial dashboard.""" | |
| DARK_THEME_CSS = """ | |
| <style> | |
| :root { | |
| --primary-color: #0066ff; | |
| --secondary-color: #1f77e2; | |
| --success-color: #00d084; | |
| --danger-color: #ff3838; | |
| --warning-color: #ffa500; | |
| --bg-dark: #0e1117; | |
| --bg-darker: #010409; | |
| --text-primary: #e6edf3; | |
| --text-secondary: #8b949e; | |
| --border-color: #30363d; | |
| } | |
| /* Main background */ | |
| html, body { | |
| background-color: var(--bg-darker) !important; | |
| color: var(--text-primary) !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| /* Streamlit containers */ | |
| .main, [data-testid="stAppViewContainer"] { | |
| background-color: var(--bg-dark) !important; | |
| } | |
| /* Hide header and footer */ | |
| [data-testid="stHeader"] { | |
| background-color: var(--bg-dark) !important; | |
| } | |
| [data-testid="stToolbar"] { | |
| background-color: var(--bg-dark) !important; | |
| } | |
| .stApp { | |
| background-color: var(--bg-dark) !important; | |
| } | |
| [data-testid="stDecoration"] { | |
| background-color: var(--bg-dark) !important; | |
| } | |
| [data-testid="stSidebar"] { | |
| background-color: #0d1117 !important; | |
| border-right: 1px solid var(--border-color); | |
| } | |
| /* Text colors */ | |
| p, span, div, h1, h2, h3, h4, h5, h6, label, li, a { | |
| color: var(--text-primary) !important; | |
| } | |
| /* Headings */ | |
| h1, h2, h3 { | |
| color: var(--text-primary) !important; | |
| font-weight: 700 !important; | |
| } | |
| /* Links */ | |
| a { | |
| color: var(--primary-color) !important; | |
| text-decoration: none !important; | |
| } | |
| a:hover { | |
| color: var(--secondary-color) !important; | |
| text-decoration: underline !important; | |
| } | |
| /* Labels and text inputs */ | |
| label { | |
| color: var(--text-primary) !important; | |
| font-weight: 500 !important; | |
| } | |
| /* Paragraph text */ | |
| p { | |
| color: var(--text-primary) !important; | |
| line-height: 1.6 !important; | |
| } | |
| /* Metric card styling */ | |
| [data-testid="metric-container"] { | |
| background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important; | |
| border: 1px solid var(--border-color) !important; | |
| border-radius: 10px !important; | |
| padding: 1.5rem !important; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important; | |
| } | |
| .metric-card { | |
| background: linear-gradient(135deg, #1f2937 0%, #111827 100%); | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| border: 1px solid var(--border-color); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); | |
| } | |
| .metric-value { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| margin: 0.5rem 0; | |
| } | |
| .metric-label { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .section-title { | |
| color: var(--text-primary); | |
| border-bottom: 2px solid var(--primary-color); | |
| padding-bottom: 1rem; | |
| margin-top: 2rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Button styling */ | |
| .stButton > button { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important; | |
| color: #ffffff !important; | |
| border: none !important; | |
| border-radius: 8px !important; | |
| padding: 0.75rem 2rem !important; | |
| font-weight: 700 !important; | |
| transition: all 0.3s ease !important; | |
| box-shadow: 0 4px 6px rgba(0, 102, 255, 0.2) !important; | |
| } | |
| .stButton > button:hover { | |
| box-shadow: 0 8px 16px rgba(0, 102, 255, 0.4) !important; | |
| transform: translateY(-2px) !important; | |
| } | |
| .stButton > button:active { | |
| transform: translateY(0) !important; | |
| } | |
| /* Input fields */ | |
| [data-testid="stTextInput"] input, | |
| [data-testid="stSlider"] input { | |
| background-color: #161b22 !important; | |
| border: 1px solid var(--border-color) !important; | |
| color: var(--text-primary) !important; | |
| border-radius: 6px !important; | |
| } | |
| [data-testid="stTextInput"] input::placeholder { | |
| color: var(--text-secondary) !important; | |
| } | |
| /* Slider */ | |
| [data-testid="stSlider"] { | |
| color: var(--primary-color) !important; | |
| } | |
| /* Tabs */ | |
| [data-testid="stTabs"] [role="tablist"] { | |
| background-color: transparent !important; | |
| border-bottom: 2px solid var(--border-color) !important; | |
| } | |
| [data-testid="stTabs"] [role="tab"] { | |
| color: var(--text-secondary) !important; | |
| background-color: transparent !important; | |
| border: none !important; | |
| padding: 1rem 1.5rem !important; | |
| } | |
| [data-testid="stTabs"] [role="tab"][aria-selected="true"] { | |
| color: var(--primary-color) !important; | |
| border-bottom: 3px solid var(--primary-color) !important; | |
| } | |
| /* Dataframe */ | |
| [data-testid="dataframe"] { | |
| background-color: #0d1117 !important; | |
| } | |
| .dataframe { | |
| background-color: #0d1117 !important; | |
| color: var(--text-primary) !important; | |
| } | |
| /* Info/Error boxes */ | |
| [data-testid="stInfo"], | |
| [data-testid="stSuccess"], | |
| [data-testid="stWarning"], | |
| [data-testid="stError"] { | |
| background-color: rgba(0, 102, 255, 0.1) !important; | |
| border-left: 4px solid var(--primary-color) !important; | |
| border-radius: 6px !important; | |
| } | |
| [data-testid="stError"] { | |
| background-color: rgba(255, 56, 56, 0.1) !important; | |
| border-left-color: var(--danger-color) !important; | |
| } | |
| /* Markdown */ | |
| [data-testid="stMarkdown"] { | |
| color: var(--text-primary) !important; | |
| } | |
| /* Expander */ | |
| [data-testid="stExpander"] { | |
| background-color: #161b22 !important; | |
| border: 1px solid var(--border-color) !important; | |
| border-radius: 6px !important; | |
| } | |
| /* Metric text styling */ | |
| [data-testid="metric-container"] p { | |
| color: var(--text-primary) !important; | |
| } | |
| [data-testid="metric-container"] [data-testid="stMetricValue"] { | |
| color: var(--primary-color) !important; | |
| font-weight: 700 !important; | |
| } | |
| /* Slider label color */ | |
| [data-testid="stSlider"] label { | |
| color: var(--text-primary) !important; | |
| } | |
| /* Text input label */ | |
| [data-testid="stTextInput"] label { | |
| color: var(--text-primary) !important; | |
| } | |
| /* Write and markdown text */ | |
| [data-testid="stMarkdownContainer"] p { | |
| color: var(--text-primary) !important; | |
| } | |
| [data-testid="stMarkdownContainer"] strong { | |
| color: var(--primary-color) !important; | |
| font-weight: 600 !important; | |
| } | |
| /* Spinner text */ | |
| [data-testid="stSpinner"] { | |
| color: var(--primary-color) !important; | |
| } | |
| /* Column separators */ | |
| hr { | |
| border-color: var(--border-color) !important; | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0d1117; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border-color); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-color); | |
| } | |
| /* Selection highlighting */ | |
| ::selection { | |
| background-color: var(--primary-color); | |
| color: #fff; | |
| } | |
| /* Fix all white backgrounds */ | |
| .stApp > header { | |
| background-color: var(--bg-dark) !important; | |
| } | |
| .stApp > header::before { | |
| background: none !important; | |
| } | |
| .stApp > header::after { | |
| background: none !important; | |
| } | |
| /* Streamlit elements background */ | |
| [data-testid="stVerticalBlock"] { | |
| background-color: transparent !important; | |
| } | |
| [data-testid="stVerticalBlockBorderWrapper"] { | |
| background-color: transparent !important; | |
| } | |
| /* Remove white decorative elements */ | |
| .st-emotion-cache-1gvbgyg { | |
| background-color: var(--bg-dark) !important; | |
| } | |
| .st-emotion-cache-1jicfl2 { | |
| background-color: var(--bg-dark) !important; | |
| } | |
| /* Ensure all root divs are dark */ | |
| div[class*="st-"] { | |
| background-color: transparent !important; | |
| } | |
| /* Modal and overlay backgrounds */ | |
| .stModal { | |
| background-color: var(--bg-dark) !important; | |
| } | |
| /* Alert boxes background */ | |
| .stAlert { | |
| background-color: rgba(0, 102, 255, 0.1) !important; | |
| } | |
| </style> | |
| """ | |