| """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> |
| """ |
|
|
