/** * Pageify — Dark Mode Overrides * Activated via [data-theme="dark"] on . * Only overrides CSS variables — no structural changes. */ [data-theme="dark"] { /* ── Backgrounds ── */ --pgf-bg: #0F172A; --pgf-bg-alt: #1E293B; --pgf-bg-hover: #334155; /* ── Borders ── */ --pgf-border: #334155; --pgf-border-focus: #60A5FA; /* ── Text ── */ --pgf-text: #F1F5F9; --pgf-text-secondary: #B0BEC5; --pgf-text-muted: #64748B; --pgf-text-inverse: #0F172A; /* ── Primary (lightened for dark bg) ── */ --pgf-primary: #60A5FA; --pgf-primary-hover: #93C5FD; --pgf-primary-light: #1E3A5F; --pgf-primary-ultra-light: #172554; /* ── Accent ── */ --pgf-accent: #34D399; --pgf-accent-hover: #6EE7B7; --pgf-accent-light: #064E3B; /* ── GDPR ── */ --pgf-gdpr: #A78BFA; --pgf-gdpr-hover: #C4B5FD; --pgf-gdpr-light: #2E1065; /* ── Semantic (adjusted for dark bg) ── */ --pgf-success: #34D399; --pgf-success-bg: #064E3B; --pgf-warning: #FBBF24; --pgf-warning-bg: #451A03; --pgf-danger: #F87171; --pgf-danger-bg: #450A0A; --pgf-info: #60A5FA; --pgf-info-bg: #172554; /* ── Shadows (stronger for dark bg) ── */ --pgf-shadow: 0 1px 3px rgba(0,0,0,0.2); --pgf-shadow-hover: 0 4px 12px rgba(0,0,0,0.3); --pgf-shadow-modal: 0 8px 30px rgba(0,0,0,0.4); } /* ── Button text always white in dark mode (high contrast on colored bg) ── */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:active, [data-theme="dark"] .btn-accent, [data-theme="dark"] .btn-accent:hover, [data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-danger:hover { color: #0F172A; } /* ── Specific dark overrides ── */ [data-theme="dark"] .bookmark-card .thumbnail { border-color: var(--pgf-border); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--pgf-bg); color: var(--pgf-text); border-color: var(--pgf-border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--pgf-text-muted); } [data-theme="dark"] .logo-text { color: var(--pgf-text); } /* Logo: invert to white in dark mode */ [data-theme="dark"] .logo, [data-theme="dark"] .auth-logo img, [data-theme="dark"] .sidebar-header .logo { filter: brightness(0) invert(1); } /* OAuth buttons dark mode */ [data-theme="dark"] .btn-oauth { background: var(--pgf-bg-alt); border-color: var(--pgf-border); color: var(--pgf-text); } [data-theme="dark"] .btn-oauth:hover { background: var(--pgf-bg-hover); border-color: var(--pgf-primary); } [data-theme="dark"] .oauth-divider { color: var(--pgf-text-muted); } [data-theme="dark"] .oauth-divider::before, [data-theme="dark"] .oauth-divider::after { border-color: var(--pgf-border); } /* Language switcher dark mode */ [data-theme="dark"] .lang-link { color: var(--pgf-text-secondary); } [data-theme="dark"] .lang-link.active { color: var(--pgf-text); } /* ── Alert dark mode ── */ [data-theme="dark"] .alert-success { background: rgba(16,185,129,0.15); color: #6EE7B7; border-color: rgba(16,185,129,0.3); } [data-theme="dark"] .alert-warning { background: rgba(245,158,11,0.15); color: #FCD34D; border-color: rgba(245,158,11,0.3); } [data-theme="dark"] .alert-danger { background: rgba(239,68,68,0.15); color: #FCA5A5; border-color: rgba(239,68,68,0.3); } [data-theme="dark"] .alert-info { background: rgba(59,130,246,0.15); color: #93C5FD; border-color: rgba(59,130,246,0.3); } [data-theme="dark"] .alert-gdpr { background: rgba(139,92,246,0.15); color: #C4B5FD; border-color: rgba(139,92,246,0.3); } /* ── Form elements dark mode ── */ [data-theme="dark"] .form-select, [data-theme="dark"] .form-input, [data-theme="dark"] textarea { background: var(--pgf-bg-alt); color: var(--pgf-text); border-color: var(--pgf-border); } /* ── Modal dark mode ── */ [data-theme="dark"] .modal-content, [data-theme="dark"] .dialog-content { background: var(--pgf-bg); border-color: var(--pgf-border); } /* ── Consent card (privacy center) ── */ [data-theme="dark"] .consent-card { background: var(--pgf-bg-alt); } /* ── Dropdown dark mode ── */ [data-theme="dark"] .dropdown-menu { background: var(--pgf-bg); border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04); } [data-theme="dark"] .dropdown-item:hover { background: var(--pgf-bg-alt); } [data-theme="dark"] .dropdown-item.danger:hover { background: rgba(239, 68, 68, 0.12); }