/* ========================================================================== Dark Mode — onpointyshots / intelpress Applied via [data-theme="dark"] on ========================================================================== */ [data-theme="dark"] { --c-canvas: #0D1117; --c-surface-soft: #161B22; --c-surface-strong: #21262D; --c-ink: #E6EDF3; --c-body: #8B949E; --c-muted: #6E7681; --c-muted-soft: #484F58; --c-hairline: #30363D; --c-hairline-soft: #21262D; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 8px 30px rgba(0,0,0,0.6); } /* Base */ [data-theme="dark"] html, [data-theme="dark"] body { background-color: #0D1117; color: var(--c-body); } [data-theme="dark"] html { background: #0D1117; } /* Typography */ [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(--c-ink); } [data-theme="dark"] a { color: var(--c-ink); } [data-theme="dark"] a:hover { color: var(--c-primary); } /* Site header — force dark appearance regardless of sticky/scroll state */ [data-theme="dark"] .site-header, [data-theme="dark"] .site-header.is-sticky, [data-theme="dark"] .site-header.is-scrolled, [data-theme="dark"] .header-inner { background-color: #161B22; border-bottom-color: var(--c-hairline); } [data-theme="dark"] .site-header .nav-link, [data-theme="dark"] .site-header .nav-link:hover, [data-theme="dark"] .header-logo, [data-theme="dark"] .header-logo img { color: var(--c-ink); } [data-theme="dark"] .header-search-btn, [data-theme="dark"] .header-menu-btn { color: var(--c-body); } [data-theme="dark"] .header-search-btn:hover, [data-theme="dark"] .header-menu-btn:hover { color: var(--c-ink); } /* Top bar */ [data-theme="dark"] .header-top-bar { background-color: #0D1117; border-bottom-color: var(--c-hairline); color: var(--c-muted); } /* Search overlay */ [data-theme="dark"] .search-overlay { background: rgba(13, 17, 23, 0.97); } [data-theme="dark"] .search-overlay .search-field { background: var(--c-surface-strong); border-color: var(--c-hairline); color: var(--c-ink); } [data-theme="dark"] .search-overlay .search-field::placeholder { color: var(--c-muted); } [data-theme="dark"] .search-form-wrap { background: var(--c-surface-strong); } [data-theme="dark"] .search-form-wrap:focus-within { background: var(--c-surface-soft); } [data-theme="dark"] .search-form-icon, [data-theme="dark"] .search-close { color: var(--c-muted); } [data-theme="dark"] .search-form-input::placeholder { color: var(--c-muted); } [data-theme="dark"] .search-result-item { border-bottom-color: var(--c-hairline); } [data-theme="dark"] .search-result-title { color: var(--c-ink); } [data-theme="dark"] .search-result-time, [data-theme="dark"] .search-no-results, [data-theme="dark"] .search-loading { color: var(--c-muted); } [data-theme="dark"] .search-result-thumb { background: var(--c-surface-strong); } /* Cards & surfaces */ [data-theme="dark"] .card, [data-theme="dark"] .post-card, [data-theme="dark"] .article-card, [data-theme="dark"] .widget, [data-theme="dark"] .ops-widget { background-color: var(--c-surface-soft); border-color: var(--c-hairline); } [data-theme="dark"] .card:hover, [data-theme="dark"] .post-card:hover, [data-theme="dark"] .article-card:hover { border-color: var(--c-hairline); box-shadow: var(--shadow-md); } /* Sidebar */ [data-theme="dark"] .sidebar-widget { background-color: var(--c-surface-soft); border-color: var(--c-hairline); } [data-theme="dark"] .sidebar-widget-title { color: var(--c-ink); border-bottom-color: var(--c-hairline); } /* Entry content */ [data-theme="dark"] .entry-content { color: var(--c-body); } [data-theme="dark"] .entry-content a { color: #79c0ff; } [data-theme="dark"] .entry-content a:hover { color: var(--c-primary); } [data-theme="dark"] .entry-content p, [data-theme="dark"] .entry-content li { color: var(--c-body); } [data-theme="dark"] .entry-content h1, [data-theme="dark"] .entry-content h2, [data-theme="dark"] .entry-content h3, [data-theme="dark"] .entry-content h4, [data-theme="dark"] .entry-content h5, [data-theme="dark"] .entry-content h6 { color: var(--c-ink); } /* Blockquote */ [data-theme="dark"] .entry-content blockquote { background-color: var(--c-surface-soft); border-left-color: var(--c-primary); color: var(--c-body); } [data-theme="dark"] .entry-content blockquote p { color: var(--c-body); } /* Code & pre */ [data-theme="dark"] pre, [data-theme="dark"] .entry-content pre { background-color: #161B22; border-color: var(--c-hairline); color: #e6edf3; } [data-theme="dark"] code, [data-theme="dark"] .entry-content code { background-color: #21262D; color: #e6edf3; border-color: var(--c-hairline); } [data-theme="dark"] pre code { background-color: transparent; border: none; } /* Tables */ [data-theme="dark"] table { border-color: var(--c-hairline); } [data-theme="dark"] th { background-color: var(--c-surface-strong); color: var(--c-ink); border-color: var(--c-hairline); } [data-theme="dark"] td { border-color: var(--c-hairline); color: var(--c-body); } [data-theme="dark"] tr:nth-child(even) td { background-color: var(--c-surface-soft); } /* Horizontal rule */ [data-theme="dark"] hr { border-color: var(--c-hairline); } /* Author disclosure — neutral, matches light theme */ [data-theme="dark"] .author-disclosure { border-top-color: var(--c-hairline); color: var(--c-muted); } [data-theme="dark"] .author-disclosure strong { color: var(--c-body); } /* Author box */ [data-theme="dark"] .author-box, [data-theme="dark"] .single-author-card { background-color: var(--c-surface-soft); border-color: var(--c-hairline); } [data-theme="dark"] .author-name, [data-theme="dark"] .author-box .author-name { color: var(--c-ink); } [data-theme="dark"] .author-bio, [data-theme="dark"] .author-box .author-bio { color: var(--c-body); } /* Tags & badges */ [data-theme="dark"] .tag-badge, [data-theme="dark"] .cat-badge, [data-theme="dark"] .ops-badge { background-color: var(--c-surface-strong); color: var(--c-body); border-color: var(--c-hairline); } /* Article meta */ [data-theme="dark"] .article-meta, [data-theme="dark"] .entry-meta, [data-theme="dark"] .post-meta { color: var(--c-muted); } /* Navigation / pagination */ [data-theme="dark"] .pagination .page-numbers { background-color: var(--c-surface-soft); border-color: var(--c-hairline); color: var(--c-body); } [data-theme="dark"] .pagination .page-numbers.current, [data-theme="dark"] .pagination .page-numbers:hover { background-color: var(--c-primary); color: #fff; border-color: var(--c-primary); } /* Mobile nav */ [data-theme="dark"] .mobile-nav, [data-theme="dark"] .nav-drawer { background-color: #161B22; border-color: var(--c-hairline); } [data-theme="dark"] .mobile-nav .nav-link { color: var(--c-body); border-bottom-color: var(--c-hairline); } [data-theme="dark"] .mobile-nav .nav-link:hover { color: var(--c-ink); background-color: var(--c-surface-strong); } /* Dropdown menus */ [data-theme="dark"] .nav-dropdown, [data-theme="dark"] .sub-menu { background-color: #161B22; border-color: var(--c-hairline); box-shadow: var(--shadow-lg); } [data-theme="dark"] .nav-dropdown a, [data-theme="dark"] .sub-menu a { color: var(--c-body); } [data-theme="dark"] .nav-dropdown a:hover, [data-theme="dark"] .sub-menu a:hover { background-color: var(--c-surface-strong); color: var(--c-ink); } /* Footer — keep dark sections dark (don't let --c-ink turn them white) */ [data-theme="dark"] .site-footer { background-color: #0D1117; border-top-color: var(--c-hairline); } [data-theme="dark"] .footer-main { background-color: #0D1117 !important; } [data-theme="dark"] .footer-legal { background-color: #060a0f !important; border-top-color: #21262D; } [data-theme="dark"] .footer-widget-title { color: #E6EDF3; } [data-theme="dark"] .footer-nav a, [data-theme="dark"] .footer-widget a { color: var(--c-muted); } [data-theme="dark"] .footer-nav a:hover, [data-theme="dark"] .footer-widget a:hover { color: #E6EDF3; } [data-theme="dark"] .footer-bottom { background-color: #060a0f !important; border-top-color: var(--c-hairline); color: var(--c-muted); } /* Inputs & forms */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--c-surface-soft); border-color: var(--c-hairline); color: var(--c-ink); } [data-theme="dark"] input[type="text"]::placeholder, [data-theme="dark"] input[type="email"]::placeholder, [data-theme="dark"] input[type="search"]::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--c-muted); } [data-theme="dark"] input[type="text"]:focus-visible, [data-theme="dark"] input[type="email"]:focus-visible, [data-theme="dark"] input[type="search"]:focus-visible, [data-theme="dark"] textarea:focus-visible { border-color: var(--c-primary); outline: 2px solid var(--c-primary); outline-offset: 0; box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.2); } /* Buttons */ [data-theme="dark"] .btn-outline, [data-theme="dark"] .button-outline { border-color: var(--c-hairline); color: var(--c-body); } [data-theme="dark"] .btn-outline:hover, [data-theme="dark"] .button-outline:hover { border-color: var(--c-primary); color: var(--c-primary); } /* Comment section */ [data-theme="dark"] .comment-item, [data-theme="dark"] .comment-body { border-color: var(--c-hairline); } [data-theme="dark"] .comment-author-name { color: var(--c-ink); } [data-theme="dark"] .comment-text { color: var(--c-body); } /* Related posts */ [data-theme="dark"] .related-posts-wrap { border-top-color: var(--c-hairline); } /* Ticker */ [data-theme="dark"] .ops-ticker-wrap { /* stays primary color, no override needed */ } /* Dual logo switching */ .ops-logo-dark { display: none; } .ops-logo-light { display: block; } [data-theme="dark"] .ops-logo-light { display: none; } [data-theme="dark"] .ops-logo-dark { display: block; } /* Scroll bar (webkit) */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0D1117; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #30363D; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #484F58; } /* Selection */ [data-theme="dark"] ::selection { background-color: rgba(0, 82, 255, 0.3); color: #E6EDF3; } /* Copy-link toast — --c-ink is near-white in dark mode, so invert it */ [data-theme="dark"] .ops-copied-toast { background: var(--c-surface-strong); color: var(--c-ink); border: 1px solid var(--c-hairline); }