/** * SDC Theme — Complete Dark Mode * * Applied when is set (via JS toggle) OR * when the user's OS prefers dark colour scheme. * * Strategy: * 1. Override every CSS variable defined in variables.css * 2. Patch component-level colours that use hardcoded hex values * 3. Respect prefers-color-scheme for users who never toggled manually * * @package sdc-theme */ /* ── Variable overrides ────────────────────────────────────────────────────── */ [data-theme="dark"], .dark { /* Primary palette */ --sdc-primary: #818cf8; --sdc-primary-light: #a5b4fc; --sdc-primary-dark: #6366f1; --sdc-primary-hover: #a5b4fc; /* Secondary */ --sdc-secondary: #1e1b4b; --sdc-secondary-dark: #312e81; /* Semantic */ --sdc-success: #34d399; --sdc-success-light: #064e3b; --sdc-success-dark: #10b981; --sdc-warning: #fbbf24; --sdc-warning-light: #451a03; --sdc-warning-dark: #f59e0b; --sdc-danger: #f87171; --sdc-danger-light: #450a0a; --sdc-danger-dark: #ef4444; --sdc-info: #38bdf8; --sdc-info-light: #082f49; --sdc-info-dark: #0ea5e9; /* Text */ --sdc-text-primary: #f1f5f9; --sdc-text-secondary: #cbd5e1; --sdc-text-tertiary: #94a3b8; --sdc-text-light: #64748b; --sdc-text-muted: #475569; /* Backgrounds */ --sdc-bg-primary: #0a0a0b; --sdc-bg-secondary: #111113; --sdc-bg-tertiary: #18181b; --sdc-bg-elevated: #1c1c1f; --sdc-bg-overlay: rgba(0, 0, 0, 0.7); /* Borders */ --sdc-border-light: #1c1c1f; --sdc-border: #27272a; --sdc-border-dark: #3f3f46; --sdc-border-focus: #818cf8; /* Shadows — lighter in dark mode (glow instead of drop-shadow) */ --sdc-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.4); --sdc-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.4); --sdc-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4); --sdc-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4); --sdc-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.6), 0 8px 10px -6px rgba(0,0,0,0.5); /* * style.css :root + skins use --background-*, --text-*, --primary-* (not --sdc-*). * Mirror them here so every var()-based surface tracks dark mode from . */ --primary-color: var(--sdc-primary); --primary-color-light: var(--sdc-primary-light); --primary-color-dark: var(--sdc-primary-dark); --primary-color-rgb: 129, 140, 248; --secondary-color: var(--sdc-secondary); --success-color: var(--sdc-success); --warning-color: var(--sdc-warning); --danger-color: var(--sdc-danger); --info-color: var(--sdc-info); --text-primary: var(--sdc-text-primary); --text-secondary: var(--sdc-text-secondary); --text-tertiary: var(--sdc-text-tertiary); --text-muted: var(--sdc-text-muted); --background-primary: var(--sdc-bg-primary); --background-secondary: var(--sdc-bg-secondary); --background-tertiary: var(--sdc-bg-tertiary); --background-elevated: var(--sdc-bg-elevated); --background-section: var(--sdc-bg-secondary); --border-light: var(--sdc-border-light); --border-color: var(--sdc-border); --border-dark: var(--sdc-border-dark); /* * google-styles.css — .section-gray, body, headings, archive-ebook inline var()s. * Light grays on dark surfaces must invert together or text/background mismatch. */ --google-gray-50: #111113; --google-gray-100: #18181b; --google-gray-200: #27272a; --google-gray-300: #3f3f46; --google-gray-400: #71717a; --google-gray-500: #a1a1aa; --google-gray-600: #cbd5e1; --google-gray-700: #e2e8f0; --google-gray-800: #f1f5f9; --google-gray-900: #fafafa; } /* OS-level preference (no manual toggle needed) */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --sdc-primary: #818cf8; --sdc-primary-light: #a5b4fc; --sdc-primary-dark: #6366f1; --sdc-primary-hover: #a5b4fc; --sdc-secondary: #1e1b4b; --sdc-secondary-dark: #312e81; --sdc-success: #34d399; --sdc-success-light: #064e3b; --sdc-warning: #fbbf24; --sdc-warning-light: #451a03; --sdc-danger: #f87171; --sdc-danger-light: #450a0a; --sdc-info: #38bdf8; --sdc-info-light: #082f49; --sdc-text-primary: #f1f5f9; --sdc-text-secondary: #cbd5e1; --sdc-text-tertiary: #94a3b8; --sdc-text-light: #64748b; --sdc-text-muted: #475569; --sdc-bg-primary: #0a0a0b; --sdc-bg-secondary: #111113; --sdc-bg-tertiary: #18181b; --sdc-bg-elevated: #1c1c1f; --sdc-bg-overlay: rgba(0,0,0,0.7); --sdc-border-light: #1c1c1f; --sdc-border: #27272a; --sdc-border-dark: #3f3f46; --sdc-border-focus: #818cf8; --primary-color: var(--sdc-primary); --primary-color-light: var(--sdc-primary-light); --primary-color-dark: var(--sdc-primary-dark); --primary-color-rgb: 129, 140, 248; --secondary-color: var(--sdc-secondary); --success-color: var(--sdc-success); --warning-color: var(--sdc-warning); --danger-color: var(--sdc-danger); --info-color: var(--sdc-info); --text-primary: var(--sdc-text-primary); --text-secondary: var(--sdc-text-secondary); --text-tertiary: var(--sdc-text-tertiary); --text-muted: var(--sdc-text-muted); --background-primary: var(--sdc-bg-primary); --background-secondary: var(--sdc-bg-secondary); --background-tertiary: var(--sdc-bg-tertiary); --background-elevated: var(--sdc-bg-elevated); --background-section: var(--sdc-bg-secondary); --border-light: var(--sdc-border-light); --border-color: var(--sdc-border); --border-dark: var(--sdc-border-dark); --google-gray-50: #111113; --google-gray-100: #18181b; --google-gray-200: #27272a; --google-gray-300: #3f3f46; --google-gray-400: #71717a; --google-gray-500: #a1a1aa; --google-gray-600: #cbd5e1; --google-gray-700: #e2e8f0; --google-gray-800: #f1f5f9; --google-gray-900: #fafafa; } } /* ── Body & base ───────────────────────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] body { background-color: var(--sdc-bg-primary); color: var(--sdc-text-primary); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body { background-color: var(--sdc-bg-primary); color: var(--sdc-text-primary); } } /* ── Navbar ────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .site-header, [data-theme="dark"] .navbar, [data-theme="dark"] .nav-wrapper { background: rgba(10, 10, 11, 0.95) !important; border-bottom-color: var(--sdc-border) !important; backdrop-filter: blur(12px); } [data-theme="dark"] .nav-logo, [data-theme="dark"] .site-logo { filter: brightness(1.1); } /* navbar.css — .site-logo / .user-profile-btn use #202124; dark bar needs light labels */ [data-theme="dark"] .site-header .site-logo, [data-theme="dark"] .site-header .site-logo .site-name { color: var(--sdc-text-primary) !important; } [data-theme="dark"] .site-header .user-profile-btn, [data-theme="dark"] .site-header .user-profile-btn .user-name { color: var(--sdc-text-primary) !important; } [data-theme="dark"] .site-header .user-profile-btn:hover { background: var(--sdc-bg-tertiary) !important; border-color: var(--sdc-border) !important; color: var(--sdc-text-primary) !important; } [data-theme="dark"] .nav-link, [data-theme="dark"] .menu-item a { color: var(--sdc-text-secondary) !important; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .menu-item a:hover { color: var(--sdc-text-primary) !important; } [data-theme="dark"] .nav-dropdown, [data-theme="dark"] .sub-menu { background: var(--sdc-bg-elevated) !important; border-color: var(--sdc-border) !important; box-shadow: var(--sdc-shadow-lg) !important; } /* ── Cards ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .course-card, [data-theme="dark"] .lesson-card, [data-theme="dark"] .sdc-card, [data-theme="dark"] .card, [data-theme="dark"] .wp-block-cover { background: var(--sdc-bg-tertiary) !important; border-color: var(--sdc-border) !important; color: var(--sdc-text-primary); } [data-theme="dark"] .course-card:hover, [data-theme="dark"] .sdc-card:hover { border-color: var(--sdc-border-dark) !important; box-shadow: var(--sdc-shadow-md) !important; } /* ── Hero section ──────────────────────────────────────────────────────────── */ [data-theme="dark"] .hero-section, [data-theme="dark"] .hero, [data-theme="dark"] .front-hero { background: linear-gradient(135deg, #0f0f23 0%, #0a0a0b 50%, #0f0f23 100%) !important; } [data-theme="dark"] .hero-title, [data-theme="dark"] .hero h1 { color: var(--sdc-text-primary) !important; } [data-theme="dark"] .hero-subtitle, [data-theme="dark"] .hero p { color: var(--sdc-text-secondary) !important; } /* ── Forms & inputs ────────────────────────────────────────────────────────── */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--sdc-bg-secondary) !important; border-color: var(--sdc-border) !important; color: var(--sdc-text-primary) !important; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--sdc-border-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--sdc-text-light) !important; } /* ── Buttons ───────────────────────────────────────────────────────────────── */ [data-theme="dark"] .btn-secondary, [data-theme="dark"] .sdc-btn--ghost { background: var(--sdc-bg-tertiary) !important; border-color: var(--sdc-border) !important; color: var(--sdc-text-primary) !important; } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .sdc-btn--ghost:hover { border-color: var(--sdc-primary) !important; color: var(--sdc-primary) !important; } /* ── Dashboard (page-templates/dashboard.php) + legacy sidebar ───────────── Late inline