/** * DetailBook Dark Mode Theme * * Usage: Add data-theme="dark" to element * Toggle with theme.js */ :root { /* Background colors */ --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6; --bg-card: #ffffff; --bg-hover: #f3f4f6; --bg-input: #ffffff; /* Text colors */ --text-primary: #1f2937; --text-secondary: #6b7280; --text-muted: #9ca3af; --text-inverse: #ffffff; /* Border colors */ --border-color: #e5e7eb; --border-light: #f3f4f6; --border-dark: #d1d5db; /* Accent colors (purple - stays same in both modes) */ --accent: #667eea; --accent-dark: #5a67d8; --accent-light: #818cf8; --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --accent-bg: rgba(102, 126, 234, 0.1); /* Status colors */ --success: #10b981; --success-bg: #d1fae5; --success-text: #065f46; --warning: #f59e0b; --warning-bg: #fef3c7; --warning-text: #92400e; --danger: #ef4444; --danger-bg: #fee2e2; --danger-text: #991b1b; --info: #3b82f6; --info-bg: #dbeafe; --info-text: #1e40af; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Sidebar specific */ --sidebar-bg: #F7F8FD; --sidebar-text: #4b5563; --sidebar-hover: #f3f4f6; --sidebar-active-bg: var(--accent-gradient); --sidebar-active-text: #ffffff; /* Modal overlay */ --overlay-bg: rgba(0, 0, 0, 0.5); } /* Dark Mode */ [data-theme="dark"] { /* Background colors */ --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; --bg-card: #1e293b; --bg-hover: #334155; --bg-input: #1e293b; /* Text colors */ --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --text-inverse: #0f172a; /* Border colors */ --border-color: #475569; --border-light: #334155; --border-dark: #64748b; /* Accent colors (purple - brighter for dark mode visibility) */ --accent: #818cf8; --accent-dark: #667eea; --accent-light: #a5b4fc; --accent-bg: rgba(129, 140, 248, 0.15); /* Status colors (slightly adjusted for dark bg) */ --success: #34d399; --success-bg: rgba(52, 211, 153, 0.15); --success-text: #6ee7b7; --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.15); --warning-text: #fcd34d; --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.15); --danger-text: #fca5a5; --info: #60a5fa; --info-bg: rgba(96, 165, 250, 0.15); --info-text: #93c5fd; /* Shadows (darker, more subtle) */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3); /* Sidebar specific */ --sidebar-bg: #1e293b; --sidebar-text: #94a3b8; --sidebar-hover: #334155; --sidebar-active-bg: var(--accent-gradient); --sidebar-active-text: #ffffff; /* Modal overlay */ --overlay-bg: rgba(0, 0, 0, 0.7); } /* Prevent flash of wrong theme on load */ html { background-color: var(--bg-primary); } /* Dark mode smooth gradient background */ [data-theme="dark"] body { background: radial-gradient(ellipse at top left, rgba(102, 126, 234, 0.15) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(118, 75, 162, 0.1) 0%, transparent 50%), radial-gradient(ellipse at center, rgba(30, 41, 59, 0.5) 0%, transparent 70%), linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); background-attachment: fixed; } /* Smooth transitions when switching themes */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important; } /* Theme Toggle Button */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--bg-hover); color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; } .theme-toggle:hover { background: var(--accent-bg); color: var(--accent); } .theme-toggle svg { width: 20px; height: 20px; } /* Show/hide sun/moon icons based on theme */ .theme-toggle .sun-icon { display: none; } .theme-toggle .moon-icon { display: block; } [data-theme="dark"] .theme-toggle .sun-icon { display: block; } [data-theme="dark"] .theme-toggle .moon-icon { display: none; } /* Common utility classes */ .bg-primary { background-color: var(--bg-primary); } .bg-secondary { background-color: var(--bg-secondary); } .bg-tertiary { background-color: var(--bg-tertiary); } .bg-card { background-color: var(--bg-card); } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .border-default { border-color: var(--border-color); } /* Footer dark mode support - override inline styles */ #site-footer { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] #site-footer { background-color: var(--bg-secondary) !important; border-top-color: var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] #site-footer a.footer-link { color: var(--text-secondary) !important; } [data-theme="dark"] #site-footer a.footer-link:hover { color: var(--accent) !important; } [data-theme="dark"] #site-footer p { color: var(--text-muted) !important; } /* ================================ Alert Banners - Dark Mode ================================ */ /* Trial Banner - translucent amber */ [data-theme="dark"] #trialBanner { background: rgba(251, 191, 36, 0.15) !important; border-color: rgba(251, 191, 36, 0.4) !important; backdrop-filter: blur(8px); } [data-theme="dark"] #trialBanner div[style*="color: #92400e"] { color: #fcd34d !important; } [data-theme="dark"] #trialBanner button[onclick="dismissTrialBanner()"] { color: #fcd34d !important; } /* Trial Expired Banner - translucent red */ [data-theme="dark"] #trialExpiredBanner { background: rgba(248, 113, 113, 0.15) !important; border-color: rgba(248, 113, 113, 0.4) !important; backdrop-filter: blur(8px); } [data-theme="dark"] #trialExpiredBanner div[style*="color: #991b1b"] { color: #fca5a5 !important; } /* Payment Failed Banner - translucent red */ [data-theme="dark"] #paymentFailedBanner { background: rgba(248, 113, 113, 0.15) !important; border-color: rgba(248, 113, 113, 0.4) !important; backdrop-filter: blur(8px); } [data-theme="dark"] #paymentFailedBanner div[style*="color: #991b1b"] { color: #fca5a5 !important; } /* SMS Warning Banner - translucent amber */ [data-theme="dark"] .sms-warning-banner { background: rgba(251, 191, 36, 0.15) !important; border-color: rgba(251, 191, 36, 0.4) !important; backdrop-filter: blur(8px); } [data-theme="dark"] .sms-warning-banner span { color: #fcd34d !important; } [data-theme="dark"] .sms-warning-link { color: #fbbf24 !important; } [data-theme="dark"] .sms-warning-close { color: #fcd34d !important; } /* SMS Warning Banner danger state - translucent red */ [data-theme="dark"] .sms-warning-banner.danger { background: rgba(248, 113, 113, 0.15) !important; border-color: rgba(248, 113, 113, 0.4) !important; } [data-theme="dark"] .sms-warning-banner.danger span { color: #fca5a5 !important; } [data-theme="dark"] .sms-warning-banner.danger .sms-warning-link { color: #f87171 !important; } [data-theme="dark"] .sms-warning-banner.danger .sms-warning-close { color: #fca5a5 !important; }