/** * SDScreener — Dark Theme Overrides * Targeted overrides for hardcoded light-mode colors. * Applied when data-theme="dark" is set on . * data-bs-theme="dark" handles Bootstrap native components (inputs, selects, dropdowns). */ /* ============================================================================ BODY ============================================================================ */ [data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); } /* ============================================================================ NAVBAR ============================================================================ */ [data-theme="dark"] .navbar { background: var(--color-bg-elevated) !important; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); } /* Swap navbar logo to white version in dark mode */ [data-theme="dark"] .navbar-brand img { content: url('/static/images/logo-wowate-white.svg'); } [data-theme="dark"] .navbar-nav .nav-link { color: var(--color-text) !important; } [data-theme="dark"] .navbar-nav .nav-link:hover, [data-theme="dark"] .navbar-nav .nav-link.active { color: var(--wowate-primary) !important; } [data-theme="dark"] .user-menu-toggle { background: rgba(15, 182, 204, 0.08); color: var(--color-text) !important; } [data-theme="dark"] .user-menu-toggle:hover { background: rgba(15, 182, 204, 0.15); color: var(--wowate-primary) !important; } /* Navbar toggler icon (Bootstrap doesn't auto-invert in non-bs-theme mode) */ [data-theme="dark"] .navbar-toggler-icon { filter: invert(1); } /* User dropdown */ [data-theme="dark"] .user-dropdown-menu { background: var(--color-bg-elevated); border: 1px solid var(--color-border); } [data-theme="dark"] .user-dropdown-menu .dropdown-header { background: rgba(15, 182, 204, 0.06) !important; border-bottom-color: var(--color-border) !important; } [data-theme="dark"] .user-dropdown-menu .dropdown-item { color: var(--color-text-muted); } [data-theme="dark"] .user-dropdown-menu .dropdown-item:hover { background: rgba(15, 182, 204, 0.1); color: var(--color-text); } [data-theme="dark"] .user-dropdown-menu .dropdown-item.active, [data-theme="dark"] .user-dropdown-menu .dropdown-item.language-item-active { background: rgba(15, 182, 204, 0.12); color: var(--wowate-primary); } [data-theme="dark"] .dropdown-divider { border-color: var(--color-border); } [data-theme="dark"] .dropdown-header { color: var(--wowate-primary) !important; } /* User info in dropdown */ [data-theme="dark"] .user-info .fw-bold { color: var(--color-text) !important; } [data-theme="dark"] .user-info .text-muted { color: var(--color-text-muted) !important; } /* ============================================================================ ADMIN TABS (admin.css — .nav-tabs hardcoded light colors) ============================================================================ */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--color-border); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--color-text) !important; background-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--wowate-primary) !important; border-bottom-color: var(--wowate-primary); background-color: rgba(15, 182, 204, 0.06); } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--wowate-primary) !important; border-bottom-color: var(--wowate-primary); background-color: transparent; } /* ============================================================================ PAGE HEADER (layout.css + common.css) ============================================================================ */ [data-theme="dark"] .page-header { background: var(--color-bg-elevated); border-color: var(--color-border); } [data-theme="dark"] .page-header h1 { color: var(--color-text); text-shadow: none; } [data-theme="dark"] .page-header .lead, [data-theme="dark"] .page-header .subtitle { color: var(--color-text-muted); } /* ============================================================================ CARDS (components.css + common.css) ============================================================================ */ [data-theme="dark"] .card, [data-theme="dark"] .card-base { background: var(--color-bg-elevated); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .card-header { background: var(--color-bg-surface) !important; border-bottom-color: var(--color-border) !important; } [data-theme="dark"] .card h2, [data-theme="dark"] .card h3, [data-theme="dark"] .card-title { color: var(--color-text); } [data-theme="dark"] .card-subtitle { color: var(--color-text-muted); } [data-theme="dark"] .card-header-base { border-bottom-color: var(--color-border); } [data-theme="dark"] .card-flag { border-color: var(--color-bg-surface); } /* ============================================================================ MARKET CARDS & GRIDS (common.css) ============================================================================ */ [data-theme="dark"] .markets-grid { background: var(--color-bg-elevated); border-color: var(--color-border); } [data-theme="dark"] .market-card { background: var(--color-bg-elevated); } [data-theme="dark"] .market-flag { border-color: var(--color-bg-surface); } [data-theme="dark"] .market-title h3 { color: var(--color-text); } [data-theme="dark"] .market-code, [data-theme="dark"] .market-title .last-update { color: var(--color-text-muted); } [data-theme="dark"] .info-row { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .info-label { color: var(--color-text-muted); } [data-theme="dark"] .info-value { color: var(--color-text); } /* Update status badges */ [data-theme="dark"] .update-status.updated { background: rgba(46, 204, 113, 0.15); color: var(--color-positive); } [data-theme="dark"] .update-status.outdated { background: rgba(255, 95, 86, 0.15); color: var(--color-negative); } [data-theme="dark"] .update-status.unknown { background: rgba(255, 255, 255, 0.08); color: var(--color-text-subtle); } /* ============================================================================ DASHBOARD PANELS (dashboard.css) ============================================================================ */ [data-theme="dark"] .dashboard-filters, [data-theme="dark"] .dashboard-results { background: var(--color-bg-elevated); } [data-theme="dark"] .filter-group label { color: var(--color-text-muted); } [data-theme="dark"] .results-header { border-bottom-color: var(--color-border); } [data-theme="dark"] .loading-content { background: var(--color-bg-elevated); color: var(--color-text); } /* ============================================================================ PROGRESS SECTIONS (common.css) ============================================================================ */ [data-theme="dark"] .overall-progress { background: var(--color-bg-elevated); border-color: var(--color-border); } [data-theme="dark"] .progress-header h2 { color: var(--color-text); } [data-theme="dark"] .progress-header .subtitle, [data-theme="dark"] .stat-label, [data-theme="dark"] .progress-details, [data-theme="dark"] .form-text { color: var(--color-text-muted); } [data-theme="dark"] .overall-progress-bar .progress { background: var(--color-bg-surface); } /* ============================================================================ MODALS (common.css + modals.css) ============================================================================ */ [data-theme="dark"] .modal-content { background-color: var(--color-bg-elevated); color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .modal-footer { border-top-color: var(--color-border); } [data-theme="dark"] .modal-body input { background: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .modal-body input:focus { background: var(--color-bg-surface); border-color: var(--wowate-primary); color: var(--color-text); } [data-theme="dark"] .warning-box { background: rgba(255, 189, 46, 0.08); border-color: rgba(255, 189, 46, 0.3); } [data-theme="dark"] .warning-box li { color: var(--color-warning-bg); } [data-theme="dark"] .info-box { background: rgba(15, 182, 204, 0.08); border-color: var(--color-border); } [data-theme="dark"] .info-box p, [data-theme="dark"] .info-box li { color: var(--color-text-muted); } /* ============================================================================ FORM ELEMENTS (Bootstrap 5.3 handles most via data-bs-theme; these cover custom styles that override Bootstrap) ============================================================================ */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--color-bg-surface); color: var(--color-text); border-color: var(--wowate-primary); box-shadow: 0 0 0 0.2rem rgba(15, 182, 204, 0.2); } [data-theme="dark"] .form-control::placeholder { color: var(--color-text-subtle); } /* ============================================================================ CODE ELEMENTS ============================================================================ */ [data-theme="dark"] code { background-color: var(--color-bg-surface); color: var(--wowate-primary); border: 1px solid var(--color-border); } /* ============================================================================ TEXT UTILITIES ============================================================================ */ [data-theme="dark"] .text-muted { color: var(--color-text-muted) !important; } [data-theme="dark"] .text-secondary { color: var(--color-text-subtle) !important; } [data-theme="dark"] #app-version-display { color: var(--color-text-muted); } /* ============================================================================ THEME SELECTOR BUTTONS (in user dropdown) ============================================================================ */ .theme-btn { font-size: 0.75rem; padding: 0.35rem 0.5rem; border: 1px solid var(--color-border, #E2E6EA); background: transparent; color: var(--color-text-muted, #6C757D); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .theme-btn:hover { background: rgba(15, 182, 204, 0.1); border-color: var(--wowate-primary); color: var(--wowate-primary); } .theme-btn.active { background: var(--wowate-primary); border-color: var(--wowate-primary); color: white; } [data-theme="dark"] .theme-btn { border-color: var(--color-border); color: var(--color-text-muted); } [data-theme="dark"] .theme-btn:hover { background: rgba(15, 182, 204, 0.15); border-color: var(--wowate-primary); color: var(--wowate-primary); }