/*-------------------------------------------------------------- # Dark Mode Colour Overrides – Speedy Magazine Theme # # Applied when . # We override CSS custom properties so every component inherits # the dark palette automatically. # # @package Speedy_Magazine # @since 1.0.0 --------------------------------------------------------------*/ [data-theme="dark"] { --educenters-bg: #121212; --educenters-bg-surface: #1e1e2f; --educenters-bg-surface-2: #2a2a3d; --educenters-text: #e0e0e0; --educenters-text-muted: #a0a0a0; --educenters-border: #2e2e40; --educenters-shadow: rgba(0, 0, 0, 0.35); color-scheme: dark; } /* ─── Global ─────────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: var(--educenters-bg); color: var(--educenters-text); } [data-theme="dark"] a { color: var(--educenters-text); } /* ─── Top Bar ────────────────────────────────────────────────── */ [data-theme="dark"] .educenters-topbar { background-color: #0d0d1a; } /* ─── Header ─────────────────────────────────────────────────── */ [data-theme="dark"] .educenters-site-header { background-color: var(--educenters-bg-surface); border-bottom-color: var(--educenters-border); } [data-theme="dark"] .educenters-site-header.is-sticky { background-color: var(--educenters-bg-surface); box-shadow: 0 2px 10px var(--educenters-shadow); } [data-theme="dark"] .educenters-site-title a, [data-theme="dark"] .educenters-site-description { color: var(--educenters-text); } [data-theme="dark"] .educenters-primary-menu a { color: var(--educenters-text); } [data-theme="dark"] .educenters-primary-menu .sub-menu { background-color: var(--educenters-bg-surface-2); border-color: var(--educenters-border); } [data-theme="dark"] .educenters-header-action-btn { border-color: var(--educenters-border); color: var(--educenters-text); } /* ─── Search Overlay ─────────────────────────────────────────── */ [data-theme="dark"] .educenters-search-overlay { background-color: rgba(10, 10, 20, 0.95); } /* ─── Offcanvas ──────────────────────────────────────────────── */ [data-theme="dark"] .educenters-offcanvas-panel { background-color: var(--educenters-bg-surface); } /* ─── Content ────────────────────────────────────────────────── */ [data-theme="dark"] .educenters-post-card { background-color: var(--educenters-bg-surface); border-color: var(--educenters-border); } [data-theme="dark"] .educenters-post-card:hover { box-shadow: 0 4px 12px var(--educenters-shadow); } [data-theme="dark"] .educenters-post-title a, [data-theme="dark"] .educenters-entry-title { color: var(--educenters-text); } [data-theme="dark"] .educenters-post-meta, [data-theme="dark"] .educenters-post-meta a { color: var(--educenters-text-muted); } [data-theme="dark"] .educenters-excerpt { color: var(--educenters-text-muted); } [data-theme="dark"] .educenters-entry-content { color: var(--educenters-text); } [data-theme="dark"] .educenters-entry-content blockquote { border-left-color: var(--educenters-primary-color, #e74c3c); background-color: var(--educenters-bg-surface-2); color: var(--educenters-text); } [data-theme="dark"] .educenters-entry-content pre, [data-theme="dark"] .educenters-entry-content code { background-color: var(--educenters-bg-surface-2); color: #c9d1d9; } [data-theme="dark"] .educenters-entry-content table { border-color: var(--educenters-border); } [data-theme="dark"] .educenters-entry-content th, [data-theme="dark"] .educenters-entry-content td { border-color: var(--educenters-border); } [data-theme="dark"] .educenters-entry-content th { background-color: var(--educenters-bg-surface-2); } [data-theme="dark"] .educenters-tag-link { background-color: var(--educenters-bg-surface-2); border-color: var(--educenters-border); color: var(--educenters-text-muted); } /* ─── Sidebar ────────────────────────────────────────────────── */ [data-theme="dark"] .educenters-sidebar .widget { background-color: var(--educenters-bg-surface); border-color: var(--educenters-border); } [data-theme="dark"] .educenters-sidebar .widget-title { color: var(--educenters-text); } /* ─── Comments ───────────────────────────────────────────────── */ [data-theme="dark"] .educenters-comment-body { background-color: var(--educenters-bg-surface); border-color: var(--educenters-border); } [data-theme="dark"] .educenters-comment-body .children .educenters-comment-body { background-color: var(--educenters-bg-surface-2); } [data-theme="dark"] .educenters-comment-author a { color: var(--educenters-text); } [data-theme="dark"] .educenters-comment-text { color: var(--educenters-text-muted); } [data-theme="dark"] .educenters-comment-form input, [data-theme="dark"] .educenters-comment-form textarea { background-color: var(--educenters-bg-surface-2); border-color: var(--educenters-border); color: var(--educenters-text); } /* ─── Author Box ─────────────────────────────────────────────── */ [data-theme="dark"] .educenters-author-box { background-color: var(--educenters-bg-surface); border-color: var(--educenters-border); } [data-theme="dark"] .educenters-author-name a { color: var(--educenters-text); } [data-theme="dark"] .educenters-author-bio { color: var(--educenters-text-muted); } [data-theme="dark"] .educenters-author-social-link { border-color: var(--educenters-border); color: var(--educenters-text-muted); } /* ─── Related Posts ──────────────────────────────────────────── */ [data-theme="dark"] .educenters-related-card { background-color: var(--educenters-bg-surface); border-color: var(--educenters-border); } [data-theme="dark"] .educenters-related-post-title a { color: var(--educenters-text); } /* ─── Pagination ─────────────────────────────────────────────── */ [data-theme="dark"] .page-numbers { border-color: var(--educenters-border); color: var(--educenters-text-muted); } /* ─── Post Navigation ───────────────────────────────────────── */ [data-theme="dark"] .educenters-nav-title { color: var(--educenters-text); } [data-theme="dark"] .educenters-nav-subtitle { color: var(--educenters-text-muted); } /* ─── Auth Pages ─────────────────────────────────────────────── */ [data-theme="dark"] .educenters-auth-card { background-color: var(--educenters-bg-surface); border-color: var(--educenters-border); } [data-theme="dark"] .educenters-auth-site-title a { color: var(--educenters-text); } [data-theme="dark"] .educenters-form-control { background-color: var(--educenters-bg-surface-2); border-color: var(--educenters-border); color: var(--educenters-text); } /* ─── 404 Page ───────────────────────────────────────────────── */ [data-theme="dark"] .educenters-404-code { color: var(--educenters-bg-surface-2); } [data-theme="dark"] .educenters-404-title { color: var(--educenters-text); } [data-theme="dark"] .educenters-404-col ul li { border-bottom-color: var(--educenters-border); } [data-theme="dark"] .educenters-404-col ul li a { color: var(--educenters-text-muted); } /* ─── Footer ─────────────────────────────────────────────────── */ [data-theme="dark"] .educenters-footer { background-color: #0d0d1a; } [data-theme="dark"] .educenters-footer-bottom { border-top-color: rgba(255, 255, 255, 0.06); } /* ─── Scrollbar ──────────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--educenters-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--educenters-bg-surface-2); border-radius: 4px; } /* ─── Dark Mode Toggle Button ────────────────────────────────── */ .educenters-dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: all 0.2s ease; } .educenters-dark-mode-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } /* In light mode: show moon, hide sun */ .educenters-icon-sun { display: none; } .educenters-icon-moon { display: block; } /* In dark mode: show sun, hide moon */ [data-theme="dark"] .educenters-icon-sun { display: block; } [data-theme="dark"] .educenters-icon-moon { display: none; } /* When toggle is outside the topbar (e.g., header actions) */ .educenters-site-header .educenters-dark-mode-toggle { color: #333; border-color: #ddd; } [data-theme="dark"] .educenters-site-header .educenters-dark-mode-toggle { color: var(--educenters-text); border-color: var(--educenters-border); } /* ─── Selection ──────────────────────────────────────────────── */ [data-theme="dark"] ::selection { background-color: var(--educenters-primary-color, #e74c3c); color: #fff; } /* ─── Images ─────────────────────────────────────────────────── */ [data-theme="dark"] img { opacity: 0.92; } [data-theme="dark"] img:hover { opacity: 1; }