:root { --bg-color: #f8f9fa; --text-color: #212529; --card-bg-color: #ffffff; --border-color: #dee2e6; --primary-color: #0d6efd; --sidebar-bg-color: #343a40; --sidebar-text-color: #ced4da; --sidebar-hover-bg-color: rgba(255, 255, 255, 0.1); --sidebar-active-bg-color: rgba(255, 255, 255, 0.2); --link-color: #0d6efd; --link-hover-color: #0a58ca; } html[data-theme='dark'] { --bg-color: #1c1c1e; --text-color: #e0e0e0; --card-bg-color: #2c2c2e; --border-color: #444444; --primary-color: #4da6ff; --sidebar-bg-color: #232325; --sidebar-text-color: #b0b0b0; --sidebar-hover-bg-color: rgba(255, 255, 255, 0.08); --sidebar-active-bg-color: rgba(255, 255, 255, 0.15); --link-color: #4da6ff; --link-hover-color: #87c3ff; --navbar-bg-color: #343a40; --btn-secondary-bg: #495057; --btn-secondary-color: #f8f9fa; } body { background-color: var(--bg-color); color: var(--text-color); } .card { background-color: var(--card-bg-color); border-color: var(--border-color); } .card-header { background-color: var(--card-bg-color); border-bottom: 1px solid var(--border-color); } .table { --bs-table-bg: var(--card-bg-color); --bs-table-border-color: var(--border-color); --bs-table-color: var(--text-color); --bs-table-striped-bg: rgba(0, 0, 0, 0.02); } html[data-theme='dark'] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255, 255, 255, 0.03); } .form-control, .form-select { background-color: var(--bg-color); color: var(--text-color); border-color: var(--border-color); } .form-control:focus, .form-select:focus { background-color: var(--bg-color); color: var(--text-color); } .input-group-text { background-color: var(--bg-color); color: var(--text-color); border-color: var(--border-color); } .sidebar { background-color: var(--sidebar-bg-color); } .sidebar .nav-link { color: var(--sidebar-text-color); } .sidebar .nav-link:hover { background-color: var(--sidebar-hover-bg-color); color: #fff; } .sidebar .nav-link.active { background-color: var(--sidebar-active-bg-color); color: #fff; } html[data-theme='dark'] .navbar.bg-primary { background-color: var(--navbar-bg-color) !important; } html[data-theme='dark'] .btn-light { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-color); border-color: var(--border-color); } html[data-theme='dark'] .form-control { background-color: var(--card-bg-color) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } html[data-theme='dark'] .form-control::placeholder { color: #6c757d; } html[data-theme='dark'] .alert-success { background-color: #1a3e29; color: #a3d9b8; border-color: #2c6846; } html[data-theme='dark'] .alert-danger { background-color: #4f2125; color: #f5c2c7; border-color: #8d3d44; } html[data-theme='dark'] .alert-info { background-color: #1c3a4f; color: #b8d4e9; border-color: #2f658b; } html[data-theme='dark'] .badge.bg-light { background-color: var(--btn-secondary-bg) !important; color: var(--btn-secondary-color) !important; } html[data-theme='dark'] #loading-overlay { background-color: rgba(0, 0, 0, 0.7); } html[data-theme='dark'] .modal-content { background-color: var(--card-bg-color); color: var(--text-color); } html[data-theme='dark'] .modal-header { border-bottom-color: var(--border-color); } html[data-theme='dark'] .modal-footer { border-top-color: var(--border-color); } html[data-theme='dark'] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Dark mode styles for finance portal */ html[data-theme='dark'] .finance-portal-container { background-color: var(--bg-color); } html[data-theme='dark'] .portal-sidebar, html[data-theme='dark'] .portal-news, html[data-theme='dark'] .portal-hotspot, html[data-theme='dark'] .portal-footer { background-color: var(--card-bg-color); box-shadow: 0 2px 5px rgba(0,0,0,0.3); } html[data-theme='dark'] .sidebar-header, html[data-theme='dark'] .news-header, html[data-theme='dark'] .hotspot-header { border-bottom-color: var(--border-color); background-color: var(--card-bg-color); } html[data-theme='dark'] .sidebar-header h5, html[data-theme='dark'] .news-header h5, html[data-theme='dark'] .hotspot-header h5, html[data-theme='dark'] .hotspot-title, html[data-theme='dark'] .sidebar-nav a, html[data-theme='dark'] .group-title, html[data-theme='dark'] .status-item, html[data-theme='dark'] .current-time, html[data-theme='dark'] .news-content, html[data-theme='dark'] .ticker-item, html[data-theme='dark'] .time-label, html[data-theme='dark'] .time-date { color: var(--text-color); } html[data-theme='dark'] .sidebar-nav a:hover { background-color: var(--sidebar-hover-bg-color); } html[data-theme='dark'] .time-point:before { background-color: var(--primary-color); } html[data-theme='dark'] .time-point:after { background-color: var(--border-color); } html[data-theme='dark'] .news-items { background-color: #3a3a3c; } html[data-theme='dark'] .news-item, html[data-theme='dark'] .hotspot-item, html[data-theme='dark'] .market-status { border-bottom-color: var(--border-color); } html[data-theme='dark'] .hotspot-rank { background-color: #495057; color: var(--text-color); } html[data-theme='dark'] .hotspot-rank.rank-top { background-color: #fb6340; color: #fff; } html[data-theme='dark'] .ticker-news { background-color: #3a3a3c; } /* Dark mode fixes for custom styles */ html[data-theme='dark'] .analysis-para, html[data-theme='dark'] .analysis-para strong, html[data-theme='dark'] .analysis-para b { color: var(--text-color); } html[data-theme='dark'] .keyword { color: #58a6ff; /* Lighter blue */ } html[data-theme='dark'] .term { color: #ff85b3; /* Lighter pink */ } html[data-theme='dark'] .price { color: #7ee787; /* Lighter green */ background: #2d332d; } html[data-theme='dark'] .date { color: #8b949e; /* Lighter grey */ } /* Ensure card headers and titles are readable */ html[data-theme='dark'] .card-header, html[data-theme='dark'] .card-title, html[data-theme='dark'] h1, html[data-theme='dark'] h2, html[data-theme='dark'] h3, html[data-theme='dark'] h4, html[data-theme='dark'] h5, html[data-theme='dark'] h6, html[data-theme='dark'] .text-dark, html[data-theme='dark'] [class*="text-"] { color: var(--text-color) !important; } html[data-theme='dark'] .text-muted { color: #8b949e !important; } /* ApexCharts dark theme overrides */ html[data-theme='dark'] .apexcharts-tooltip, html[data-theme='dark'] .apexcharts-xaxistooltip, html[data-theme='dark'] .apexcharts-yaxistooltip { background: #3c3c3e !important; border-color: #545456 !important; color: var(--text-color) !important; } html[data-theme='dark'] .apexcharts-tooltip-title { background: #4a4a4c !important; border-bottom-color: #545456 !important; color: var(--text-color) !important; } html[data-theme='dark'] .apexcharts-text, html[data-theme='dark'] .apexcharts-xaxis-label, html[data-theme='dark'] .apexcharts-yaxis-label, html[data-theme='dark'] .apexcharts-datalabel { fill: var(--text-color); } html[data-theme='dark'] .apexcharts-radar-series path { stroke-opacity: 0.5; } html[data-theme='dark'] .apexcharts-radar-series .apexcharts-datalabels text { fill: #ffffff !important; font-weight: bold; } /* --- MORE DARK MODE FIXES --- */ /* Brighter navbar text */ html[data-theme='dark'] .navbar-dark .navbar-nav .nav-link, html[data-theme='dark'] .navbar-dark .navbar-brand { color: var(--text-color); } /* General text inside cards */ html[data-theme='dark'] .card-body, html[data-theme='dark'] .card-title, html[data-theme='dark'] .card-subtitle, html[data-theme='dark'] .card-text, html[data-theme='dark'] .list-group-item { color: var(--text-color) !important; } html[data-theme='dark'] .list-group-item { background-color: var(--card-bg-color); border-color: var(--border-color); } /* Fix for colored text like stock price changes */ html[data-theme='dark'] .text-success { color: #2dce89 !important; } html[data-theme='dark'] .text-danger { color: #f5365c !important; } /* Specific fix for the main price display */ html[data-theme='dark'] h2.text-success, html[data-theme='dark'] .display-4 { color: #2dce89 !important; } /* Labels in cards (e.g., "今开", "最高") */ html[data-theme='dark'] .small, html[data-theme='dark'] small { color: #8b949e !important; } /* Make AI analysis keywords even brighter */ html[data-theme='dark'] .keyword { color: #79c0ff; } html[data-theme='dark'] .price { color: #8eff97; background: #223c24; }