/* Design tokens */ :root { --app-bg: #ffffff; --app-fg: #111827; --app-muted: #6b7280; --app-card-bg: #ffffff; --app-card-border: #e5e7eb; --app-primary: #0d6efd; --app-radius: 6px; --app-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.04); --app-transition: 0.2s ease; } html.dark-mode, body.dark-mode { --app-bg: #1e1e1e; --app-fg: #e4e4e7; --app-muted: #a1a1aa; --app-card-bg: #252525; --app-card-border: rgba(255,255,255,0.08); --app-primary: #4f46e5; } /* Light mode enhancements (default Bootstrap remains) */ body { transition: background-color var(--app-transition), color var(--app-transition); } /* Dark mode base (supports class on or ) */ .dark-mode body, body.dark-mode { background-color: #1e1e1e; /* dark grey */ color: #e4e4e7; /* soft off-white */ } /* Navbar in dark mode */ .dark-mode .navbar, body.dark-mode .navbar { background-color: #2a2a2a !important; border-bottom: 1px solid rgba(255,255,255,0.08); } .dark-mode .navbar .navbar-brand, .dark-mode .navbar .nav-link, body.dark-mode .navbar .navbar-brand, body.dark-mode .navbar .nav-link { color: #e4e4e7 !important; } .dark-mode .navbar .nav-link:hover, body.dark-mode .navbar .nav-link:hover { color: #ffffff !important; } /* Toggler */ .dark-mode .navbar-light .navbar-toggler, body.dark-mode .navbar-light .navbar-toggler { border-color: rgba(255,255,255,0.25); } .dark-mode .navbar-light .navbar-toggler-icon, body.dark-mode .navbar-light .navbar-toggler-icon { filter: invert(1); } /* Dropdown menu */ .dark-mode .dropdown-menu, body.dark-mode .dropdown-menu { background-color: #2a2a2a; border-color: rgba(255,255,255,0.08); } .dark-mode .dropdown-item, body.dark-mode .dropdown-item { color: #e4e4e7; } .dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:hover { background-color: #3a3a3a; } /* Cards */ .dark-mode .card, body.dark-mode .card { background-color: #252525; color: #e6e6ea; border-color: rgba(255,255,255,0.08); } .dark-mode .card .timestamp, .dark-mode .timestamp, body.dark-mode .card .timestamp, body.dark-mode .timestamp { color: #a1a1aa; } /* Tables */ .dark-mode table, body.dark-mode table { color: #e4e4e7; } .dark-mode .table-striped > tbody > tr:nth-of-type(odd) > *, body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { color: #e4e4e7; background-color: rgba(255,255,255,0.03); } /* Buttons */ .dark-mode .btn-primary, body.dark-mode .btn-primary { background-color: #4f46e5; border-color: #4f46e5; } .dark-mode .btn-secondary, body.dark-mode .btn-secondary { background-color: #3f3f46; border-color: #3f3f46; color: #e4e4e7; } /* Forms */ .dark-mode .form-control, .dark-mode .form-select, body.dark-mode .form-control, body.dark-mode .form-select { background-color: #2b2b2b; color: #e4e4e7; border-color: rgba(255,255,255,0.12); } .dark-mode .form-control::placeholder, body.dark-mode .form-control::placeholder { color: #9ca3af; } /* Form labels and help text */ .dark-mode label, .dark-mode .form-label, body.dark-mode label, body.dark-mode .form-label { color: var(--app-fg); } body.dark-mode .form-text, .dark-mode .form-text { color: var(--app-muted); } /* Code blocks and pre */ .dark-mode pre, .dark-mode code, body.dark-mode pre, body.dark-mode code { background-color: #1f2937; color: #e5e7eb; } /* Links */ .dark-mode a, body.dark-mode a { color: #93c5fd; } .dark-mode a:hover, body.dark-mode a:hover { color: #bfdbfe; } /* Muted text legibility in dark mode */ .dark-mode .text-muted, body.dark-mode .text-muted { color: var(--app-muted) !important; } /* List groups */ .dark-mode .list-group-item, body.dark-mode .list-group-item { background-color: #252525; color: #e4e4e7; border-color: rgba(255,255,255,0.08); } .dark-mode .list-group-item:hover, body.dark-mode .list-group-item:hover { background-color: #2f2f2f; } /* Breadcrumbs */ .dark-mode .breadcrumb, body.dark-mode .breadcrumb { background: transparent; } .dark-mode .breadcrumb .breadcrumb-item, body.dark-mode .breadcrumb .breadcrumb-item { color: var(--app-fg); } .dark-mode .breadcrumb .breadcrumb-item.active, body.dark-mode .breadcrumb .breadcrumb-item.active { color: var(--app-muted); } .dark-mode .breadcrumb a, body.dark-mode .breadcrumb a { color: #93c5fd; } .dark-mode .breadcrumb a:hover, body.dark-mode .breadcrumb a:hover { color: #bfdbfe; } /* Tables: Better dark-mode striping and hover */ .dark-mode .table, body.dark-mode .table { --bs-table-color: #e4e4e7; --bs-table-bg: #232323; --bs-table-striped-color: #e4e4e7; --bs-table-striped-bg: #2a2a2a; --bs-table-hover-color: #e4e4e7; --bs-table-hover-bg: #333333; --bs-border-color: rgba(255,255,255,0.12); background-color: var(--bs-table-bg); color: var(--bs-table-color); } /* Utility background overrides for dark mode */ .dark-mode .bg-light, body.dark-mode .bg-light { background-color: #2a2a2a !important; color: #e4e4e7 !important; } /* Modals */ .dark-mode .modal-content, body.dark-mode .modal-content { background-color: #252525; color: #e4e4e7; border-color: rgba(255,255,255,0.08); } .dark-mode .modal-header, .dark-mode .modal-footer, body.dark-mode .modal-header, body.dark-mode .modal-footer { border-color: rgba(255,255,255,0.08); } .dark-mode .modal-title, body.dark-mode .modal-title { color: #e4e4e7; } .dark-mode .btn-close, body.dark-mode .btn-close { filter: invert(1); opacity: 0.8; } .dark-mode .btn-close:hover, body.dark-mode .btn-close:hover { opacity: 1; }