/* ── Dark Mode Overrides ─────────────────────────────────────────────────────── Applied when has class "dark-mode". Uses !important to override Dash inline styles. ──────────────────────────────────────────────────────────────────────────── */ /* Page & section backgrounds */ body.dark-mode, body.dark-mode #_dash-app-content > div { background-color: #0d1117 !important; color: #e6edf3 !important; } /* Tab content wrapper (the f5f5f5 / f0f2f5 divs) */ body.dark-mode .tab-content-area, body.dark-mode [style*="backgroundColor: #f5f5f5"], body.dark-mode [style*="background-color: #f5f5f5"], body.dark-mode [style*="backgroundColor: rgb(245, 245, 245)"], body.dark-mode [style*="backgroundColor: #f0f2f5"], body.dark-mode [style*="background-color: #f0f2f5"] { background-color: #161b22 !important; } /* All white cards, panels, table containers */ body.dark-mode [style*="backgroundColor: white"], body.dark-mode [style*="background-color: white"], body.dark-mode [style*="backgroundColor: rgb(255, 255, 255)"] { background-color: #1c2128 !important; color: #e6edf3 !important; } /* Borders */ body.dark-mode [style*="border: 1px solid #e0e0e0"], body.dark-mode [style*="border: 1px solid #ddd"] { border-color: #30363d !important; } /* Primary text */ body.dark-mode [style*="color: #1a1a1a"], body.dark-mode [style*="color: rgb(26, 26, 26)"] { color: #e6edf3 !important; } /* Secondary/muted text */ body.dark-mode [style*="color: #666"], body.dark-mode [style*="color: #555"], body.dark-mode [style*="color: #888"], body.dark-mode [style*="color: rgb(102, 102, 102)"], body.dark-mode [style*="color: rgb(85, 85, 85)"] { color: #8b949e !important; } /* Labels */ body.dark-mode label { color: #c9d1d9 !important; } /* Headings inside dark-mode */ body.dark-mode h3, body.dark-mode h4, body.dark-mode p { color: #c9d1d9 !important; } /* Keep coloured headings (WPA blue, verdict colours) unchanged */ body.dark-mode [style*="color: #1d4ed8"] { color: #60a5fa !important; } body.dark-mode [style*="color: #00b894"] { color: #00b894 !important; } body.dark-mode [style*="color: #ff9900"] { color: #ff9900 !important; } /* ── Dash Tabs ─────────────────────────────────────────────────────────────── */ body.dark-mode .tab--selected, body.dark-mode [style*="backgroundColor: #1e2a3a"], body.dark-mode [style*="background-color: #1e2a3a"] { background-color: #1e2a3a !important; /* keep header dark */ } body.dark-mode .tab:not(.tab--selected) { background-color: #21262d !important; color: #8b949e !important; border-color: #30363d !important; } /* ── Dropdowns (React-Select) ─────────────────────────────────────────────── */ body.dark-mode .Select-control, body.dark-mode .VirtualizedSelectFocusedOption, body.dark-mode .Select--single > .Select-control { background-color: #21262d !important; border-color: #30363d !important; color: #e6edf3 !important; } body.dark-mode .Select-value-label, body.dark-mode .Select-placeholder, body.dark-mode .Select-input input { color: #e6edf3 !important; background-color: transparent !important; } body.dark-mode .Select-menu-outer { background-color: #21262d !important; border-color: #30363d !important; } body.dark-mode .Select-option { background-color: #21262d !important; color: #e6edf3 !important; } body.dark-mode .Select-option.is-focused { background-color: #2d333b !important; color: #58a6ff !important; } body.dark-mode .Select-option.is-selected { background-color: #1f6feb !important; color: white !important; } body.dark-mode .Select-arrow { border-top-color: #8b949e !important; } /* ── DataTable ─────────────────────────────────────────────────────────────── */ /* Cell backgrounds (overrides style_cell inline styles) */ body.dark-mode .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td { background-color: #1c2128 !important; color: #e6edf3 !important; border-color: #30363d !important; } /* Alternating row tint */ body.dark-mode .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:nth-child(odd) td { background-color: #21262d !important; } /* Header row */ body.dark-mode .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th { background-color: #1e2a3a !important; color: #e6edf3 !important; border-color: #30363d !important; } /* Keep conditional colour bands visible (score coloured cells) */ body.dark-mode .dash-table-container td[style*="background-color: rgb(22, 163, 74)"], body.dark-mode .dash-table-container td[style*="backgroundColor: #16a34a"] { background-color: #16a34a !important; color: white !important; } /* Keep sort arrows visible */ body.dark-mode .column-header--sort span { color: #8b949e !important; } /* Scrollbar (webkit) */ body.dark-mode .dash-table-container ::-webkit-scrollbar { background: #161b22; } body.dark-mode .dash-table-container ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; } /* ── Plotly charts ─────────────────────────────────────────────────────────── */ body.dark-mode .js-plotly-plot .plotly .bg { fill: #1c2128 !important; } body.dark-mode .js-plotly-plot .plotly .gtitle, body.dark-mode .js-plotly-plot .plotly .xtitle, body.dark-mode .js-plotly-plot .plotly .ytitle, body.dark-mode .js-plotly-plot text { fill: #c9d1d9 !important; } body.dark-mode .js-plotly-plot .plotly .gridlayer path, body.dark-mode .js-plotly-plot .plotly .zerolinelayer path { stroke: #30363d !important; } /* chart paper/plot background */ body.dark-mode .js-plotly-plot .plotly .draglayer, body.dark-mode .js-plotly-plot .bg { background-color: #1c2128 !important; } /* ── Toggle button ─────────────────────────────────────────────────────────── */ #theme-toggle { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: #cce8df; font-size: 16px; cursor: pointer; padding: 5px 10px; border-radius: 6px; line-height: 1; transition: background 0.15s; } #theme-toggle:hover { background: rgba(255,255,255,0.18); color: white; } /* Page wrapper — catch the outermost div background */ body.dark-mode > div, body.dark-mode #react-entry-point > div, body.dark-mode #react-entry-point > div > div { background-color: #0d1117 !important; }