/* ============================================================ UFUQ Quran LMS - Dark Mode Theme Toggle with [data-theme="dark"] on or ============================================================ */ /* ----- Dark Mode Variables ----- */ [data-theme="dark"] { --bg-body: #1a1a2e; --bg-card: #242442; --bg-quran: #2a2520; --bg-sidebar: linear-gradient(180deg, #0a1628 0%, #12203a 100%); --text-primary: #e0e0e0; --text-secondary: #9ca3af; --text-muted: #6b7280; --text-inverse: #ffffff; --border-color: #3a3a5c; --border-light: #2e2e4a; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2); --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.3); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.35); --primary: #2E8B65; --primary-light: #3EA578; --primary-dark: #1B6B4A; --secondary: #D4BC7E; --secondary-light: #E0CC96; color-scheme: dark; } /* ----- Body ----- */ [data-theme="dark"] body { background-color: var(--bg-body); color: var(--text-primary); } /* ----- Cards ----- */ [data-theme="dark"] .card, [data-theme="dark"] .stat-card { background: var(--bg-card); border-color: var(--border-light); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { border-color: var(--border-light); } /* ----- Glass Panels (Dark) ----- */ [data-theme="dark"] .glass-panel { background: rgba(36, 36, 66, 0.75); border-color: rgba(58, 58, 92, 0.5); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .glass-card { background: rgba(36, 36, 66, 0.8); border-color: rgba(58, 58, 92, 0.5); } [data-theme="dark"] .glass-card::before { background: linear-gradient(90deg, #2E8B65, #3EA578, #D4BC7E); } [data-theme="dark"] .stat-card-glass { background: rgba(36, 36, 66, 0.7); border-color: rgba(58, 58, 92, 0.4); } /* ----- Glass Navbar (Dark) ----- */ [data-theme="dark"] .glass-navbar { background: rgba(26, 26, 46, 0.9); border-bottom-color: rgba(58, 58, 92, 0.3); box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .glass-navbar.scrolled { background: rgba(26, 26, 46, 0.96); } [data-theme="dark"] .glass-navbar .nav-link { color: var(--text-primary); } [data-theme="dark"] .glass-navbar .nav-link:hover { background: rgba(46, 139, 101, 0.1); } /* ----- Sidebar (Dark) ----- */ [data-theme="dark"] .sidebar { background: linear-gradient(180deg, #0a1628 0%, #12203a 60%, #162440 100%); } [data-theme="dark"] .sidebar::before { background: radial-gradient(circle at 20% 80%, rgba(212, 188, 126, 0.04) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 40%); } [data-theme="dark"] .sidebar-brand { border-bottom-color: rgba(212, 188, 126, 0.1); } [data-theme="dark"] .sidebar-footer { border-top-color: rgba(212, 188, 126, 0.08); } /* ----- Forms (Dark) ----- */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #1e1e3a; border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #222244; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46, 139, 101, 0.15); } [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } [data-theme="dark"] .input-group-text { background-color: #1e1e3a; border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .form-label { color: var(--text-primary); } /* ----- Tables (Dark) ----- */ [data-theme="dark"] .table { color: var(--text-primary); border-color: var(--border-light); } [data-theme="dark"] .table thead th { background-color: #1e1e3a; border-bottom-color: var(--primary); color: var(--primary-light); } [data-theme="dark"] .table tbody td { border-bottom-color: var(--border-light); } [data-theme="dark"] .table tbody tr:hover { background-color: rgba(46, 139, 101, 0.05); } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(46, 139, 101, 0.03); } /* ----- Quran Viewer (Dark) ----- */ [data-theme="dark"] .quran-page { background: var(--bg-quran); border-color: rgba(212, 188, 126, 0.2); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 0 80px rgba(200, 169, 97, 0.02); } [data-theme="dark"] .quran-page::before { border-color: rgba(212, 188, 126, 0.1); } [data-theme="dark"] .ayah-text { color: #d4c9b0; } [data-theme="dark"] .quran-page-header .surah-name { color: #3EA578; } [data-theme="dark"] .ayah-number { background: linear-gradient(135deg, rgba(212, 188, 126, 0.15), rgba(212, 188, 126, 0.05)); border-color: rgba(212, 188, 126, 0.2); color: #D4BC7E; } [data-theme="dark"] .ayah-highlight { background: rgba(212, 188, 126, 0.12); } [data-theme="dark"] .surah-bismillah .bismillah-text { color: #3EA578; } [data-theme="dark"] .quran-nav { background: rgba(42, 37, 32, 0.95); border-bottom-color: rgba(212, 188, 126, 0.1); } [data-theme="dark"] .quran-nav .surah-selector, [data-theme="dark"] .quran-nav .juz-selector { background: rgba(30, 30, 58, 0.7); border-color: rgba(212, 188, 126, 0.15); color: var(--text-primary); } [data-theme="dark"] .page-turner .page-btn { background: #2a2520; border-color: rgba(212, 188, 126, 0.2); color: #D4BC7E; } [data-theme="dark"] .quran-audio-player { background: rgba(42, 37, 32, 0.95); border-top-color: rgba(212, 188, 126, 0.1); } /* ----- Alerts (Dark) ----- */ [data-theme="dark"] .alert-success { background-color: rgba(46, 139, 101, 0.12); color: #3EA578; } [data-theme="dark"] .alert-warning { background-color: rgba(245, 158, 11, 0.12); color: #fbbf24; } [data-theme="dark"] .alert-danger { background-color: rgba(239, 68, 68, 0.12); color: #f87171; } [data-theme="dark"] .alert-info { background-color: rgba(59, 130, 246, 0.12); color: #60a5fa; } /* ----- Badges (Dark) ----- */ [data-theme="dark"] .badge-primary, [data-theme="dark"] .badge.bg-primary { background-color: rgba(46, 139, 101, 0.18) !important; color: #3EA578 !important; } [data-theme="dark"] .badge-secondary, [data-theme="dark"] .badge.bg-secondary { background-color: rgba(212, 188, 126, 0.15) !important; color: #D4BC7E !important; } /* ----- Dropdown (Dark) ----- */ [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .glass-dropdown { background: rgba(36, 36, 66, 0.95); border-color: var(--border-light); } [data-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover { background: rgba(46, 139, 101, 0.1); color: var(--primary-light); } /* ----- Modal (Dark) ----- */ [data-theme="dark"] .modal-content, [data-theme="dark"] .glass-modal .modal-content { background: rgba(36, 36, 66, 0.97); border-color: var(--border-light); } [data-theme="dark"] .modal-header { border-bottom-color: var(--border-light); } [data-theme="dark"] .modal-footer { border-top-color: var(--border-light); } /* ----- Progress (Dark) ----- */ [data-theme="dark"] .progress { background-color: rgba(46, 139, 101, 0.1); } /* ----- Dividers (Dark) ----- */ [data-theme="dark"] .divider { background: var(--border-light); } [data-theme="dark"] hr { border-color: var(--border-light); } /* ----- Scrollbar (Dark) ----- */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #1e1e3a; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(46, 139, 101, 0.25); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(46, 139, 101, 0.4); } /* ----- Skeleton (Dark) ----- */ [data-theme="dark"] .skeleton-loading { background: linear-gradient( 90deg, rgba(58, 58, 92, 0.3) 0%, rgba(58, 58, 92, 0.5) 40%, rgba(58, 58, 92, 0.3) 80% ); background-size: 200% 100%; } /* ----- Dark Mode Toggle Button ----- */ .dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; } .dark-mode-toggle button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-color, #e5e7eb); background: var(--bg-card, #ffffff); color: var(--text-secondary, #6b7280); font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .dark-mode-toggle button:hover { border-color: var(--primary); color: var(--primary); background: rgba(27, 107, 74, 0.05); } [data-theme="dark"] .dark-mode-toggle button { border-color: var(--border-color); background: var(--bg-card); color: #fbbf24; } [data-theme="dark"] .dark-mode-toggle button:hover { border-color: #fbbf24; background: rgba(251, 191, 36, 0.08); }