/** * Dark Theme Styles * Applied when data-theme="dark" is set on */ /* Dark Mode Color Variables */ [data-theme="dark"] { --primary: #818cf8; --primary-dark: #6366f1; --secondary: #f59e0b; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --dark: #f3f4f6; --text: #e5e7eb; --text-light: #9ca3af; --light: #1f2937; --border: #374151; --background: #111827; --card-bg: #1f2937; --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); } /* Dark Mode Styles */ [data-theme="dark"] body { background: var(--background); color: var(--text); } [data-theme="dark"] .dashboard-main, [data-theme="dark"] main { background: var(--background); } [data-theme="dark"] .container { background: transparent; } /* Section Headers */ [data-theme="dark"] .section-header, [data-theme="dark"] .page-header { color: var(--text); } [data-theme="dark"] .section-header h2, [data-theme="dark"] .page-header h1, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--text); } [data-theme="dark"] .section-header p, [data-theme="dark"] .page-header p { color: var(--text-light); } [data-theme="dark"] .header { background: var(--card-bg); border-bottom: 1px solid var(--border); } [data-theme="dark"] .nav-link { color: var(--text); } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: var(--primary); } [data-theme="dark"] .user-menu { background: var(--light); } [data-theme="dark"] .user-dropdown-content { background: var(--card-bg); border: 1px solid var(--border); } [data-theme="dark"] .user-dropdown-content a:hover { background: var(--light); } /* Cards & Sections */ [data-theme="dark"] .stat-card, [data-theme="dark"] .dashboard-card, [data-theme="dark"] .dashboard-section, [data-theme="dark"] .subject-card, [data-theme="dark"] .paper-card, [data-theme="dark"] .student-card, [data-theme="dark"] .tutor-card, [data-theme="dark"] .assignment-card, [data-theme="dark"] .assignment-item, [data-theme="dark"] .form-card, [data-theme="dark"] .connect-tutor-banner { background: var(--card-bg) !important; border: 1px solid var(--border); } [data-theme="dark"] .stat-card:hover, [data-theme="dark"] .subject-card:hover, [data-theme="dark"] .paper-card:hover, [data-theme="dark"] .student-card:hover, [data-theme="dark"] .tutor-card:hover, [data-theme="dark"] .assignment-card:hover { border-color: var(--primary); } /* Tutor & Student Sections */ [data-theme="dark"] .tutor-avatar, [data-theme="dark"] .student-avatar { background: var(--light); color: var(--text); } [data-theme="dark"] .tutor-info h4, [data-theme="dark"] .tutor-info h3, [data-theme="dark"] .student-info h4, [data-theme="dark"] .student-info h3 { color: var(--text); } [data-theme="dark"] .tutor-info p, [data-theme="dark"] .student-info p { color: var(--text-light); } [data-theme="dark"] .tutor-subjects, [data-theme="dark"] .student-meta { background: var(--light); color: var(--text-light); } [data-theme="dark"] .status-badge { background: var(--light); color: var(--text); } [data-theme="dark"] .status-badge.paused { background: #78350f; color: #fef3c7; } /* Assignments & Activities */ [data-theme="dark"] .empty-state { color: var(--text-light); } [data-theme="dark"] .empty-state i { color: var(--border); } [data-theme="dark"] .assignment-subject { background: var(--light); } [data-theme="dark"] .assignment-status { background: var(--light); } [data-theme="dark"] .activity-item, [data-theme="dark"] .action-card { background: var(--card-bg); border: 1px solid var(--border); } [data-theme="dark"] .activity-item:hover, [data-theme="dark"] .action-card:hover { border-color: var(--primary); } [data-theme="dark"] .activity-icon { background: var(--light); } [data-theme="dark"] .activity-content h4, [data-theme="dark"] .action-card h3 { color: var(--text); } [data-theme="dark"] .activity-content p, [data-theme="dark"] .action-card p { color: var(--text-light); } [data-theme="dark"] .activity-time { color: var(--text-light); } /* Chat Modal */ [data-theme="dark"] .chat-container { background: var(--card-bg); } [data-theme="dark"] .chat-messages { background: var(--background); } [data-theme="dark"] .chat-message.other .message-bubble { background: var(--light); color: var(--text); border-color: var(--border); } [data-theme="dark"] .chat-input-container { background: var(--card-bg); border-top-color: var(--border); } [data-theme="dark"] #chat-message-input { background: var(--light); color: var(--text); border-color: var(--border); } [data-theme="dark"] #chat-message-input:focus { border-color: var(--primary); } /* Notifications */ [data-theme="dark"] .notification-panel { background: var(--card-bg); border: 1px solid var(--border); } [data-theme="dark"] .notification-item { background: var(--card-bg); border-bottom-color: var(--border); } [data-theme="dark"] .notification-item:hover { background: var(--light) !important; } [data-theme="dark"] .notification-item.unread { background: rgba(129, 140, 248, 0.15) !important; } [data-theme="dark"] .notification-title { color: var(--text); } [data-theme="dark"] .notification-message, [data-theme="dark"] .notification-time { color: var(--text-light); } [data-theme="dark"] .notification-empty { color: var(--text-light); } /* Forms */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .input-group input { background: var(--light); color: var(--text); border-color: var(--border); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--primary); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-light); } /* Tables */ [data-theme="dark"] table { background: var(--card-bg); } [data-theme="dark"] th { background: var(--light); color: var(--text); border-bottom-color: var(--border); } [data-theme="dark"] td { border-bottom-color: var(--border); } [data-theme="dark"] tr:hover { background: var(--light); } /* Mobile Nav */ [data-theme="dark"] .nav { background: var(--card-bg); border-bottom: 1px solid var(--border); } [data-theme="dark"] .nav-link:hover { background: var(--light); } [data-theme="dark"] .mobile-only-links { border-top-color: var(--border); } /* Modals */ [data-theme="dark"] .confirm-modal-content, [data-theme="dark"] .modal-content { background: var(--card-bg); color: var(--text); } [data-theme="dark"] .modal-header { border-bottom-color: var(--border); } [data-theme="dark"] .modal-footer { border-top-color: var(--border); } /* Buttons in Dark Mode */ [data-theme="dark"] .btn-secondary { background: var(--light); color: var(--text); border-color: var(--border); } [data-theme="dark"] .btn-secondary:hover { background: var(--border); } [data-theme="dark"] .btn-icon { background: var(--light); color: var(--text); border-color: var(--border); } [data-theme="dark"] .btn-icon:hover { border-color: var(--primary); color: var(--primary); } /* Footer */ [data-theme="dark"] .footer { background: #0f172a; } /* Theme Toggle in Dropdown */ #theme-toggle { cursor: pointer; transition: all 0.2s; } #theme-toggle:hover { background: var(--light); } #theme-toggle i { transition: transform 0.3s; } #theme-toggle:hover i { transform: rotate(20deg); }