/* ============================================================ NAIJASABI — Dark Mode Stylesheet v3.0 Activated via data-theme="dark" on (JS toggle) OR via prefers-color-scheme: dark (OS preference) ============================================================ */ /* ============================================================ DARK VARIABLES — manual toggle ============================================================ */ [data-theme="dark"] { /* brand-* (main.css uses these for everything) */ --brand-dark: #e6edf3; --brand-offwhite: #0d1117; --brand-white: #161b22; --brand-border: #30363d; --brand-muted: #8b949e; /* category badge backgrounds */ --cat-football-bg: #1e1535; --cat-jobs-bg: #0d2518; --cat-finance-bg: #2a1f00; --cat-education-bg: #0c1f4a; --cat-entertainment-bg:#2d0d2a; --cat-tech-bg: #052030; --cat-business-bg: #2a1200; --cat-health-bg: #042220; --cat-travel-bg: #1e1535; --cat-lifestyle-bg: #2d0d2a; /* ns-* (extended.css / features.css / premium.css) */ --ns-bg: #0d1117; --ns-white: #161b22; --ns-border: #21262d; --ns-border2: #30363d; --ns-dark: #f0f6fc; --ns-dark2: #e6edf3; --ns-dark3: #c9d1d9; --ns-muted: #8b949e; --ns-muted2: #6e7681; --ns-green3: #0d2518; --ns-green4: #122d1e; color-scheme: dark; } /* ============================================================ DARK VARIABLES — OS preference (no JS needed) ============================================================ */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --brand-dark: #e6edf3; --brand-offwhite: #0d1117; --brand-white: #161b22; --brand-border: #30363d; --brand-muted: #8b949e; --cat-football-bg: #1e1535; --cat-jobs-bg: #0d2518; --cat-finance-bg: #2a1f00; --cat-education-bg: #0c1f4a; --cat-entertainment-bg:#2d0d2a; --cat-tech-bg: #052030; --cat-business-bg: #2a1200; --cat-health-bg: #042220; --cat-travel-bg: #1e1535; --cat-lifestyle-bg: #2d0d2a; --ns-bg: #0d1117; --ns-white: #161b22; --ns-border: #21262d; --ns-border2: #30363d; --ns-dark: #f0f6fc; --ns-dark2: #e6edf3; --ns-dark3: #c9d1d9; --ns-muted: #8b949e; --ns-muted2: #6e7681; --ns-green3: #0d2518; --ns-green4: #122d1e; color-scheme: dark; } } /* ============================================================ LIGHT RESTORE — explicit manual override ============================================================ */ [data-theme="light"] { --brand-dark: #0A1628; --brand-offwhite: #F8F9FA; --brand-white: #FFFFFF; --brand-border: #E8ECF0; --brand-muted: #6B7280; --cat-football-bg: #EDE9FE; --cat-jobs-bg: #D1FAE5; --cat-finance-bg: #FEF3C7; --cat-education-bg: #DBEAFE; --cat-entertainment-bg:#FCE7F3; --cat-tech-bg: #E0F2FE; --cat-business-bg: #FFEDD5; --cat-health-bg: #CCFBF1; --cat-travel-bg: #EDE9FE; --cat-lifestyle-bg: #FCE7F3; --ns-bg: #F4F6F9; --ns-white: #ffffff; --ns-border: #eaecf0; --ns-border2: #d1d5db; --ns-dark: #0A1628; --ns-dark2: #1e2d42; --ns-dark3: #2d3f58; --ns-muted: #6b7280; --ns-muted2: #9ca3af; --ns-green3: #f0faf5; --ns-green4: #e0f4eb; color-scheme: light; } /* ============================================================ COMPONENT OVERRIDES — manual toggle Fixes hardcoded #fff values that variables cannot reach ============================================================ */ /* Body */ [data-theme="dark"] body { background-color: #0d1117; color: #e6edf3; } /* Header */ [data-theme="dark"] .site-header { background: #161b22; border-bottom-color: #21262d; } /* Search input */ [data-theme="dark"] .header-search input { background: #0d1117; color: #e6edf3; border-color: #30363d; } [data-theme="dark"] .header-search input:focus { background: #0d1117; } [data-theme="dark"] .header-search input::placeholder { color: #8b949e; } /* Post cards */ [data-theme="dark"] .post-card, [data-theme="dark"] .post-list-card { background: #161b22; border-color: #21262d; } [data-theme="dark"] .post-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.5); } /* Hero overlay */ [data-theme="dark"] .hero-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.1) 100%); } /* Sidebar + widgets */ [data-theme="dark"] .sidebar-widget, [data-theme="dark"] .sidebar-newsletter, [data-theme="dark"] .live-scores-widget { background: #161b22; border-color: #21262d; } /* Single post */ [data-theme="dark"] .single-post { background: #161b22; border-color: #21262d; } [data-theme="dark"] .article-body { color: #c9d1d9; } [data-theme="dark"] .article-body h2, [data-theme="dark"] .article-body h3, [data-theme="dark"] .article-body h4 { color: #e6edf3; } [data-theme="dark"] .article-body blockquote { background: #0d2518; border-left-color: #007A3D; color: #c9d1d9; } [data-theme="dark"] .article-body a { color: #58a6ff; } /* TOC */ [data-theme="dark"] .toc { background: #0d2518; border-color: #007A3D; } /* Author box */ [data-theme="dark"] .author-box, [data-theme="dark"] .featured-strip { background: #161b22; border-color: #21262d; } /* Category strip */ [data-theme="dark"] .cat-quick-strip .cat-strip-item { background: #161b22; border-color: #21262d; } /* Footer */ [data-theme="dark"] .site-footer { background: #010409; } [data-theme="dark"] .footer-bottom { border-color: rgba(255,255,255,.08); } /* Ads */ [data-theme="dark"] .ad-zone, [data-theme="dark"] .ad-banner-header { background: #161b22; border-color: #21262d; } /* Tags & pagination */ [data-theme="dark"] .tag-cloud__tag { background: #161b22; border-color: #21262d; color: #8b949e; } [data-theme="dark"] .pagination a, [data-theme="dark"] .pagination span { background: #161b22; border-color: #21262d; color: #e6edf3; } /* Share bar */ [data-theme="dark"] .share-bar { border-color: #21262d; } /* Mobile nav */ [data-theme="dark"] .mobile-nav { background: #161b22; } /* Forms */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: #0d1117; color: #e6edf3; border-color: #30363d; } /* Images */ [data-theme="dark"] .post-card__thumb img, [data-theme="dark"] .hero-card__img { filter: brightness(.88); } /* Geo badge */ [data-theme="dark"] .geo-badge { background: #1c2333; border-color: #2d3f58; color: #7c9ef0; } /* Skeleton shimmer */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #21262d 25%, #2d333b 50%, #21262d 75%); background-size: 200% 100%; } /* ============================================================ COMPONENT OVERRIDES — OS preference Exact mirror of the manual toggle rules above ============================================================ */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body { background-color: #0d1117; color: #e6edf3; } html:not([data-theme="light"]) .site-header { background: #161b22; border-bottom-color: #21262d; } html:not([data-theme="light"]) .header-search input { background: #0d1117; color: #e6edf3; border-color: #30363d; } html:not([data-theme="light"]) .header-search input:focus { background: #0d1117; } html:not([data-theme="light"]) .header-search input::placeholder { color: #8b949e; } html:not([data-theme="light"]) .post-card, html:not([data-theme="light"]) .post-list-card { background: #161b22; border-color: #21262d; } html:not([data-theme="light"]) .post-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.5); } html:not([data-theme="light"]) .hero-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.1) 100%); } html:not([data-theme="light"]) .sidebar-widget, html:not([data-theme="light"]) .sidebar-newsletter, html:not([data-theme="light"]) .live-scores-widget { background: #161b22; border-color: #21262d; } html:not([data-theme="light"]) .single-post { background: #161b22; border-color: #21262d; } html:not([data-theme="light"]) .article-body { color: #c9d1d9; } html:not([data-theme="light"]) .article-body h2, html:not([data-theme="light"]) .article-body h3, html:not([data-theme="light"]) .article-body h4 { color: #e6edf3; } html:not([data-theme="light"]) .article-body blockquote { background: #0d2518; border-left-color: #007A3D; color: #c9d1d9; } html:not([data-theme="light"]) .article-body a { color: #58a6ff; } html:not([data-theme="light"]) .toc { background: #0d2518; border-color: #007A3D; } html:not([data-theme="light"]) .author-box, html:not([data-theme="light"]) .featured-strip { background: #161b22; border-color: #21262d; } html:not([data-theme="light"]) .cat-quick-strip .cat-strip-item { background: #161b22; border-color: #21262d; } html:not([data-theme="light"]) .site-footer { background: #010409; } html:not([data-theme="light"]) .footer-bottom { border-color: rgba(255,255,255,.08); } html:not([data-theme="light"]) .ad-zone, html:not([data-theme="light"]) .ad-banner-header { background: #161b22; border-color: #21262d; } html:not([data-theme="light"]) .tag-cloud__tag { background: #161b22; border-color: #21262d; color: #8b949e; } html:not([data-theme="light"]) .pagination a, html:not([data-theme="light"]) .pagination span { background: #161b22; border-color: #21262d; color: #e6edf3; } html:not([data-theme="light"]) .share-bar { border-color: #21262d; } html:not([data-theme="light"]) .mobile-nav { background: #161b22; } html:not([data-theme="light"]) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), html:not([data-theme="light"]) textarea, html:not([data-theme="light"]) select { background-color: #0d1117; color: #e6edf3; border-color: #30363d; } html:not([data-theme="light"]) .post-card__thumb img, html:not([data-theme="light"]) .hero-card__img { filter: brightness(.88); } html:not([data-theme="light"]) .geo-badge { background: #1c2333; border-color: #2d3f58; color: #7c9ef0; } html:not([data-theme="light"]) .skeleton { background: linear-gradient(90deg, #21262d 25%, #2d333b 50%, #21262d 75%); background-size: 200% 100%; } } /* ============================================================ TOGGLE BUTTON — base styles (only defined here, not in any other CSS file) ============================================================ */ .dark-mode-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--brand-border); background: transparent; color: var(--brand-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; flex-shrink: 0; } .dark-mode-toggle:hover { background: var(--brand-border); transform: rotate(20deg); } .dark-mode-toggle__icon-sun, .dark-mode-toggle__icon-moon { width: 16px; height: 16px; } /* Default (light mode): show moon, hide sun */ .dark-mode-toggle__icon-sun { display: none; } .dark-mode-toggle__icon-moon { display: block; } [data-theme="dark"] .dark-mode-toggle__icon-sun { display: block; } [data-theme="dark"] .dark-mode-toggle__icon-moon { display: none; } [data-theme="light"] .dark-mode-toggle__icon-sun { display: none; } [data-theme="light"] .dark-mode-toggle__icon-moon { display: block; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .dark-mode-toggle__icon-sun { display: block; } html:not([data-theme="light"]) .dark-mode-toggle__icon-moon { display: none; } } /* ============================================================ SELECTION + SCROLLBAR ============================================================ */ ::selection { background: rgba(0,122,61,.2); } [data-theme="dark"] ::selection { background: rgba(0,122,61,.4); color: #e6edf3; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) ::selection { background: rgba(0,122,61,.4); color: #e6edf3; } } [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #161b22; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #484f58; } /* ============================================================ TARGETED FIXES — components that need !important or have inline styles / load-order conflicts ============================================================ */ /* ── Site nav (uses var(--brand-dark) as bg, which flips to light) ── */ [data-theme="dark"] .site-nav { background: #0d1117 !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .site-nav { background: #0d1117 !important; } } /* ── Mobile nav (background defined in premium.css & extended.css as var(--ns-dark)/var(--brand-dark) — both flip to near-white) ── */ [data-theme="dark"] .mobile-nav { background: #0d1117 !important; } [data-theme="dark"] .mobile-nav__menu li a { color: rgba(255,255,255,.8) !important; } [data-theme="dark"] .mobile-nav__menu li { border-bottom-color: rgba(255,255,255,.08) !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .mobile-nav { background: #0d1117 !important; } html:not([data-theme="light"]) .mobile-nav__menu li a { color: rgba(255,255,255,.8) !important; } html:not([data-theme="light"]) .mobile-nav__menu li { border-bottom-color: rgba(255,255,255,.08) !important; } } /* ── Footer (uses var(--brand-dark) as bg — must stay dark always) ── */ [data-theme="dark"] .site-footer { background: #010409 !important; } [data-theme="dark"] .footer-col ul li a { color: rgba(255,255,255,.6) !important; } [data-theme="dark"] .footer-col ul li a:hover { color: #F5A623 !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .site-footer { background: #010409 !important; } html:not([data-theme="light"]) .footer-col ul li a { color: rgba(255,255,255,.6) !important; } html:not([data-theme="light"]) .footer-col ul li a:hover { color: #F5A623 !important; } } /* ── Ad-before-footer bar (inline style="background:#fff") ── */ [data-theme="dark"] .ad-before-footer { background: #0d1117 !important; border-top-color: #21262d !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ad-before-footer { background: #0d1117 !important; border-top-color: #21262d !important; } } /* ── Live exchange rates widget (ns-currency has inline style="background:var(--ns-dark)") var(--ns-dark) in dark mode = #f0f6fc (light!) — needs !important ── */ [data-theme="dark"] .ns-currency { background: #161b22 !important; color: #e6edf3 !important; } [data-theme="dark"] .ns-currency select, [data-theme="dark"] .ns-currency input { background: rgba(255,255,255,.08) !important; color: #e6edf3 !important; border: none !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ns-currency { background: #161b22 !important; color: #e6edf3 !important; } html:not([data-theme="light"]) .ns-currency select, html:not([data-theme="light"]) .ns-currency input { background: rgba(255,255,255,.08) !important; color: #e6edf3 !important; border: none !important; } } /* ── Hamburger bars (var(--brand-dark) flips to light — fine on dark header, but menu-toggle bars need to be visible on the dark header bg) ── */ [data-theme="dark"] .menu-toggle span { background: #e6edf3 !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .menu-toggle span { background: #e6edf3 !important; } } /* ── features.css hardcoded #fff backgrounds ── */ /* Reaction buttons */ [data-theme="dark"] .ns-reaction-btn { background: #161b22 !important; border-color: #30363d !important; color: #e6edf3 !important; } /* Adblock overlay card */ [data-theme="dark"] .ns-adblock-overlay__card { background: #161b22 !important; } /* Mega menu dropdown */ [data-theme="dark"] .mega-menu { background: #161b22 !important; border-color: #21262d !important; } /* Podcast episode cards */ [data-theme="dark"] .ns-podcast-episode-card { background: #161b22 !important; border-color: #21262d !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ns-reaction-btn { background: #161b22 !important; border-color: #30363d !important; color: #e6edf3 !important; } html:not([data-theme="light"]) .ns-adblock-overlay__card { background: #161b22 !important; } html:not([data-theme="light"]) .mega-menu { background: #161b22 !important; border-color: #21262d !important; } html:not([data-theme="light"]) .ns-podcast-episode-card { background: #161b22 !important; border-color: #21262d !important; } } /* ============================================================ ROUND 2 FIXES — components missed in previous passes ============================================================ */ /* Breaking ticker label (var(--ns-dark) flips to light) */ [data-theme="dark"] .breaking-ticker__label { background: #0d1117 !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .breaking-ticker__label { background: #0d1117 !important; } } /* Article table headers (var(--ns-dark) flips to light) */ [data-theme="dark"] .article-body th { background: #21262d !important; color: #e6edf3 !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .article-body th { background: #21262d !important; color: #e6edf3 !important; } } /* Cookie banner (var(--ns-dark) flips to light — banner already has white text so must stay dark) */ [data-theme="dark"] .cookie-banner { background: #0d1117 !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .cookie-banner { background: #0d1117 !important; } } /* Sidebar newsletter + live scores (already in dark-mode.css but missing !important — premium.css background: var(--ns-dark) beats them without it) */ [data-theme="dark"] .sidebar-newsletter, [data-theme="dark"] .live-scores-widget { background: #161b22 !important; border-color: #21262d !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .sidebar-newsletter, html:not([data-theme="light"]) .live-scores-widget { background: #161b22 !important; border-color: #21262d !important; } } /* Reaction buttons — class was mistyped as ns-reaction-btn, correct is ns-reactions__btn */ [data-theme="dark"] .ns-reactions__btn { background: #161b22 !important; border-color: #30363d !important; color: #e6edf3 !important; } [data-theme="dark"] .ns-reactions__btn:hover { background: #21262d !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ns-reactions__btn { background: #161b22 !important; border-color: #30363d !important; color: #e6edf3 !important; } html:not([data-theme="light"]) .ns-reactions__btn:hover { background: #21262d !important; } } /* Adblock overlay — hardcoded dark text colour */ [data-theme="dark"] .ns-adblock-overlay__title { color: #e6edf3 !important; } [data-theme="dark"] .ns-adblock-overlay__message { color: #c9d1d9 !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ns-adblock-overlay__title { color: #e6edf3 !important; } html:not([data-theme="light"]) .ns-adblock-overlay__message { color: #c9d1d9 !important; } } /* Mega menu description text (hardcoded #374151) */ [data-theme="dark"] .ns-mega-col__desc { color: #8b949e !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ns-mega-col__desc { color: #8b949e !important; } } /* Table of contents box (hardcoded #F0FBF6 background) */ [data-theme="dark"] .ns-toc { background: #0d2518 !important; border-color: #007A3D !important; } [data-theme="dark"] .ns-toc__link { color: #c9d1d9 !important; } [data-theme="dark"] .ns-toc__link:hover, [data-theme="dark"] .ns-toc__link.active { background: rgba(0,122,61,.2) !important; color: #4ade80 !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ns-toc { background: #0d2518 !important; border-color: #007A3D !important; } html:not([data-theme="light"]) .ns-toc__link { color: #c9d1d9 !important; } html:not([data-theme="light"]) .ns-toc__link:hover, html:not([data-theme="light"]) .ns-toc__link.active { background: rgba(0,122,61,.2) !important; color: #4ade80 !important; } }