/* ============================================================ NAIJASABI — Dark Mode Stylesheet Activated via: Auto-activates via prefers-color-scheme: dark ============================================================ */ /* ---- System preference (no JS required) ---- */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --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; } } /* ---- Manual dark toggle ---- */ [data-theme="dark"] { --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; } /* ---- Manual light override ---- */ [data-theme="light"] { --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; } /* ---- Dark-specific component overrides ---- */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .site-header, html:not([data-theme="light"]) .sidebar-widget, html:not([data-theme="light"]) .post-card, html:not([data-theme="light"]) .single-post, html:not([data-theme="light"]) .featured-strip, html:not([data-theme="light"]) .author-box, html:not([data-theme="light"]) .toc, html:not([data-theme="light"]) .ns-howto { background: var(--ns-white); border-color: var(--ns-border); } html:not([data-theme="light"]) .post-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.4); } html:not([data-theme="light"]) .cat-quick-strip .cat-strip-item { background: var(--ns-white); border-color: var(--ns-border); } html:not([data-theme="light"]) .sidebar-newsletter { background: #0f1b2d; border: 1px solid var(--ns-border); } html:not([data-theme="light"]) .live-scores-widget { background: #0f1b2d; border: 1px solid var(--ns-border); } html:not([data-theme="light"]) .toc { background: var(--ns-green3); border-color: var(--ns-green); } html:not([data-theme="light"]) .article-body blockquote { background: var(--ns-green3); } html:not([data-theme="light"]) .article-body { color: #c9d1d9; } html:not([data-theme="light"]) .post-card__thumb, html:not([data-theme="light"]) .hero-card__img { filter: brightness(.9); } html:not([data-theme="light"]) .ad-zone { background: #161b22; border-color: #21262d; } html:not([data-theme="light"]) .tag-cloud__tag { background: var(--ns-white); border-color: var(--ns-border); color: var(--ns-muted); } html:not([data-theme="light"]) .btn-subscribe { border-color: var(--ns-green); color: var(--ns-green); } html:not([data-theme="light"]) .footer-bottom { border-color: rgba(255,255,255,.07); } html:not([data-theme="light"]) .geo-badge { background: #1c2333; border-color: #2d3f58; color: #7c9ef0; } html:not([data-theme="light"]) .share-bar { border-color: var(--ns-border); } html:not([data-theme="light"]) .pagination a, html:not([data-theme="light"]) .pagination span { background: var(--ns-white); border-color: var(--ns-border); color: var(--ns-dark); } html:not([data-theme="light"]) .hero-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.97) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.08) 100%); } } /* Same for manual dark toggle */ [data-theme="dark"] .site-header, [data-theme="dark"] .sidebar-widget, [data-theme="dark"] .post-card, [data-theme="dark"] .single-post, [data-theme="dark"] .featured-strip, [data-theme="dark"] .author-box, [data-theme="dark"] .toc { background: var(--ns-white); border-color: var(--ns-border); } [data-theme="dark"] .post-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.4); } [data-theme="dark"] .cat-quick-strip .cat-strip-item { background: var(--ns-white); border-color: var(--ns-border); } [data-theme="dark"] .sidebar-newsletter, [data-theme="dark"] .live-scores-widget { background: #0f1b2d; border: 1px solid var(--ns-border); } [data-theme="dark"] .toc { background: var(--ns-green3); border-color: var(--ns-green); } [data-theme="dark"] .article-body blockquote { background: var(--ns-green3); } [data-theme="dark"] .article-body { color: #c9d1d9; } [data-theme="dark"] .post-card__thumb img, [data-theme="dark"] .hero-card__img { filter: brightness(.9); } [data-theme="dark"] .ad-zone { background: #161b22; border-color: #21262d; } [data-theme="dark"] .tag-cloud__tag { background: var(--ns-white); border-color: var(--ns-border); color: var(--ns-muted); } [data-theme="dark"] .btn-subscribe { border-color: var(--ns-green); color: var(--ns-green); } [data-theme="dark"] .share-bar { border-color: var(--ns-border); } [data-theme="dark"] .pagination a, [data-theme="dark"] .pagination span { background: var(--ns-white); border-color: var(--ns-border); color: var(--ns-dark); } [data-theme="dark"] .geo-badge { background: #1c2333; border-color: #2d3f58; color: #7c9ef0; } [data-theme="dark"] .hero-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.97) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.08) 100%); } /* ---- Dark Mode Toggle Button ---- */ .dark-mode-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ns-border); background: var(--ns-bg); color: var(--ns-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--ease); flex-shrink: 0; } .dark-mode-toggle:hover { background: var(--ns-border); transform: rotate(20deg); } .dark-mode-toggle__icon-sun, .dark-mode-toggle__icon-moon { width: 16px; height: 16px; } [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; } .dark-mode-toggle__icon-sun { display: none; } .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; } } /* ---- Image Skeleton (dark mode shimmer) ---- */ [data-theme="dark"] .skeleton, @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .skeleton { background: linear-gradient(90deg, #21262d 25%, #2d333b 50%, #21262d 75%); background-size: 200% 100%; } } /* ---- Selection colour ---- */ [data-theme="dark"] ::selection, @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) ::selection { background: rgba(0, 122, 61, .35); color: #e6edf3; } } ::selection { background: rgba(0, 122, 61, .2); } /* ---- Scrollbar (dark) ---- */ [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; }