/* * Dark mode overrides. * Applied via the `dark` class on . * Palette: * background: #141414 * card: #1e1e1e * surface: #272727 * border: #303030 * text: #e2ddd7 (warm cream white, echoes the light-mode #faf9f6) * text-muted: #8b8680 * text-faint: #5c5752 */ /* ── Global ── */ html.dark body { background: #141414 !important; color: #e2ddd7 !important; } html.dark .bg-white { background-color: #1e1e1e !important; color: #e2ddd7 !important; } /* ── Toolbar / nav ── */ html.dark .nav { border-bottom-color: #303030 !important; } html.dark .nav-link { color: #e2ddd7 !important; } html.dark .nav-link:hover { color: #8b8680 !important; } html.dark .nav-link::after, html.dark .user-menu-btn::after { background-color: #e2ddd7 !important; } html.dark .user-menu-btn { color: #8b8680 !important; } html.dark .user-menu-btn:hover { color: #e2ddd7 !important; } html.dark .user-dropdown { background: #1e1e1e !important; border-color: #303030 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important; } html.dark .dropdown-item { color: #e2ddd7 !important; border-bottom-color: #272727 !important; } html.dark .dropdown-item:hover { background-color: #272727 !important; border-left-color: #8b8680 !important; } html.dark .logout-item:hover { color: #fca5a5 !important; background-color: #2a1a1a !important; border-left-color: #fca5a5 !important; } /* ── Dark mode toggle button ── */ html.dark .theme-toggle { color: #8b8680 !important; } html.dark .theme-toggle:hover { color: #e2ddd7 !important; background-color: #272727 !important; } /* ── Headings ── */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: #e2ddd7 !important; } html.dark p { color: #c9c4be; } /* ── Home page ── */ html.dark .home-hero { border-bottom-color: #303030 !important; } html.dark .hero-eyebrow { color: #5c5752 !important; } html.dark .hero-title { color: #e2ddd7 !important; } html.dark .hero-subtitle { color: #8b8680 !important; } html.dark .home-section { border-bottom-color: #303030 !important; } html.dark .home-section:hover { background: #1e1e1e !important; } html.dark .section-label { color: #5c5752 !important; } html.dark .section-title { color: #e2ddd7 !important; } html.dark .section-meta { color: #8b8680 !important; } html.dark .section-arrow { color: #5c5752 !important; } html.dark .home-section:hover .section-arrow { color: #e2ddd7 !important; } html.dark .quote-block { border-left-color: #303030 !important; color: #8b8680 !important; } /* ── Families list page ── */ html.dark .families-container { background: #141414 !important; } html.dark .families-header h1 { color: #e2ddd7 !important; } html.dark .families-header p { color: #8b8680 !important; } html.dark .family-card { background: #1e1e1e !important; border-color: #303030 !important; } html.dark .family-card-link:hover .family-card { background: #272727 !important; border-color: #5c5752 !important; border-left-color: #e2ddd7 !important; } html.dark .family-name { color: #e2ddd7 !important; } html.dark .family-description { color: #8b8680 !important; } html.dark .create-family-btn { background-color: #e2ddd7 !important; color: #141414 !important; } html.dark .create-family-btn:hover { background-color: #c9c4be !important; } /* ── People list page ── */ html.dark .people-container { background: #141414 !important; } html.dark .people-header h1 { color: #e2ddd7 !important; } html.dark .people-header p { color: #8b8680 !important; } html.dark .people-card { background: #1e1e1e !important; border-color: #303030 !important; } html.dark .people-card-link:hover .people-card { background: #272727 !important; border-color: #5c5752 !important; border-left-color: #e2ddd7 !important; } html.dark .person-name { color: #e2ddd7 !important; } html.dark .person-family-name, html.dark .person-birthday, html.dark .person-description { color: #8b8680 !important; } html.dark .search-input { background: #1e1e1e !important; border-color: #303030 !important; color: #e2ddd7 !important; } html.dark .search-input::placeholder { color: #5c5752 !important; } html.dark .search-input:focus { border-color: #8b8680 !important; box-shadow: 0 0 0 3px rgba(139, 134, 128, 0.12) !important; } html.dark .empty-state { background: #1e1e1e !important; border-color: #303030 !important; } html.dark .empty-state-title { color: #e2ddd7 !important; } html.dark .empty-state-subtitle { color: #8b8680 !important; } html.dark .no-search-results { background: #1e1e1e !important; border-color: #303030 !important; } html.dark .no-search-results-title { color: #e2ddd7 !important; } html.dark .no-search-results-text { color: #8b8680 !important; } html.dark .create-btn, html.dark .create-person-btn { background-color: #e2ddd7 !important; color: #141414 !important; } html.dark .create-btn:hover, html.dark .create-person-btn:hover { background-color: #c9c4be !important; } /* ── Person detail page ── */ html.dark .person-details-wrapper { background: #141414 !important; } html.dark .person-header { border-bottom-color: #303030 !important; } html.dark .person-title { color: #e2ddd7 !important; } html.dark .person-meta { color: #8b8680 !important; } html.dark .description-content { background-color: #1e1e1e !important; border-color: #303030 !important; border-left-color: #8b8680 !important; color: #c9c4be !important; } html.dark .description-title { color: #e2ddd7 !important; border-bottom-color: #303030 !important; } html.dark .info-card { background-color: #1e1e1e !important; border-color: #303030 !important; } html.dark .info-card:hover { border-color: #5c5752 !important; border-left-color: #e2ddd7 !important; } html.dark .info-label { color: #5c5752 !important; } html.dark .info-value { color: #e2ddd7 !important; } html.dark .section-title { color: #e2ddd7 !important; border-bottom-color: #303030 !important; } html.dark .family-card { background-color: #1e1e1e !important; border-color: #303030 !important; } html.dark .family-card:hover { border-color: #5c5752 !important; border-left-color: #e2ddd7 !important; } html.dark .family-card-name { color: #e2ddd7 !important; } /* ── Family detail page ── */ /* Family details */ html.dark .hero-info-side { background: #141414 !important; color: #e2ddd7 !important; } html.dark .family-hero-title { color: #e2ddd7 !important; } html.dark .family-hero-description { color: #8b8680 !important; } html.dark .hero-stat-value { color: #e2ddd7 !important; } html.dark .hero-stat-label { color: #8b8680 !important; } html.dark .btn-back { color: #8b8680 !important; } html.dark .btn-back:hover { color: #e2ddd7 !important; } html.dark .members-section { background: #141414 !important; } html.dark .members-header { border-bottom-color: #303030 !important; } html.dark .members-title { color: #e2ddd7 !important; } html.dark .member-card { background: #1e1e1e !important; border-color: #303030 !important; } html.dark .member-card:hover { background: #272727 !important; border-color: #8b8680 !important; } html.dark .member-name { color: #e2ddd7 !important; } html.dark .member-role { color: #8b8680 !important; } html.dark .member-edit-btn { color: #8b8680 !important; border-color: #303030 !important; } html.dark .member-edit-btn:hover { color: #e2ddd7 !important; border-color: #8b8680 !important; } html.dark .category-title { color: #5c5752 !important; border-bottom-color: #303030 !important; } html.dark .empty-members { color: #5c5752 !important; } /* ── Settings ── */ html.dark .settings-container { background: #141414 !important; } html.dark .settings-header h1 { color: #e2ddd7 !important; } html.dark .settings-header p { color: #8b8680 !important; } html.dark .settings-section { background: #1e1e1e !important; border-color: #303030 !important; border-left-color: #8b8680 !important; } html.dark .settings-section .section-title { color: #e2ddd7 !important; border-bottom-color: #303030 !important; } html.dark .user-info { background: #272727 !important; border-color: #303030 !important; } html.dark .user-info-label { color: #5c5752 !important; } html.dark .user-info-value { color: #e2ddd7 !important; } /* ── Admin page ── */ html.dark .admin-container { background: #141414 !important; } html.dark .admin-table { border-color: #303030 !important; } html.dark .admin-table th { background: #1e1e1e !important; color: #5c5752 !important; border-bottom-color: #303030 !important; } html.dark .admin-table td { border-bottom-color: #272727 !important; color: #e2ddd7 !important; } html.dark .admin-table tr:hover td { background: #1e1e1e !important; } html.dark .badge { background: #272727 !important; color: #8b8680 !important; border-color: #303030 !important; } html.dark .link-select { background: #272727 !important; border-color: #303030 !important; color: #e2ddd7 !important; } /* ── Form pages (create/edit) ── */ /* Page wrappers — each form has its own class */ html.dark .create-family-wrapper, html.dark .edit-family-wrapper, html.dark .create-person-wrapper, html.dark .edit-person-wrapper, html.dark .login-wrapper, html.dark .register-wrapper, html.dark .admin-create-user-wrapper, html.dark .wrapper { background: #141414 !important; } /* Generic .header used by add/edit member pages */ html.dark .header h1 { color: #e2ddd7 !important; } html.dark .header p { color: #8b8680 !important; } /* Form headers */ html.dark .create-family-header h1, html.dark .edit-family-header h1, html.dark .create-person-header h1, html.dark .form-header, html.dark .form-title { color: #e2ddd7 !important; } html.dark .create-family-header p, html.dark .edit-family-header p, html.dark .create-person-header p, html.dark .form-subtitle { color: #8b8680 !important; } /* Shared form element styles */ html.dark .form-label { color: #e2ddd7 !important; } html.dark .form-input, html.dark .form-textarea { background: #272727 !important; border-color: #303030 !important; color: #e2ddd7 !important; } html.dark .form-input:focus, html.dark .form-textarea:focus { border-color: #8b8680 !important; box-shadow: 0 0 0 3px rgba(139, 134, 128, 0.12) !important; outline: none !important; } html.dark .form-input::placeholder, html.dark .form-textarea::placeholder { color: #5c5752 !important; } html.dark .form-input:disabled { background: #1e1e1e !important; color: #5c5752 !important; } html.dark .file-input-label { background: #272727 !important; border-color: #303030 !important; color: #8b8680 !important; } html.dark .file-input-label:hover { background: #303030 !important; border-color: #5c5752 !important; } html.dark .char-count { color: #5c5752 !important; } html.dark .cancel-btn, html.dark .btn-cancel { color: #8b8680 !important; } html.dark .cancel-btn:hover, html.dark .btn-cancel:hover { color: #e2ddd7 !important; } html.dark .btn-remove-picture { color: #fca5a5 !important; border-color: #fca5a5 !important; } html.dark .btn-remove-picture:hover { background: #2b0d0d !important; } /* Tabs on add member page */ html.dark .tab-container { border-bottom-color: #303030 !important; } html.dark .tab-button { color: #8b8680 !important; } html.dark .tab-button.active { color: #e2ddd7 !important; border-bottom-color: #e2ddd7 !important; } html.dark .tab-button:hover:not(.active) { color: #c9c4be !important; } /* form-select (used instead of form-input in these pages) */ html.dark .form-select { background-color: #272727 !important; border-color: #303030 !important; color: #e2ddd7 !important; } html.dark .form-select:focus { border-color: #8b8680 !important; box-shadow: 0 0 0 3px rgba(139, 134, 128, 0.12) !important; outline: none !important; } /* Divider line */ html.dark .divider { border-top-color: #303030 !important; } /* Current role badge on edit member page */ html.dark .current-role-badge { background: #272727 !important; border-color: #303030 !important; color: #c9c4be !important; } html.dark .form-value { color: #e2ddd7 !important; } html.dark .section-divider { border-color: #303030 !important; color: #5c5752 !important; } html.dark .section-divider::before, html.dark .section-divider::after { border-color: #303030 !important; } /* ── Alerts ── */ html.dark .alert-success { background: #0d2b1a !important; color: #86efac !important; border-left-color: #4ade80 !important; } html.dark .alert-error { background: #2b0d0d !important; color: #fca5a5 !important; border-left-color: #f87171 !important; } /* Force-change password banner */ html.dark .change-banner { background: #2a2000 !important; border-color: #6b5500 !important; color: #fcd34d !important; } /* ── Buttons (buttons.css overrides) ── */ html.dark .btn-primary { background: #e2ddd7 !important; color: #141414 !important; border-color: #e2ddd7 !important; } html.dark .btn-primary:hover { background: #c9c4be !important; border-color: #c9c4be !important; } html.dark .btn-secondary, html.dark .add-member-btn { background: transparent !important; color: #8b8680 !important; border-color: #303030 !important; } html.dark .btn-secondary:hover, html.dark .add-member-btn:hover { color: #e2ddd7 !important; border-color: #8b8680 !important; background: #272727 !important; } html.dark .btn-danger { color: #fca5a5 !important; border-color: #fca5a5 !important; } html.dark .btn-danger:hover { background: #2b0d0d !important; } /* ── Back links ── */ html.dark .back-link { color: #8b8680 !important; } html.dark .back-link:hover { color: #e2ddd7 !important; } /* ── Misc: modal overlay (modal.css) ── */ html.dark .modal-backdrop { background: rgba(0, 0, 0, 0.85) !important; } html.dark .modal-content { background: #1e1e1e !important; border-color: #303030 !important; } /* ── Scrollbar ── */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: #1e1e1e; } html.dark ::-webkit-scrollbar-thumb { background: #303030; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #444; }