/* * ================================================================ * MEC GLOBAL DARK MODE ENGINE * Version: 2.0 — Advanced Algorithm * Author: Auto-generated by theme refactor * ================================================================ * * ALGORITHM: * 1. Use [data-theme="dark"] on as the root scope trigger * 2. Use broad element selectors to catch inline styles * 3. Use !important ONLY on background/color so inline styles are * overridden, while preserving gradients on hero banners * 4. Preserve intentional dark-on-light elements with allow-list * 5. Scope all rules narrowly so light mode is 100% unaffected * ================================================================ */ /* ── Dark Mode Color Palette ──────────────────────────────────── */ [data-theme="dark"] { --bg-base: #0f172a; /* Page background — deep navy */ --bg-card: #1e293b; /* Card/panel surface */ --bg-elevated: #263548; /* Inputs, dropdowns, hover states */ --border: #334155; /* Subtle borders */ --text-primary: #f1f5f9; /* Headings, main text */ --text-muted: #94a3b8; /* Sub-labels, dates, meta text */ --text-faint: #64748b; /* Placeholder, disabled text */ --primary: #3b82f6; /* Blue accent */ --primary-dk: #60a5fa; /* Lighter blue for dark bg */ } /* ================================================================ LAYER 1: STRUCTURAL CONTAINERS These are the most common "light card" offenders ================================================================ */ [data-theme="dark"] body { background: var(--bg-base) !important; color: var(--text-primary) !important; } /* All major layout sections */ [data-theme="dark"] main, [data-theme="dark"] section, [data-theme="dark"] article, [data-theme="dark"] aside, [data-theme="dark"] .content-area, [data-theme="dark"] .main-content, [data-theme="dark"] .main-wrapper, [data-theme="dark"] .app { background: var(--bg-base) !important; } /* ================================================================ LAYER 2: CARD SURFACES The most common white-background components ================================================================ */ [data-theme="dark"] .card, [data-theme="dark"] .test-card, [data-theme="dark"] .feed-section, [data-theme="dark"] .feed-post, [data-theme="dark"] .news-card, [data-theme="dark"] .discuss-card, [data-theme="dark"] .event-card, [data-theme="dark"] .quick-link-item, [data-theme="dark"] .ranking-item, [data-theme="dark"] .right-sidebar, [data-theme="dark"] .right-card, [data-theme="dark"] .result-card, [data-theme="dark"] .question-card, [data-theme="dark"] .option-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .info-card, [data-theme="dark"] .blog-card, [data-theme="dark"] .post-card, [data-theme="dark"] .scholarship-card, [data-theme="dark"] .category-card, [data-theme="dark"] .filter-section, [data-theme="dark"] .subject-list, [data-theme="dark"] .study-card, [data-theme="dark"] .subject-panel, [data-theme="dark"] .subj-list, [data-theme="dark"] .qs-panel, [data-theme="dark"] .mobile-subj-panel, [data-theme="dark"] .mobile-subj-toggle, [data-theme="dark"] .tab-content, [data-theme="dark"] .panel, [data-theme="dark"] .modal-content, [data-theme="dark"] .modal-box, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .flyout-menu, [data-theme="dark"] .topic-chip-list, [data-theme="dark"] .tag, [data-theme="dark"] .badge { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* ================================================================ LAYER 3: TEXT COLORS Override hardcoded dark text that's invisible on dark backgrounds ================================================================ */ [data-theme="dark"] p, [data-theme="dark"] span:not([class*="btn"]):not([class*="badge"]):not([class*="tag"]):not([class*="chip"]), [data-theme="dark"] label, [data-theme="dark"] li, [data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] caption, [data-theme="dark"] figcaption, [data-theme="dark"] dt, [data-theme="dark"] dd, [data-theme="dark"] blockquote { color: var(--text-primary); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text-primary) !important; } /* Named text utility classes */ [data-theme="dark"] .section-title, [data-theme="dark"] .card-title, [data-theme="dark"] .post-title, [data-theme="dark"] .article-title, [data-theme="dark"] .blog-title, [data-theme="dark"] .test-card__name, [data-theme="dark"] .news-card__title, [data-theme="dark"] .discuss-card__question, [data-theme="dark"] .event-card__title, [data-theme="dark"] .events-title, [data-theme="dark"] .event-card__day, [data-theme="dark"] .feed-header__title, [data-theme="dark"] .quick-link-item__text, [data-theme="dark"] .feed-post__author-name, [data-theme="dark"] .feed-post__title, [data-theme="dark"] .stat-value, [data-theme="dark"] .subj-name, [data-theme="dark"] .subject-name, [data-theme="dark"] .question-text, [data-theme="dark"] .answer-text, [data-theme="dark"] .result-title, [data-theme="dark"] .ranking-name { color: var(--text-primary) !important; } [data-theme="dark"] .section-menu, [data-theme="dark"] .feed-post__time, [data-theme="dark"] .feed-post__snippet, [data-theme="dark"] .feed-post__stat, [data-theme="dark"] .stat-label, [data-theme="dark"] .test-card__desc, [data-theme="dark"] .event-card__month, [data-theme="dark"] .event-card__meta, [data-theme="dark"] .events-discover, [data-theme="dark"] .discuss-card__meta, [data-theme="dark"] .news-card__date, [data-theme="dark"] .news-card__meta, [data-theme="dark"] .subj-count, [data-theme="dark"] .meta-text, [data-theme="dark"] .date-text, [data-theme="dark"] .hint-text, [data-theme="dark"] .description { color: var(--text-muted) !important; } /* Section title in dark mode becomes accent blue */ [data-theme="dark"] .section-title { color: var(--primary-dk) !important; } /* ================================================================ LAYER 4: FORM ELEMENTS Inputs, selects, textareas — must all go dark ================================================================ */ [data-theme="dark"] input, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-faint) !important; } /* Feed selects & filter chips */ [data-theme="dark"] .feed-select, [data-theme="dark"] .filter-chip, [data-theme="dark"] .filter-btn, [data-theme="dark"] .topic-chip, [data-theme="dark"] .subj-chip { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* ================================================================ LAYER 5: BORDERS & DIVIDERS ================================================================ */ [data-theme="dark"] hr, [data-theme="dark"] .divider, [data-theme="dark"] .separator { border-color: var(--border) !important; } [data-theme="dark"] .feed-header, [data-theme="dark"] .right-card__header, [data-theme="dark"] .card-header, [data-theme="dark"] .section-header { border-color: var(--border) !important; } /* ================================================================ LAYER 6: TOPBAR & SIDEBAR SPECIFIC ================================================================ */ [data-theme="dark"] .mec-topbar, [data-theme="dark"] app-topbar { background: var(--bg-card) !important; border-color: var(--border) !important; } [data-theme="dark"] .mec-sidebar, [data-theme="dark"] app-sidebar, [data-theme="dark"] .mec-flyout { background: var(--bg-card) !important; border-color: var(--border) !important; } /* Active sidebar item highlight */ [data-theme="dark"] .mec-flyout-item--hl { background: rgba(59, 130, 246, 0.15) !important; color: var(--primary-dk) !important; } [data-theme="dark"] .mec-sb-item { color: var(--text-muted) !important; } [data-theme="dark"] .mec-sb-item:hover, [data-theme="dark"] .mec-sb-item.active { background: rgba(255,255,255,0.07) !important; color: var(--text-primary) !important; } [data-theme="dark"] .mec-sb-section-label { color: var(--text-faint) !important; } /* ================================================================ LAYER 7: FOOTER ================================================================ */ [data-theme="dark"] app-footer, [data-theme="dark"] .mec-footer, [data-theme="dark"] footer { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } [data-theme="dark"] .mec-footer a, [data-theme="dark"] footer a { color: var(--text-muted) !important; } [data-theme="dark"] .mec-footer a:hover, [data-theme="dark"] footer a:hover { color: var(--primary-dk) !important; } /* ================================================================ LAYER 8: BLOG / CONTENT PAGES ================================================================ */ [data-theme="dark"] .blog-content, [data-theme="dark"] .article-body, [data-theme="dark"] .content-body, [data-theme="dark"] .post-body, [data-theme="dark"] .post-content, [data-theme="dark"] .categories-list, [data-theme="dark"] .category-item, [data-theme="dark"] .blog-list, [data-theme="dark"] .article-list, [data-theme="dark"] .blog-wrapper, [data-theme="dark"] .article-wrapper { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* ================================================================ LAYER 9: HOVER / INTERACTIVE STATES ================================================================ */ [data-theme="dark"] .test-card:hover, [data-theme="dark"] .news-card:hover, [data-theme="dark"] .discuss-card:hover, [data-theme="dark"] .event-card:hover, [data-theme="dark"] .quick-link-item:hover, [data-theme="dark"] .blog-card:hover, [data-theme="dark"] .scholarship-card:hover, [data-theme="dark"] .category-card:hover { background: var(--bg-elevated) !important; border-color: var(--primary) !important; } /* ================================================================ LAYER 10: TABLE ELEMENTS ================================================================ */ [data-theme="dark"] table { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } [data-theme="dark"] thead { background: var(--bg-elevated) !important; } [data-theme="dark"] tr:nth-child(even) { background: rgba(255,255,255,0.03) !important; } [data-theme="dark"] th, [data-theme="dark"] td { border-color: var(--border) !important; color: var(--text-primary) !important; } /* ================================================================ LAYER 11: RESUME BANNER & ALERT BOXES ================================================================ */ [data-theme="dark"] #resume-banner-container > div { background: var(--bg-card) !important; border-color: var(--border) !important; } [data-theme="dark"] #resume-banner-container h3, [data-theme="dark"] #resume-banner-container p { color: var(--text-primary) !important; } [data-theme="dark"] #btn-discard-exam { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* ================================================================ PRESERVE — Do NOT override these in dark mode ================================================================ */ /* Gradient hero banners (keep their rich color) */ [data-theme="dark"] .student-dashboard, [data-theme="dark"] [style*="linear-gradient"]:not(.news-card__thumb):not(.news-card):not(.discuss-card):not(.test-card) { /* Do not apply !important background here — let gradient shine */ } /* White text on colored buttons — keep them readable */ [data-theme="dark"] .btn-primary, [data-theme="dark"] button[style*="background: #"], [data-theme="dark"] .feed-go-btn { /* Don't override button backgrounds globally, only structure */ } /* ================================================================ ICON THUMBNAILS & IMAGES ================================================================ */ [data-theme="dark"] .feed-post__thumb, [data-theme="dark"] .event-card__date-box, [data-theme="dark"] .news-card__thumb { background: var(--bg-elevated) !important; border-color: var(--border) !important; } /* Make logos and icons readable in dark mode */ [data-theme="dark"] img[src*="logo"], [data-theme="dark"] img[src*="icon"] { filter: brightness(0.9) contrast(1.1); } /* ================================================================ SCROLLBAR STYLING FOR DARK MODE ================================================================ */ [data-theme="dark"] * { scrollbar-color: #334155 #1e293b; } [data-theme="dark"] *::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] *::-webkit-scrollbar-track { background: var(--bg-base); } [data-theme="dark"] *::-webkit-scrollbar-thumb { background: #334155; border-radius: 99px; } [data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #475569; } /* ================================================================ LAYER 12: PASTEL BADGE / LABEL BACKGROUNDS Targets: blue (#eff6ff), red (#fef2f2, #fff0f0, #fff5f5), orange (#fff3e0, #fff8f0, #fef3c7), event school labels Applied globally — no page-specific selectors needed ================================================================ */ /* Blue tint badges → dark blue glass */ [data-theme="dark"] .event-card__school, [data-theme="dark"] [class*="badge"][style*="#eff6ff"], [data-theme="dark"] [class*="badge"][style*="eff6ff"], [data-theme="dark"] [class*="stat-icon-blue"], [data-theme="dark"] [class*="btn-copy"], [data-theme="dark"] [class*="current-user"] { background: rgba(59, 130, 246, 0.15) !important; color: var(--primary-dk) !important; border-color: rgba(59, 130, 246, 0.25) !important; } /* Red/pink tint: selected states, danger badges */ [data-theme="dark"] .mode-card.selected, [data-theme="dark"] .access-card.selected, [data-theme="dark"] [class*="selected"][class*="card"], [data-theme="dark"] [class*="active"][class*="card"], [data-theme="dark"] .topic-list-item.active, [data-theme="dark"] .q-item.active, [data-theme="dark"] .filter-btn.active { background: rgba(59, 130, 246, 0.1) !important; border-color: var(--primary) !important; } [data-theme="dark"] .mode-card.selected .mode-card__content h4 { color: var(--primary-dk) !important; } /* Orange/cream tint instruction banners & info headers */ [data-theme="dark"] .instruction-banner, [data-theme="dark"] .info-card__header, [data-theme="dark"] [class*="banner"][style*="fff8f0"], [data-theme="dark"] [class*="banner"][style*="fff3e0"], [data-theme="dark"] [class*="header"][style*="fff0f0"] { background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%) !important; color: var(--text-primary) !important; } [data-theme="dark"] .instruction-banner h1, [data-theme="dark"] .info-card__header h3, [data-theme="dark"] .info-card__header h4 { color: #ffffff !important; } /* ================================================================ LAYER 13: TABLE ALTERNATING ROWS Targets all tables with even/odd row backgrounds sitewide ================================================================ */ [data-theme="dark"] table tr:nth-child(even) td, [data-theme="dark"] table tr:nth-child(even) { background: rgba(255, 255, 255, 0.03) !important; } [data-theme="dark"] table tr:nth-child(odd) td, [data-theme="dark"] table tr:nth-child(odd) { background: transparent !important; } [data-theme="dark"] .shortcuts-table td, [data-theme="dark"] [class*="shortcuts"] td, [data-theme="dark"] [class*="table"] td { color: var(--text-primary) !important; border-color: var(--border) !important; } [data-theme="dark"] .shortcuts-table tr:nth-child(even) td, [data-theme="dark"] [class*="shortcuts"] tr:nth-child(even) td { background: rgba(255, 255, 255, 0.04) !important; } /* Key badge (keyboard shortcuts table) */ [data-theme="dark"] .key-badge, [data-theme="dark"] [class*="key-badge"], [data-theme="dark"] kbd { background: var(--bg-elevated) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* ================================================================ LAYER 14: DISCUSS / EVENT SCHOOL LABELS (index.html right sidebar) The school pill labels like "FUK", "UNN", "UNILAG" etc. ================================================================ */ [data-theme="dark"] .event-card__school { background: rgba(59, 130, 246, 0.15) !important; color: var(--primary-dk) !important; } [data-theme="dark"] .discuss-card__tag { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-muted) !important; } /* ================================================================ LAYER 15: LIGHT BACKGROUND WRAPPERS (setup.html, instruction.html) Catch-all for any remaining #fff, #fafafa, #f5f5f5 backgrounds that weren't replaced by the Python script because they appear inside